주의: 뒷 부분의 이미지가 굉장히 작을 수 있으므로 확대해서 보시길 바랍니다. (힝구... 다음부터는 신경써야겠습니다) 실행 컨텍스트 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 1. 소스코드 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 전역 코드 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지..
this 1. this 키워드 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드로 구성된다.( 이 둘을 합쳐서 간단하게 프로퍼티라고도 한다.) 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경해야할 때가 있다. 이 때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 1.1 객체리터럴 방식으로 생성한 객체 const circle = { radius : 5, getDiameter(){ return 2 * circle.radius } } console.log(circle.getDiameter()) // 10 다음과 같이 circle 객체를 객체리터럴 방식으로 생성하고 getDiameter 메서드를 호출하면 정확한 답이 ..
프로토타입 4편 1. 직접 상속 Object.create에 의한 직접 상속이 가능하다. Object.create 메서드는 명시적으로 프로토타입을 지정하여 새로운 객체를 생성한다. Object.create메서드도 다른 객체 생성 방식과 마찬가지로 추상 연산 OrdinaryObjectCreate를 호출한다. Object.create메서드의 첫 번째 매개변수에는 생성할 객체의 프로토타입으로 지정할 객체를 전달한다. 두 번째 매개변수에는 생성할 객체의 프로퍼티 키와 프로퍼티 디스크립터 객체로 이루어진 객체르 전달한다. 이 객체 형식은 Object.defineProperties 메서드의 두번째 인수와 동일하다. 두번째 인수는 옵션이므로 생략이 가능하다. //프로토타입이 null인 객체를 생성, 즉, 생성된 객체는..
프로토타입 3편 1. 프로토타입 체인 function Person(name){ this.name = name } Person.prototype.hello = function(){ console.log(`my name is ${this.name}`) } const me = new Person('lee') console.log(me.hasOwnProperty('name')) // true console.log(Person.prototype.hasOwnProperty('name')) // false 지난 번의 예제이다. 어떻게 me와 Person.prototype은 hasOwnProperty 프로퍼티를 가지고 있을까?? 이는 프로토타입 체인 덕분이다. Object.g..
프로토타입 2편 1. 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입 이전 포스팅에서 살펴본 것과 같이, 생성자 함수에 의해 생성된 인스턴스는 프로토타입의 constructor 프로퍼티에 의해 생성자 함수와 연결된다. 이때, constructor 프로퍼티가 가리키는 생성자 함수는 인스턴스를 생성한 생성자 함수와 같다. const obj = new Object() console.log(obj.constructor === Object) // true const add = new Function('a' , 'b', 'return a + b') console.log(add.constructor === Function) // true function Pers..
프로토타입 1편 js에서 중요한 요소 중 하나이지만, 모르는 사람이 생각보다 많다. 가끔씩 회사 문제로 기본적인 js 문법이 나오는데, 그 중에 가장 많이 나오는 것이 prototype이다. 왜냐면 모르면 그냥 맞아야 하기 때문이다. 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. 자바와 c++과는 달리 js는 클래스 기반의 객체지향 프로그래밍이 아닌, 프로토타입 기반의 객체지향 프로그래밍 언어이다. 참고로, ES6에서 클래스가 도입되었다. 하지만 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새로운 객체지향 모델을 제공하는 것은 아니다. 사실 클래스도 함수이며, 기존 프로토타입 기반 패턴의 syntatuc sugar이..
함수와 일급 객체 1. 일급 객체 다음의 조건을 만족하는 객체를 일급 객체라고 한다. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성 가능 변수나 자료구조 (객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 다음 예제와 같이 위의 조건을 모두 만족하므로 일급객체이다. //1. 함수는 무명의 리터럴로 생성할 수 있다. //2. 함수는 변수에 저장할 수 있다. const increase = function(num){ return ++num } const decrease = function(num){ return --num } // 2. 함수는 객체에 저장할 수 있다. const predicates = {increase, d..
생성자 함수에 의한 객체 생성 일반적으로 객체 리터럴 방식으로 객체를 많이 생성하지만, 생성자 함수를 통해서도 객체를 생성할 수 있다. 1. Object 생성자 함수 new 연산자와 함꼐 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. const person = new Object() person.name = "lee" person.hello = function(){ console.log("hello world") } console.log(person) // { name: 'lee', hello: [Function (anonymous)] } person.hello() // hello world..