leesche blog

자바스크립트의 근본, 프로토타입... 바~rrㄹ로 시작! 프로토타입의 개념 이해 constructor, prototype, instance var instance = new Constructor(); 어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면 Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(instance)가 생성됩니다. 이때 instance에는 __proto__ 라는 프로퍼티가 자동으로 부여됩니다. 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조합니다. prototype 객체 내부에는 인스턴스가 사용할 메서드를 저장합니다. 그러면 인스턴스에서도 숨겨진 프로퍼티인 __proto__ 를 통해 이 메서드들에 접근할 수 있게 됩니다. ..

클로저, 글로 적어 보자 클로저의 의미 및 원리 이해 예제로 시작해봅시다. var outer = function () { var a = 1; var inner = function () { return ++a; }; return inner; }; var outer2 = outer(); console.log(outer2()); console.log(outer2()); /* 실행결과 2 3 */ 함수 outer은 inner 함수 자체를 반환합니다. 변수 outer2에는 outer의 반환 값이 담깁니다. 그리고 outer2를 두 번 호출해 출력합니다. 실행 결과는 2와 3입니다. 기존 상식으로 콘솔 출력 결과가 나오기까지 과정을 생각해보면 다음과 같습니다. (9번째 줄) outer2를 호출합니다(outer2에는..

콜백 함수가 뭐에요? 콜백(callback) 함수는 다른 코드의 인자로 넘겨주는 함수입니다. 콜백 함수를 넘겨 받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행합니다. 예를 들면, 어떤 함수 X를 실행합니다. 함수 X는 다음과 "특정 조건이 되면 함수 Y를 호출"과 같은 명령을 실행합니다. 함수 X는 특정 조건이 됐는지 스스로 판단하고 Y를 호출합니다. 다시 말해, Y 함수를 제어할 권리는 X 함수에게 있습니다. 이때 적절한 시점에 호출되는 Y 함수가 콜백 함수입니다. '제어할 권리'을 구체적으로 살펴보기 var count = 0; var countFunction = function () { console.log(count); if (++count > 4) { // count에 먼저 1이 더해..

전역 공간에서 this 배경지식으로, 자바스크립트의 모든 변수는 특정 객체(실행컨텍스트의 LexicalEnvironment)의 프로퍼티로서 동작합니다. 실행컨텍스트는 변수를 수집해 LE의 프로퍼티로 저장합니다. 이후 어떤 변수를 호출하면 (스코프 체인에서 이를 검색) LE를 조회해서 일치하는 프로퍼티가 있을 경우 그 값을 반환합니다. 처음부터 전역 객체의 프로퍼티로 할당한 경우, 삭제가 가능합니다. 하지만 전역변수로 선언한 경우 삭제가 되지 않습니다. 즉, 전역변수로 선언하면 자바스크립트 엔진이 이를 자동으로 전역 객체의 프로퍼티로 할당하면서 추가적으로, 해당 프로퍼티의 configurable 속성(변경 및 삭제 가능성)을 false로 정의합니다. 메서드를 호출할 때 메서드 내부에서 this '메..

이 글은 를 기반으로 작성되었습니다. 자바스크립트에서 실행 컨텍스트(execution context) 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅, hoisting), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행합니다. 이 환경 정보를 콜 스택*에 쌓아 올렸다가, 가장 위에 쌓여 있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다. 이 때 콜 스택*은 프로그램을 실행할 때 현재 실행 중인 함수가 가장 위에 쌓이고 그 함수의 실행이 끝나면 사라지는 스택 자료구조입니다. 즉, 프로그램이 시작되면 콜 스택에 함수들이 쌓이고, 가..

자바스크립트 세부 데이터 타입(Array, String ...)의 성질을 살펴보기 보다 기본형과 참조형의 특징이 무엇이고 어떻게 구분하는지 다룹니다. 자바스크립트 데이터 타입 이해하기 자바스크립트 데이터 타입은 크게 두 종류입니다. 기본형(원시형, primitive type)과 참조형(reference type)이다. 이에 따른 세부 데이터 타입은 다음과 같습니다. 기본(원시)형 → Number, String, Boolean, null, undefined, Symbol 참조형 → Object, Array, Function, Date, RegExp, Map, WeakMap, Set, WeakSet, 참조형은 모두 객체(Object)의 하위 분류에 속합니다. 기본형과 참조형을 구분하는 기준 기본형은 값이 담..

자바스크립트 논리연산자를 공부하다가 논리연산자 우선순위와 단락 평가를 알게 됐다. 배우면서 알게된 것을 기록해두려고 한다. 자바스크립트에서 논리연산자는 표현식을 반환한다. 자바스크립트에서 논리연산자 AND와 OR는 참과 거짓만 반환하는 게 아니라, 표현식 자체를 반환한다. 규칙은 다음과 같다. AND의 경우 왼쪽이 참 같은 값(Truthy)이면 오른쪽을 반환하고, 참 같은 값이 아니면 왼쪽을 반환한다. OR의 경우 왼쪽이 참 같은 값이면 왼쪽을 반환하고, 참 같은 값이 아니면 오른쪽을 반환한다. 논리 연산자 우선순위는 표에 의하면 AND는 6, OR는 5로 AND가 OR 보다 우선순위가 더 높다. 다음은 MDN 웹 문서에 나와 있는 예제다. true || false && false // returns t..