본문 바로가기

책과 강연/모던 자바스크립트 DeepDive

 (19)
모던 자바스크립트 Deep Dive 18장 : 함수와 일급 객체 아래 조건을 만족하는 객체를 일급 객체라 한다. 1. 무명의 리터럴 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 2. 변수나 자료구조에 저장이 가능하다. 3. 함수의 매개변수에 전달할 수 있다. 4. 함수의 반환값으로 사용할 수 있다. 자바스크립트 함수는 이전 장에서 살펴본 것처럼 이 조건을 모두 만족하므로 일급 객체이다. 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용 가능하다는 것이다. 그래서, 함수는 값을 사용할 수 있는 곳 어디서든 리터럴로 정의할 수 있으며, 런타임에 함수 객체로 평가된다. 또한, 일급 객체로서 함수가 가지는 가장 큰 특징은 매개변수와 반환값으로 사용이 가능하다는 점이다. 이는 함수형 프로그래밍을 가능케 하는 자바스크립트의 장점 중 하나이다. 함수 객체의 프로퍼티 단..
모던 자바스크립트 Deep Dive 17장 : 생성자 함수에 의한 객체 생성 const person = new Object(); 생성자 함수(construnctor)란 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스(instance)라 한다. 일반적으로, 객체 리터럴 보다 훨씬 불편하지만 비슷한 객체를 여러 개 만들 때는 굉장히 편하다. 단, new 연산자 없이 사용할 경우 생성자 함수가 아닌 일반 함수 호출로 작동하니 유의하자. 생성자 함수의 인스턴스 생성 과정 크게 두 가지로 나눌 수 있다. 인스터스의 생성과 초기화(초기값 할당)이다. function Circle(radius) { this.radius = radius this.getDiameter = function () { return 2 * this.radius; ..
모던 자바스크립트 Deep Dive 16장 : 프로퍼티 어트리뷰트 내부 슬롯과 내부 메서드 이 장을 설명하기 앞서, 내부 슬롯(internal slot)과 내부 메서드(internal method)의 개념을 알아보자. 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 EMCAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드이다. [[...]] 처럼 이중 대괄호로 감싸인 이름들이다. 하지만, 내부 슬롯과 내부 메서드는 개발자들이 외부에서 직접 접근할 수 없다. (단, 일부는 간접적으로 접근할 수 있는 수단을 제공한다. const o = {} // 간접 접근 가능 console.log(o.__proto__) //[Object: null prototype] {} // 직접 접근 불가 console.log(o.[[Prototype]]) //..
모던 자바스크립트 Deep Dive 15장 let, const 키워드와 블록레벨 스코프 ES5까지는 var로만 변수를 선언 가능했다. 하지만 이는 독특한 특징이 있어서 문제가 발생하기 쉬웠다. - 변수 중복 선언 가능으로 인한 의도치 않는 값 변경 - 함수 외 모든 var 변수는 전역 변수로 취급되는 점 (함수 레벨 스코프와 전역 객체에 속함으로 인해 발생하는 문제) - 변수 호이스팅에 의해서 undefined가 반환될 수 있는 점 그래서 ES6부터는 let과 const가 도입되었다. let - 변수 중복 선언 금지 (syntax error 발생) - 블록 레벨 스코프 지원 - 호이스팅이 안되는 것 처럼 처리 일시적 사각지대(Temporal Dead Zone)을 통해 에러 방지 위 두 줄은 이전 문서에서 알아봤지만 마지막 줄은 다시 알아보자. console.log(foo); // undef..
모던 자바스크립트 Deep Dive 14장 : 전역변수의 문제점 전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용할 이유가 없다면 지역 변수를 사용해야 한다. 변수의 생명주기 변수는 생성되고 소멸되는 생명 주기가 있다. 변수에 생명 주기가 없다면, 한 번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유한다. 변수는 자신이 선언된 위치에서 생성 및 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 그리고 지역 변수의 생명 주기는 함수의 생명주기와 일치한다. 위 문장을 더 자세히 설명하면, 이전에 자바스크립트 엔진에 의해서 변수는 실행 전에 가장 먼저 선언한다 설명한 적이 있다. 이 부분은 전역 변수에 한정된 것이다. 함수가 호출되면, 그 때 함수 내부에 변수가 선언 된 후 다시 함수 몸체의 문이 한 줄씩 실행된다...
모던 자바스크립트 Deep Dive 13장 : 스코프 스코프(scope, 유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 스코프는 함수와 변수에 연관이 깊어서 매우 중요한 개념이니 잘 이해해야한다. 타 언어와 다른 자바스크립트 스코프만의 특징이 존재함으로 이 부분도 주의 깊게 살펴봐야한다. 스코프 스코프는 식별자가 유효한 범위를 말한다. 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위(스코프)가 정해진다. 대표적인 예시로, 함수의 매개변수가 있다. 매개변수는 함수 몸체 내부로 범위가 한정되며 외부에서는 사용할 수 없다. var x = 'global' function foo() { var x = 'local'; console.log(x); // 1. local } foo(); ..
모던 자바스크립트 Deep Dive 12장 : 함수 함수란? 함수는 자바스크립트의 핵심 개념이다. 또 다른 자바스크립트의 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다. 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감써서 하나의 실행 단위로 정의한 것이다. 매개변수, 인수, 반환값 등이 있으며 식별자인 함수 이름을 사용할 수 도 있다. 인수를 통해서 함수에 매개변수를 전달하고, 함수의 실행을 지시하는 것을 함수의 호출이라 한다. function 함수이름 (매개변수1, 매개변수2, ...) { return 반환값 } // 함수정의 함수이름(인수1, 인수2) // 함수호출 // 예시 function add (x,y) { return x+ y } ..
모던 자바스크립트 Deep Dive 11장 : 원시 값과 객체의 비교 원시 타입과 객체 타입은 크게 세 가지 측면이 다르다. 1. 원시 타입은 변경 불가능하지만, 객체 타입은 변경 가능한 값이다. 2. 원시 값을 변수에 할당하면 메모리에 실제 값이 저장되나, 객체를 변수에 할당하면 메모리에는 참조 값이 저장된다. 3. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달(pass by value)라 한다. 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달(pass by reference)라 한다. 이에 대해 더 자세하게 알아보자. 원시 값 불변성 원시 값은 변경불가능한 값이다. 재할당은 가능하지만, 변하지 않는다. 변경이 불가능하기에 재할당 시에도 메모리 공간에서 값이..

티스토리툴바