Javascript
-
[코어 자바스크립트] 프로토타입Javascript 2024. 4. 7. 18:28
프로토타입 개념 이해1. constructor, prototype, instance저자 정재남선생님께서, 프로토타입을 다음 그림과 같이 하나의 도식으로 추상화를 하였는데, 이 단순한 추상화는 프로토타입의 개념을 압축한다. 아래의 코드 내용을 다음과 같이 도식화한 내용이다.var instance = new Constructor();왼쪽 꼭지점에는 Constructor(생성자 함수)를, 오른쪽 꼭짓점에는 Constructor.prototype이라는 프로퍼티를 위치시켰다. 왼쪽 꼭짓점으로부터 아래를 향한 화살표 중간에 new가 있고, 화살표의 종점에는 instance가 있다. 오른쪽 꼭짓점으로부터 대각선 아래로 향하는 화살표의 종점에는 instance.__proto__이라는 프로퍼티를 위치시켰다. 자 흐름을 ..
-
[코어 자바스크립트] 클로저Javascript 2024. 3. 2. 15:15
클로저?클로저를 설명하는 단어는 여럿 있지만, 저자는 클로저를 다음과 같은 정의로 설명한다.클로저란 어떤 함수에서 선언한 변수를 참조하는 내부함수를 외부함수로 전달할 경우, 함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상이다.내부함수를 외부로 전달하는 방법에는 함수를 return하는 경우뿐 아니라 콜백으로 전달하는 경우도 포함된다. 이런 정의로, 정확하게 이해되지 않는다. 예시를 보자.예제 1.var outer = function () { var a = 1; var inner = function () { console.log(++a); } inner();}outer(); // 2outer(); // 2inner 함수 내부에서는 a를 선언하지 않았기 때문에..
-
[코어 자바스크립트] thisJavascript 2024. 2. 22. 22:51
대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미한다. 따라서, 혼란의 여지가 없거나 많지 않은데 자바스크립트 에서는 this는 어디서든 사용할 수 있다. 또한 상황에 따라 this가 바라보는 대상이 달라지는데 어떤 이유로 그렇게 되는지를 파악하기 힘든 경우도 있고 예상과 다르게 엉뚱한 대상을 바라보는 경우도 있다. 함수와 객체(메서드)의 구분이 느슨한 자바스크립트에서 this는 실질적으로 이 둘을 구분하는 거의 유일한 기능이다. 상황에 따라 달라지는 this 자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 즉, this는 함수를 호출할 때 결정된다는 말이다. 전역 공간에서의 this 전역 공간에서의 this는 전역 객체를 바라본다. 개념상 전역 ..
-
[코어 자바스크립트] 실행 컨텍스트Javascript 2024. 2. 22. 21:30
실행 컨텍스트 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 실행 컨텍스트 객체는 활성화 되는 시점에 VariableEnvironment, LexicalEnvironment, ThisBinding의 세 가지 정보를 수집한다. 동일한 환경에 있는 코드들을 실행할 떄 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아 올렸다가 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 처음 자바스크립트를 실행하는 순간, 전역 컨텍스트가 콜 스택에 담긴다. 전역 컨텍스트라는 개념은 일반적인 실행 컨텍스트와 특별히 다를 것이 없으나 자바스크립트 파일이 열리는 순간 전역 컨텍스트가 자동으로 활성화된다. 이후, A 함수를 “호출”하게 되면 자바스..
-
[코어 자바스크립트] 데이터 타입Javascript 2024. 2. 18. 22:08
데이터 타입의 종류 기본형(원시형, Primitive Type) 숫자, 문자열, 불리언, null, undefined 참조형(Reference Type) 객체, 배열, 함수, 날짜, 정규표현식과 ES6에서 추가된 Map, Set 등이 객체의 하위 분류에 속한다. 그렇다면 어떤 기준으로 기본형과 참조형을 구분하는 걸까? 기본형은 값이 담긴 주솟값을 바로 복제하는 반면, 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다. 기본적으로 이를 기본형은 불변값이고 참조형은 가변값이라고 표현한다. 변수 선언과 데이터 할당 // 1번 var a; a = 'abc'; // 2번 var a = 'abc'; 위 예시에서, 1번은 변수 a를 선언하고 다음 줄에 a에 'abc'라는 값을 할당했다. 2번은..
-
프로토타입 체이닝Javascript 2023. 6. 26. 22:33
프로토타입의 두 가지 의미 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원한다. 자바스크립트가 어떻게 OOP 기능을 제공할까? 이에 앞서 자바스크립트 OOP 상속에 근간이 되는 프로토타입과 프로토타입 체이닝의 기본 개념을 설명한다. 자바스크립트는 자바와 같은 객체지향 프로그래밍에서처럼 "클래스" 개념이 없다. 대신에 객체 리터럴 또는 생성자 함수로 객체를 생성한다. 이렇게 생성된 객체의 부모 객체가 바로 "프로토타입" 객체다. 즉, 상속 개념과 마찬가지로 자식 객체는 부모 객체가 가진 프로퍼티 접근이나 메서드를 상속받아 호출하는 것이 가능하다. 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있다. ECMAScript에서는 이러한 링크를 ..
-
참조 타입과 비교 그리고 함수 호출방식 이해하기Javascript 2023. 6. 26. 21:22
참조 타입의 특성 자바스크립트에서는 기본 타입인 숫자, 문자열, boolean, null, undefined 5가지를 제외한 모든 값은 객체이다. 이러한 객체는 자바스크립트에서 참조 타입이라고 부른다. 이것은 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문이다. const objA = { val : 40 } const objB = objA objA 객체를 객체 리터럴 방식으로 생성했다. 여기서 매우 중요한 개념, objA 변수는 객체 자체를 저장하고 있는 것이 아니라 생성된 객체를 가리키는 참조값을 저장하는 것이다. 또한, 변수 objB에 objA 값을 할당한다. objA는 생성된 객체를 가리키는 참조값을 가지고 있으므로 변수 objB에도 이같은 객체의 참조값이 저장된다. 객체 비교 일치 연..
-
[Javascript] 호이스팅 이해하기Javascript 2023. 3. 19. 00:14
1. 호이스팅(Hoisting) 제대로 이해하기 호이스팅 ? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다.반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. - MDN 공식 문서 그렇다. 호이스팅을 흔히, 코드를 최상단으로 끌어올린다고 하지만 작동 방식을 비유법으로 표현한 것으로 실제로 코드를 최상단으로 끌어올려지지 않는다. 호이스팅을 제대로 이해하려면 '환경 레코드(Environment Record)'를 알아야한다. 환경 레코드에 변수가 어떻게 저장되는지만 봐도 호이스팅의 동작 원리를 이해할 수 있다. 환경 레코드는 프로그램을 평가하는 시점에 선언되..