분류 전체보기 (460) 썸네일형 리스트형 ES6 클래스와 상속 쉽게 이해하기 class코드 예시class User { constructor(name){ this.name = name; } sayName() { console.log(this.name); }}var me = new User("nno3onn");me.sayName(); // nno3onnUser에는 name이라는 프로퍼티가 있고, sayName이라는 메서드가 있습니다.sayName은 함수인데 function 키워드가 없습니다.클래스를 만드는 이유 역시 인스턴스를 만들기 위해서 입니다.생성자에서 인스턴스를 만드는 방법과 동일합니다. 이 코드를 클래스 대신 이전 방식으로 만든다면?function UserOld(name){ this.name = name;}UserOld.p.. new 키워드 이후의 세계: JS 상속 구조 이해하기 이전 이야기가 뭐였나면..이제 프로토타입 공정 도입으로 더 효율적으로 객체를 생산하게 되었습니다.우리가 생산하는 객체는 바로 마늘 소시지입니다.그런데, 이제 똑같은 소시지만 생산하다보니 예전보다 덜 팔리게 되어서불맛나는 소시지를 만들고 싶습니다. 어떻게 하면 될까요? 코드 예시- 마늘맛 소시지function Sausage(el1, el2) { this.inside1 = el1; this.inside2 = el2;}Sausage.prototype.taste = function() { return this.inside1 + "와 "+ this.inside2 + " 맛이 난다!";}var mySausage = new Sausage("돼지고기", "마늘");console.log(mySausage.. 생성자 함수의 진화: 프로토타입으로 효율적인 객체 생성하기 프로토타입저번 시간과 이어서...생성자 함수를 통해 잘 나가는 공장장이 된 우리!하지만 넘쳐나는 쓰레기로 인해,이제는 양보다 질이 우선시되는 다품종 소량 생산 시대가 되었습니다.이제 좀 더 효율적인 객체 생산방식이 필요합니다.앞서 만든 생성자 함수를 살펴봅시다.function Food(taste) { this.name = name; this.smell = function() { console.log(this.name + "냄새가 난다"); }}var food1 = new Food("치즈 파스타");var food2 = new Food("토마토 파스타");console.log(food1.smell === food2.smell); // falsefood1과 food2의 메서드는 다른 곳을 참조하고.. 'new'만 붙이면 끝? 생성자 함수부터 클래스까지 제대로 이해하기 생성자=객체 공장장아래를 통해 더 자세하게 알아보자. new 연산자와 함수생성자란, 앞에 new 연산자가 붙은 함수를 의미하며인스턴스를 만들 수 있습니다.예를 들어서, new Object(), new Array()는 자바스크립트의 내부적으로 존재하는 내장 생성자입니다. 예제 코드var myArray = new Array(1,2,3);console.log(myArray); // [1, 2, 3]Array함수에 new를 붙였더니, 새로운 배열을 생성해서 myArray 배열이 참조하고 있습니다. 이와 마찬가지로 사용자가 직접 새로운 타입을 만들 수도 있습니다.funtion MyOwn(){}// 생성자 함수var myObj = new MyOwn();// 인스턴스 생성자보통 함수 이름을 대문자로 시작해.. 외부 함수가 사라져도 변수가 살아있는 이유: <클로저(Closure)> 클로저(Closure)closure[사전적 의미] 중단하다, 폐쇄하다 앞서 스코프에서 배웠듯,자바스크립트에는 함수 스코프가 있고,함수 내부에서 정의된 변수라면함수의 어느 부분에서든 접근할 수 있습니다.이 말은 즉, 내부 함수에서 자신을 포함하는 외부 함수의 스코프에 접근할 수 있다는 얘기입니다. 코드 예시var outer = function() { var a = 1; var inner = function() { var b = 5; var c = 6; a = a + b + c; console.log(a); } inner();}outer(); // 12이처럼 inner function은 자신의 outer functi.. JS 스코프(Scope) 제대로 이해하기: 변수는 어디까지 살아있을까? Scope(유효범위)변수의 접근성과 생존 기간을 정의합니다. 예시 코드var func1 = function() { var a = 1; var b = 2; console.log(a + b); return a + b;}var a = 20;func1(); // 3함수 스코프 안에 있는 a가 연산에 반영이 됩니다.만약 함수 스코프 밖에서 b의 값을 알고 싶은 코드를 다음과 같이 작성하게 된다면, 에러가 발생합니다.console.log(b); // ReferenceError: b is not definedb 역시 함수 스코프 안에 있기 때문에, 전역에서는 함수 스코프 안에 있는 변수에 접근할 수가 없습니다. 스코프의 장점예시로 알 수 있듯이,스코프는 이름이 충돌하는 문제를 덜어주고,자.. 자바스크립트 this는 누굴 가리킬까?: call, apply, bind, 화살표 함수까지 살펴보기 this함수를 호출하는 객체를 의미합니다. this가 존재하는 이유❌ 함수 재사용 불가let myDiner = { name: "김치찌개", menu: function() { console.log("오늘 저녁은 " + myDiner.name); }}myDiner.menu(); // "오늘 저녁은 김치찌개"위와 같은 객체가 있을 때, menu 함수는myDiner 변수 이름이 수정되거나,menu 함수 자체를 다른 객체에서 사용하고 싶은 경우에 사용이 불편하게 됩니다.이는 this를 통해 함수를 재사용할 수 있습니다. ✅ 함수 재사용 가능function menuGlobal() { console.log("오늘 저녁은 " + this.name);}let myDiner = { nam.. String인데 객체처럼? 자바스크립트의 마법: <원시 래퍼 타입> 원시타입있는 그대로 저장되는 데이터를 표현합니다. 원시타입의 종류booleannumberstringnullundefined 원시타입의 특징원시값을 변수에 할당하면, 값이 복사되어 들어갑니다. 즉, 원시값이 할당된 변수들은 모두 자기 자신만의 고유한 값을 가지게 됩니다. 코드 예시let one = 1;let two = 2;one = two;one = 3;console.log(two); // 2 typeof원시값의 종류를 알 수 있게 해주는 메서드입니다. null의 타입은 object임을 주의합시다! → 자바스크립트 내에서의 실수console.log(typeof 1); // "number"console.log(typeof "hi"); // "string"console.log(typeof true); //.. 이전 1 2 3 4 ··· 58 다음
