저번 글에서 실행 컨텍스트와 렉시컬 환경이란 뭘까? 그 정의를 알아봤습니다.이번 글은 그것들이 어떻게 동작하는지를 이해하는 글입니다. 시간 순으로 전체 순서 훑어보기일단 어떤 코드가 있을 때 실행 컨텍스트와 렉시컬 환경이 생성되는 순서를 쭉 훑어봅시다.책에는 다음과 같은 예제가 나와 있습니다. 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장. 실행 컨텍스트 (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..
-
자바스크립트의 함수를 잘못 사용하는 방법자바스크립트로의 깊은 잠수 2026.06.09 20:34
자바스크립트의 모든 함수는 호출할 수 있습니다.당연한 얘기죠.함수는 호출하라고 있는 것 아닌가요? 그런데 호출하면 안되는 함수도 존재합니다.이게 무슨 소릴까요? 생성자 함수자바스크립트에는 생성자 함수라는 개념이 있습니다. function Dog(name) { this.name = name; this.bark = function() { console.log(name + "(이)가 짖었습니다! 월월"); }} 위의 함수는 생성자 함수로 사용할 수 있습니다.이런 함수를 쓰는 표준적인 방법은 new 키워드를 사용해서 인스턴스를 생성하는 것입니다.아래 코드처럼 말입니다. function Dog(name) { this.name = name; this.bark = function() { con..
-
프로퍼티 어트리뷰트가 뭔가요?자바스크립트로의 깊은 잠수 2026.06.02 20:35
자바스크립트에는 프로퍼티 어트리뷰트(Property Attribute)라는 것이 있습니다.이걸 그냥 보면 이해하기 어렵습니다.객체지향 프로그래밍을 먼저 이해해야 프로퍼티 어트리뷰트가 왜 존재하는 것인지, 어떤 역할을 하는건지 감을 잡을 수 있어요. 객체지향 프로그래밍OOP(Object Oriented Programming)라고도 불리는 객체지향 프로그래밍은 소프트웨어 개발 방식의 하나입니다.모든 것을 객체로 보고, 그 객체들이 서로 협력하며 프로그램을 이루어냅니다. 객체지향이 뭐가 좋냐, 하면현실 세계의 개념을 그대로 코드로 가져오기가 쉽습니다. 쇼핑몰 웹사이트를 만들어야 한다고 생각해볼까요?현실 세계의 경우를 먼저 생각해봅시다.소비자가 쇼핑몰에 가서 마음에 드는 상품을 카트에 담고 카운터로 가서 계산하..
-
const를 써라. let을 써야 할 것 같다고? 그럼 다시 한 번 생각해보고 const를 써라.자바스크립트로의 깊은 잠수 2026.05.26 20:32
자바스크립트에서 변수를 선언하기 위해 사용하는 키워드는 세 가지가 있습니다.var, const, let 요렇게 세 가지죠.모던 자바스크립트 Deep Dive 의 책 내용에도 그렇고, 우리 주변 개발자들의 얘기를 들어봐도 var는 이제 쓰지 말라고 합니다.그리고 let 보다는 가능하면 const를 쓰라고 합니다.왜 그런걸까요? var는 쓰지 마라var는 구식 문법입니다. ES6 이전의 버전에서는 변수를 선언하는 방법이 var 밖에 없었기 때문에 var를 썼지만, 이제는 완벽한 상위 호환인 const, let이 있기 때문에 var 를 사용할 이유가 없습니다.var가 발생시킬 수 있는 문제점들엔 어떤 것들이 있을까요? 우선 var는 변수를 중복으로 선언해도 에러가 발생하지 않습니다.아래와 같은 상황이 발생할 ..