누가봐도 인생 1회차의 기록장

개발공부/JavaScript 책 45

모던 자바스크립트 Deep Dive #16 (함수와 일급 객체)

일급 객체 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환 값으로 사용할 수 있다. 함수는 위의 조건을 모두 만족하므로 일급 객체다. 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미다. 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다. 따라서 함수는 값을 사용할 수 있는 곳(변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문)이라면 어디서든지 리터럴로 정의할 수 있으며 런타임runtime에 함수 객체로 평가된다. 함수는 객체이지만 일반 객체와 차이가 있는데, 일반 객체는 호출할 수 없지만 함수 객체는 호출 할 수 있다. 또한 ..

모던 자바스크립트 Deep Dive #15 (생성자 함수에 의한 객체 생성)

Object 생성자 함수 new 연산자와 함께 object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'Lee'; person.sayHello = function () { console.log('Hi! My name is ' + this.name); } console.log(person); // {name: "Lee", sayHello: f} person.sayHello(); // Hi! My name is Lee 생성자 함수constructor란 new 연산자와 함께 호출하여 객체(인스턴스)를 생..

모던 자바스크립트 Deep Dive #14 (프로퍼티 어트리뷰트)

내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. 즉, 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티의 상태란 프로퍼티의 값value, 값의 갱신 가능..

모던 자바스크립트 Deep Dive #13 (let, const 키워드와 블록레벨 스코프)

var 키워드로 선언한 변수의 문제점 변수 중복 선언 허용 var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. (에러 발생하지 않음) var y; console.log(x); // 100 console.log(y); // 1 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다. var x = 1; if (true) { //..

모던 자바스크립트 Deep Dive #12 (전역 변수의 문제점)

변수의 생명주기 지역 변수의 생명 주기 변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 언젠가 소멸한다. 즉, 변수는 생성되고 소멸되는 생명 주기life cycle가 있다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다. function foo() { // 변수 x 생성 → undefined 로 초기화 var x = 'local'; // 변수 x에 값 할당 console.log(x); return x; // 변수 x 소멸 } foo(); console.log(x); // ReferenceError: x is not defined 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역변수의 생명 주기는 애플리케이션의 생명 주기와..

모던 자바스크립트 Deep Dive #11 (스코프)

스코프란? 모든 식별자 (변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정되는데, 이를 식별자가 유효한 범위 즉, 스코프scope(유효범위)라 한다. 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정하는데, 이를 식별자 결정identifier resolution이라 한다. 따라서 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다. 코드의 문맥과 환경 "코드가 어디서 실행되며 주변에 어떤 코드가 있는지"를 렉시컬 환경lexical enviroment이라고 부른다. 즉, 코드의 문맥context은 렉시컬 환경으로 이뤄진다. 이를 구현한 것이 "실행 컨텍스트exucution c..

모던 자바스크립트 Deep Dive #10 -2(함수)

함수 호출 함수는 함수를 가리키는 식별자와 한 쌍의 소괄호인 함수 호출 연산자로 호출한다. 함수 호출 연산자 내에는 0개 이상의 인수를 쉼표로 구분해서 나열한다. 함수를 호출하면 현재의 실행 흐름을 중단하고 호출된 함수로 실행 흐름을 옮긴다. 이때 매개변수에 인수가 순서대로 할당되고 함수 몸체의 문들이 실행되기 시작한다. 매개변수와 인수 함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수parameter(인자)를 통해 인수(argument)를 전달한다. 인수는 값으로 평가될 수 있는 표현식이어야 한다. 인수는 함수를 호출할 때 지정하며, 개수와 타입에 제한이 없다. 매개변수는 함수를 정의할 때 선언하며, 함수 몸체 내부에서 변수와 동일하게 취급된다. 즉, 함수..

모던 자바스크립트 Deep Dive #10 -1(함수)

함수란? 함수는 자바스크립트에서 가장 중요한 핵심 개념으로 또 다른 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다. 프로그래밍 언어의 함수는 수학의 함수와 같은 개념으로 일련의 과정을 문statement으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 입력을 받아서 출력을 내보내는데 이때 함수로 입력을 전달받는 변수를 매개변수parameter, 입력을 인수argument, 출력을 반환값return value이라 한다. 함수는 함수 정의function definition을 통해 생성한다. 함수 정의만으로 함수가 실행되는 것은 아니며, 수학의 함수처럼 미리 정의된 일련의 과정을 실..

모던 자바스크립트 Deep Dive #09 (원시 값과 객체의 비교 )

자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, 심벌, 객체타입)은 크게 원시 타입promitive type과 객체 타입object/reference type으로 구분할 수 있다. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값immutable value이다. 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값mutable value이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달pass by value라 한다. 객체를 가리키는 변수를 다른 ..

모던 자바스크립트 Deep Dive #08 (객체 리터럴)

객체란? 자바스크립트는 객체object 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체. 원시 타입은 단 하나의 값만 나타내지만 객체 타입object/referenece type은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조data structure다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값 immutable value이지만 객체 타입의 값, 즉 객체는 변경 가능한 값mutable value이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키key와 값value으로 구성된다. // 키 : 값 = 프로퍼티 var person = ..