Life of Jibro

6. 클래스의 인스턴스 생성 과정 new 연산자와 함께 클래스를 호출하면 다음의 과정을 거쳐 인스턴스가 생성된다. 인스턴스 생성과 this 바인딩이때 클래스가 생성한 인스턴스의 프로토타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정된다. 그리고 암묵적으로 생성된 빈 객체(인스턴스)는 this에 바인딩된다. new 연산자와 함께 클래스를 호출하면 constructor의 내부 코드가 실행되기에 앞서 암묵적으로 빈 객체가 생성된다. 인스턴스 초기화 this에 바인딩되어 있는 인스턴스에 프로퍼티를 추가하고 constructor가 인수로 전달받은 초기값으로 인스턴스의 프로퍼티 값을 초기화한다. (만일 constructor가 생략되었다면 이 과정도 생략된다.) 인스턴스 반환 완성된 인스턴스가 바인..

7. 프로퍼티 7.1. 인스턴스 프로퍼티 인스턴스 프로퍼티는 constructor 내부에서 정의한다. constructor 내부에서 this에 추가한 프로퍼티는 언제나 클래스가 생성한 인스턴스의 프로퍼티가 된다. class Person { constructor(name) { // 인스턴스 프로퍼티 this.name = name; // name 프로퍼티는 public } } const me = new Person('Lee');i console.log(me); // Person { name: 'Lee' } console.log(me.name); // Lee💡 Note 접근 제한자(Access Modifier) 키워드와 ES6 ES6의 클래스는 다른 객체지향 언어처럼 private..

8. 상속에 의한 클래스 확장 8.1. 클래스 상속 동물을 추상화한 Animal 클래스와 새와 사자를 추상화한 Bird, Lion 클래스를 각각 정의한다고 하자. 새와 사자는 동물에 속하므로, Animal 클래스의 속성을 그대로 상속 받을 수 있다. 그리고 상속을 받은 새와 사자 클래스는 각각 별도의 메서드를 추가로 가질 수 있다. 이를 그림으로 표현하면 다음과 같다. 위의 도식화된 표현을 코드로 구현하면 다음과 같다. class Animal { constructor(age, weight) { this.age = age; this.weight = weight; } eat() { return 'eat'; } move() { return 'move'; } } class Bird ..

5. 메서드 5.1. constructor constructor는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드이다. 클래스가 인스턴스를 생성하는 생성자 함수라는 것을 확인하기 위해 아래의 코드를 브라우저에서 실행하여 보았다. class Person { constructor(name) { this.name = name; } } console.log(typeof Person); console.dir(Person); 클래스는 인스턴스를 생성하는 생성자 함수이다. 5.1.1. constructor 사용시 주의점 1. constructor는 클래스 내에 최대 한 개만 존재할 수 있다. class Person { constructor() {} constructor() {} } // SyntaxError: A ..

4. 인스턴스 생성 클래스는 생성자 함수이며, 반드시 new연산자와 함께 호출되어 인스턴스를 생성한다. class Person {} const me = new Person(); console.log(me); // Person {}💡 클래스 표현식으로 정의된 클래스의 인스턴스 생성 const Person = class MyClass {}; const me = new Person(); // 올바르게 생성됨 const you = new MyClass(); // ReferenceError: MyClass is not defined참고자료 [1] 모던 자바스크립트 딥다이브, 이웅모, 2022/08/24 - pp. 417 - 468 [2] 모던 자바스크립트 튜토리얼 - https://ko.javascript.inf..

3. 클래스 호이스팅 앞서 “1. 생성자 함수 vs. 클래스”에서 비교하여 설명한 것과 같이, 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다고 하였다. 이것이 무엇을 의미하는지 다음 코드를 통해 살펴보자. 아래의 경우는 클래스 선언문으로 정의한 경우이다. // 클래스 선언문 class Person {} console.log(typeof Person); // function 이 경우, 함수 선언문과 같이 자바스크립트 엔진의 소스코드 평가 과정, 즉 런타임 이전에 먼저 평가되어 함수 객체를 생성한다. 💡 클래스가 평가되어 생성된 함수 객체는 생성자함수로서 호출할 수 있는 함수 즉, constructor 이다. 생성자 함수로서 호출할 수 있는 함수는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토..

2. 클래스의 정의 클래스는 class 키워드를 사용하여 정의한다. 또한, 일반적이지는 않으나 표현식으로 클래스를 정의할 수도 있다. 이때 클래스는 함수와 마찬가지로 이름을 가질 수도, 아닐 수도 있다. // (보편적인) 클래스 선언문 class Person {} // 익명 클래스 표현식 const Person = class {}; // 기명 클래스 표현식 const Person = class MyClass {};위와 같이 클래스를 표현식으로 정의할 수 있다는 사실은 클래스가 일급 객체라는 것을 의미한다. 즉, 클래스는 일급 객체로서 다음의 일급 객체의 조건들을 만족하게 된다. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 ..

1. 생성자 함수 vs. 클래스 ES5에서는 클래스 없이 생성자함수와 프로토타입을 이용하여 객체지향 언어의 상속을 구현할 수 있었다. 이로 인해 ES6부터 도입된 Class 문법에 대해 많은 이들은 문법적 설탕(Sugar)에 불과한 것이 아닌가 하는 의문을 가지게 되었다. 생성자 함수와 프로토타입을 이용한 다음의 코드를 클래스로 생성한 경우와 비교하여 살펴보자. // ES5 생성자 함수 var Person = (function() { // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person.prototype.sayHi = function() { console.log('Hi! My name is ' + this.nam..

2. 클로저의 활용 - 캡슐화와 정보 은닉 [1] 클로저는 상태(state)를 안전하게 변경하고 유지하기 위해 사용한다. 즉, 상태가 의도치 않게 변경되지 않도록 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다. 이를 다음의 예시로 살펴보자. let num = 0; const increase = function () { return ++num; }; console.log(increase()); // 1 console.log(increase()); // 2 console.log(increase()); // 3 num = 10; console.log(increase()); // 11 위 코드는 num 값이 전역 변수를 통해 관리되고 있기 때문에 언제든지 누구나 num값에 직접 접근하여 ..

1. Closure 란? 자바스크립트를 학습하다보면 클로저(Closure)라는 개념에 대해 많이 들어보게 됩니다. 하지만, 클로저는 자바스크립트 고유의 개념이 아닙니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어들에서 사용되는 중요한 특성입니다. [1] MDN에서는 클로저에 대해 다음과 같이 정의합니다. [2] A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). 클로저는 함수와 함수가 선언된 렉시컬 환경의 조합이다. 즉, 클로저는 “함수가 선언된 렉시컬 환경”이 키워드가 되는 것입니다. [1] 💡 **..