dev-note

전역 네임스페이스 (Global Namespace)의 오염 문제를 코드 리뷰를 하다 알게 되었다. 특히 여러 스크립트가 한 소스 안에 있는 코드에서는 전역 변수 네임이 겹칠 우려가 있고 이는 소스의 신뢰성이 낮아진다는 단점으로 연결된다. 네임 스페이스 패턴? 전역 유효 범위가 많은 변수, 객체, 함수 등으로 코드가 어지러워지지 않도록 전역 객체 하나만 만들고, 모든 기능을 이 객체 안에 추가하는 패턴을 네임스페이스 패턴이라고 한다. 네임스페이스 패턴을 적용하지 않은 상태) // variable var variable = 0; // object var obj = {}; // function function a(){}; 네임스페이스 패턴을 적용한 상태) var APP = {}; // variable APP...

모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리를 읽고 정리한 내용입니다. 18.1 일급 객체 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 18.2 함수 객체의 프로퍼티 Object.getOwnPropertyDescriptor(square, '__proto__'); // undefined Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'); // undefined arguments 객체는 배열 형태로 인자 정보를 담고 있지만 실제 배열이 아닌 유사 배열 객체다. 유사 배열 객체란 length ..

모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리를 읽고 정리한 내용입니다. 17.1 생성자 함수에 의한 객체 생성 생성자 함수는 new 연산자와 함께 호출하여 객체 (인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라 한다. 17.2.3 생성자 함수의 인스턴스 생성 과정 인스턴스를 생성하고 생성된 인스턴스를 초기화 (인스턴스 프로퍼티 추가 및 초기값 할당)하는 것이다. 바인딩이란 식별자와 값을 연결하는 과정을 의미한다. 변수 이름(식별자)와 확보된 메모리 공간의 주소를 바인딩하는것이다. this가 가리킬 객체를 바인딩하는 것도 바인딩의 예이다. 17.2.4 내부 메서드 [[Call]]과 [[Construct]] function foo() { //일반..

모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리를 읽고 정리한 내용입니다. 16.1 내부 슬롯과 내부 메서드 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. o.__proto__ // Object.prototype 16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. Object.getOwnPropertyDiscripter(person, 'name'); 16.3 데이터 프로퍼티와 접근자 프로퍼티 데이터 프로퍼티는 키와 값으로 구성된 프로퍼티다. 지금까지 살펴본 모든 프로퍼티는 데이터 프로퍼티다. 접근자 프로퍼티는 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 ..

모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리를 읽고 정리한 내용입니다. 13.1 스코프란? 모든 식별자(변수이름, 함수이름, 클래스이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정된다. 이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다. 식별자 결정: 어떤 변수를 참조해야 할 것인지 결정하는 것이다. 식별자를 검색할 때 사용하는 규칙이다. 13.2 스코프의 종류 전역변수는 함수 내부에서도 참조할 수 있다. 지역변수는 자신의 지역 스코프와 하위 지역스코프에서 유효하다. 13.3 스코프 체인 스코프 체인은 스코프가 계층적으로 연결된 것이다. 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프로..

모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리를 읽고 정리한 내용입니다. 12.1 함수란? 함수 호출이란 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시하는 것이다. 12.4 함수 정의 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다. 함수는 값처럼 변수에 할당할 수도 있고 프로퍼티의 값이 될수도 있으며 배열의 요소가 될 수도 있다. 이처럼 값의 성질을 갖는 객체를 일급 객체라고 한다. 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점은 다르다. 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 특징을 함수 호이스팅이라고 한다. 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아..

모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리를 읽고 정리한 내용입니다. 10.1 객체란? 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조이다. 원시값은 변경 불가능한 값이지만, 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 프로퍼티는 객체의 상태를 나타내는 값이다. 메서드는 프로퍼티가 참조 및 조작할 수 있는 동작이다. 10.2 객체 리터럴에 의한 객체 생성 인스턴스란 클래스에 의해 생성되어 메모리에 저장된 실체를 말한다. 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다. 10.5 프로퍼티 접근 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로..

모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리를 읽고 정리한 내용입니다. 7.1 산술 연산자 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이항 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다. 단항 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다. 7.3 비교 연산자 ==: 동등 비교는 타입을 일치시킨 후 같은 값인지 비교한다 ===: 일치 비교는 타입도 같고 값도 같은 경우에 한하여 true를 반환한다. (Object.is 메서드) !=: 부동등 비교 !==: 불일치 비교 7.4 삼항 조건 연산자 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if ... else문..

모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리를 읽고 정리한 내용입니다. 5.1 값 값은 식이 평가되어 생성된 결과를 말한다. 5.2 리터럴 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다. 5.3 표현식 값으로 평가될 수 잇는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. 5.4 문 문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다. 토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다. 5.5 세미콜론과 세미콜론 자동 삽입 기능 코드 블록 뒤에는 세미콜론을 붙이지 않는다. 이러한 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문이다. 5..

모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리를 읽고 정리한 내용입니다. 4.1 변수란 무엇인가? 왜 필요한가? 자바스크립트 엔진이 위 코드 (10+20)를 계산하려면 먼저 리터럴(데이터 그 자체)과 연산자의 의미를 알고 있어야 하며 10+20이라는 표현식의 의미도 파싱할 수 있어야 한다. 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장한 값을 읽어 들여 재사용하기 위해서 변수라는 메커니즘(기작)을 제공한다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 값의 위치를 가리키는 상징적인 이름이다. 변수에 값을 저장하는 것을 할당(대입, 저장)이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조..