전체 글
-
15장 let, const 키워드와 블록 레벨 스코프 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 12. 11:44
var 키워드로 선언한 변수의 문제점 ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y; console.log(x); // 100 console.log(y); // 1 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var 키워드..
-
14장 전역 변수의 문제점 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 10. 18:55
변수의 생명 주기 지역 변수의 생명 주기 var x = 'global'; function foo() { console.log(x); // undefined var x= 'local'; } foo(); console.log(x); // global 위 예제의 foo 함수를 호출하면 함수 몸체의 다른 문들이 순차적으로 실행되기 이전에 x 변수의 선언문이 자바스크립트 엔진에 의해 가장 먼저 실행되어 x 변수가 선언되고 undefined로 초기화된다. 그 후, 함수 몸체를 구성하는 문들이 순차적으로 실행되기 시작하고 변수 할당문이 실행되면 x 변수에 값이 할당된다. 그리고 함수가 종료되면 x 변수도 소멸되어 생명 주기가 종료된다. 즉, 지역 변수의 생명 주기는 함수의 생명주기와 일치한다. 이처럼 호이스팅은 스코..
-
13장 스코프 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 8. 17:58
스코프란? 모든 식별자 (변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정된다. 이를 스코프라고 한다. 우리는 컴퓨터를 사용할 때 하나의 파일 이름만 사용하지 않는다. 식별자인 파일 이름을 중복해서 사용할 수 있는 이유는 폴더(디렉터리)라는 개념이 있기 때문이다. 만약 폴더가 없다면 파일 이름은 유일해야 한다. 이와 마찬가지로 프로그래밍 언어에서는 스코프(유효 범위)를 통해 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 한다. 스코프 내에서는 식별자는 유일해야 하지만 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다. 스코프의 종류 구분 설명 스코프 변수 전역 코드의 가장 바깥 영역 전역 스코프..
-
12장 함수 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 6. 13:46
함수 리터럴 자바스크립트의 함수는 객체 타입의 값이다. 따라서 숫자 값을 숫자 리터럴로 생성하고 객체를 객체 리터럴로 생성하는 것처럼 함수도 함수 리터럴로 생성할 수 있다. 함수는 객체다. // 변수에 함수 리터럴을 할당 var f = function add (x, y) { return x + y; } 함수 리터럴의 구성 요소는 다음과 같다. 구성 요소 설명 함수 이름 - 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자다. - 함수 이름은 생략할 수 있다. 이름이 있는 함수를 기명 함수, 이름이 없는 함수를 무명/익명 함수라 한다. 매개변수 목록 - 각 매개변수에는 함수를 호출할 때 지정한 인수가 순서대로 할당된다. 즉, 매개변수 목록은 순서에 의미가 있다. - 매개변수는 함수 몸체 내에서 변수와..
-
11장 원시 값과 객체의 비교 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 4. 14:30
자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, 심벌, 객체 타입)은 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분할 수 있다. 원시 타입과 객체 타입은 크게 세 가지 측면에서 다르다. - 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이다. 이에 비해 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값(mutable value)이다. - 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다. - 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값..
-
10장 객체 리터럴 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 2. 19:36
객체란? 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 객체다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복잡한 자료구조다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이지만 객체 타입의 값, 즉 객체는 변경 가능한 값(mutable value)이다. var counter = { num: 0,// 프로퍼티 increase: function () { // 메서드 this.num++; } }; 객체는 0개이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 객..
-
09장 타입 변환과 단축 평가 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 10. 31. 16:48
타입 변환이란? 자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다. var x = 10; // 명시적 타입 변환 // 숫자를 문자열로 타입 캐스팅한다. var str = x.toString(); console.log(typeof str, str); // string 10 // x 변수의 값이 변경된 것은 아니다. console.log(typeof x, x); // number 10 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되기도 한다. 이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다. va..
-
08장 제어문 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 10. 29. 20:20
제어문 제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행된다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 블록문 블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문은 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다. 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다는 것에 주의한다. // 블록문 { var foo = 10; } // 제어문 var x = 1; if (x < 10) { x++..