클래스 인스턴스가 생성되는 과정클래스로 인스턴스가 어떻게 만들어지는지 그 라이프사이클을 한번 살펴보자.인스턴스 생성과 this 바인딩new SomeClass() 이렇게 호출하면, constructor 내부 코드가 실행되기 전에 암묵적으로 빈 객체가 만들어진다.이 빈 객체가 인스턴스다. (아직 완성되지는 않았지만)이때 이 객체의 프로토타입으로 클래스의 prototype이 가리키는 객체가 설정된다.그리고 this에도 바인딩된다.인스턴스 초기화constructor() 가 실행되면서 초기화 과정을 거친다.인스턴스 반환모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.이게 무슨소리냐. 아까 처음에 만들었던 객체가 반환된다는 소리다. 객체가 this에 바인딩되지 않았는가. 그러니까 thi..
최근 글
-
JS Deep Dive 25장. 클래스 (2)자바스크립트로의 깊은 잠수 2026.09.01 21:06
클래스 인스턴스가 생성되는 과정클래스로 인스턴스가 어떻게 만들어지는지 그 라이프사이클을 한번 살펴보자.인스턴스 생성과 this 바인딩new SomeClass() 이렇게 호출하면, constructor 내부 코드가 실행되기 전에 암묵적으로 빈 객체가 만들어진다.이 빈 객체가 인스턴스다. (아직 완성되지는 않았지만)이때 이 객체의 프로토타입으로 클래스의 prototype이 가리키는 객체가 설정된다.그리고 this에도 바인딩된다.인스턴스 초기화constructor() 가 실행되면서 초기화 과정을 거친다.인스턴스 반환모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.이게 무슨소리냐. 아까 처음에 만들었던 객체가 반환된다는 소리다. 객체가 this에 바인딩되지 않았는가. 그러니까 thi..
-
JS Deep Dive 25장. 클래스 (1)자바스크립트로의 깊은 잠수 2026.08.25 20:38
클래스가 뭐냐.클래스는 프로토타입 기반 패턴을 클래스 기반 객체지향처럼 사용할 수 있게 만드는 문법적 설탕이다.설탕이라는 것이 비록 단맛을 내기 위한 첨가물이기는 하지만... 어쨌든 설탕 자체도 질량이 있는 물질이지 않나.그래서 그런지 클래스가 지원하는 기능들을 보면 꽤 강력해 보인다.예를 들면new 연산자 없이 호출하면 에러 발생시키기extends와 super 키워드로 상속 지원호이스팅이 발생하지 않음클래스 내부 코드에는 strict mode 강제constructor, 메서드들이 모두 비열거형 (Enumerable === false)그래서 저자도 단순한 문법적 설탕이라기보다는 새로운 객체 생성 메커니즘으로 보는 것이 더 적합하다고 서술하고 있다.클래스 선언클래스 선언은 보통 아래와 같이 한다class ..
-
JS Deep Dive 24장. 클로저자바스크립트로의 깊은 잠수 2026.08.18 20:21
함수를 일급 객체로 취급하면 클로저가 필요해지는 것인가? 클로저 앞부분을 읽다보니 이런 의문이 먼저 생겼습니다.결론부터 말하자면. 일급 객체만으로 필요해지는 건 아니고. 렉시컬 스코프와 만났을 때 클로저가 필요해진다고 볼 수 있더라구요. 함수가 일급 객체라는 것은 함수를 값처럼 변수에 담고, 인수로 전달하고, 반환값으로 돌려받을 수 있다는 뜻입니다. 그러면 자연스럽게 함수가 정의된 곳과 호출되는 곳이 달라지는 상황이 생깁니다. 이때 스코프를 정의된 위치 기준으로 결정하겠다고 약속했다면(= 렉시컬 스코프), 함수는 자신이 어디서 호출되든 자신이 정의된 환경을 기억하고 있어야만 합니다. 그 기억 장치가 바로 클로저입니다.그래서 이 글은 렉시컬 스코프에서 출발해 실행 컨텍스트를 거쳐 클로저로 도착하는 순서로 ..
-
JS Deep Dive 23장. 실행 컨텍스트 (2)카테고리 없음 2026.07.28 20:17
저번 글에서 실행 컨텍스트와 렉시컬 환경이란 뭘까? 그 정의를 알아봤습니다.이번 글은 그것들이 어떻게 동작하는지를 이해하는 글입니다. 시간 순으로 전체 순서 훑어보기일단 어떤 코드가 있을 때 실행 컨텍스트와 렉시컬 환경이 생성되는 순서를 쭉 훑어봅시다.책에는 다음과 같은 예제가 나와 있습니다. var x = 1;const y = 2;function foo (a) { var x = 3; const y = 4; function bar (b) { const z = 5; console.log(a + b + x + y + z); } bar(10);}foo(20); // 42 왜 변수 이름을 x, y, z 따위로 지으면 안되는지를 명확하게 알 수 있는 코드입니다.얼른 읽히지를 않습니다. 제가..
-
JS Deep Dive 23장. 실행 컨텍스트 (1)자바스크립트로의 깊은 잠수 2026.07.21 20:32
실행 컨텍스트는 참 재밌는 녀석입니다.자바스크립트 코드에 우리가 수많은 변수와 함수를 정의해도 꼬이지 않고 빠른 성능을 유지할 수 있는 이유는 무엇일까요? 바로 요 실행 컨텍스트가 그걸 관리해주기 때문입니다. 한번 어떤 기특한 녀석인지 알아봅시다. 소스 코드 평가자바스크립트는 인터프리터 언어지만.. 마치 컴파일 언어처럼 먼저 소스 코드 평가라는 것을 합니다.ECMAScript 사양에 따르면 이 평가되는 소스 코드에는 4가지 타입이 있다고 합니다.타입에 따라 실행 컨텍스트를 생성하는 과정도 달라지고, 내부에서 관리되는 내용도 달라집니다.전역 코드함수 코드eval 코드모듈 코드 그럼 이 소스 코드 평가가 뭐냐.실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 변수, 함수 식별자를 실행 컨텍스..
-
JS Deep Dive 22장. this자바스크립트로의 깊은 잠수 2026.07.14 20:43
충격적인 코드를 하나 보면서 시작해 봅시다..const circle = { radius: 5, getDiameter() { return 2 * circle.radius; // 이 객체가 할당될 식별자 이름 circle을 미리 참조하고 있다! }};circle.getDiameter();이런 짓이 가능하다는 것에 적잖은 충격을 받았지만…아무튼 위와 같이 객체 리터럴로 인스턴스를 생성하면 같은 형태의 인스턴스들을 많이 뽑아내는 것이 어렵습니다.radius 프로퍼티와 getDiameter() 메서드를 가진 인스턴스를 여러 개 만드려면 매번 똑같은 객체를 다시 적어줘야 하기 때문에 코드 중복이 너무 많겠죠.그래서 본래 목적대로 효율적인 재사용을 하기 위해서는 생성자 함수 또는 (추후 배울) class를..
-
JS Deep Dive 20장. strict mode자바스크립트로의 깊은 잠수 2026.07.07 19:47
자바스크립트에는 strict mode라는 기능이 있습니다.앞선 장에서 살펴봤듯이, 자바스크립트는 높은 자유도를 가진 언어입니다. 최대한 에러를 발생시키지 않는 쪽으로 설계되어 있죠.하지만 에러가 발생하지 않으면 문제가 생겼을 때 원인을 찾기가 정말 어려워집니다. 어디가 잘못되었는지 콘솔에 안 찍히기 때문이에요.그래서 에러를 일부러 발생시키는, 좀 더 엄격한 모드인 strict mode가 ES5부터 추가되었어요. strict mode 사용법전역의 맨 첫줄 또는 함수 몸체의 맨 첫줄에 'use strict'; 를 추가하면 됩니다. strict mode가 발생시켜주는 에러암묵적 전역 방지선언하지 않은 변수를 참조했을 때 ReferenceError를 발생시킵니다.원래는 선언 없이 x = 1; 같은 짓을 했을때 ..
-
JS Deep Dive 18장. 함수와 일급 객체자바스크립트로의 깊은 잠수 2026.06.16 20:19
개념 알아보기아래 조건을 만족하는 객체를 일급 객체라고 합니다. - 무명의 리터럴로 생성할 수 있다. 즉 런타임 생성이 가능하다.- 변수 또는 자료구조(객체, 배열)에 저장할 수 있다.- 함수의 매개변수에 전달할 수 있다.- 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 위 조건들을 모두 만족하므로 일급 객체입니다. 함수는 일급 객체이므로, 함수는 객체처럼 쓸 수 있습니다.또 객체는 값이므로 함수는 값처럼 쓸 수 있습니다.따라서 함수는 값이 들어갈 수 있는 자리에 다 들어갈 수 있어요.(변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문 등) 함수가 일급 객체면 뭐가 좋냐, 바로 함수형 프로그래밍이 가능하다는 것입니다.아래와 같은 짓을 할 수 있어요. functi..