leesche blog

자바스크립트에서 '없음'을 나타내는 두 가지 방법, undefined와 null undefined를 반환하는 상황 3가지 자바스크립트 엔진은 사용자가 응당 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로는 그렇게 하지 않았을 때 undefined를 반환합니다. 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때 var a; console.log(a); // undefiend. 값을 대입하지 않는 변수에 접근 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때 var obj = { a: 1}; console.log(obj.b); // ReferenceError: b is not defined 존재하지 않는 프로퍼티에 접근 return 문이 없..

프로토타입으로 클래스 구현하기 자바스크립트에는 '상속' 개념이 존재하지 않습니다. 하지만 클래스 기반의 다른 언어에 익숙한 개발자들의 니즈에 따라 ES6에는 클래스 문법이 추가됐습니다. 하지만 ES6 클래스에서 일정 부분은 프로토타입을 활용하고 있기 때문에, ES5 체제 하에서 클래스를 흉내내기 위한 구현 방식을 학습하는 것은 큰 의미가 있습니다. 클래스와 인스턴스의 개념 이해 상위의 개념과 하위의 개념이 있습니다. 개념을 어떤 '집단'으로 표현하면, 영어로 그것은 클래스라고도 할 수 있습니다. 다시 말해, 상위 클래스와 하위 클래스가 있습니다. 하위 클래스는 상위 클래스를 포함하면서 더 구체적인 내용(개념)이 추가됩니다. 여기서 클래스의 예는 '음식'이고 그 하위 개념(클래스)는 '과일'이며, 또 그 ..

함수 선언문과 함수 표현식 함수 선언문(function declaration)은 function의 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미합니다. function a() { // 함수 선언문 /* ... */ } a(); // 정상 실행 함수명 a가 곧 변수명입니다. 함수 선언문의 경우 반드시 함수명이 정의되어 있어야 합니다. 반대로 함수 표현식(function expression)은 정의한 function을 별도의 변수에 할당하는 것을 말합니다. var b = function () { // (익명) 함수 표현식. 변수명 b가 곧 함수명 /* ... */ } b(); // 정상 실행 var c = function d () { // 기명 함수 표현식. 변수명은 c, 함수명은 d /* ... *..

자바스크립트의 근본, 프로토타입... 바~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 값을 설정하는 등의 동작을 수행합니다. 이 환경 정보를 콜 스택*에 쌓아 올렸다가, 가장 위에 쌓여 있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다. 이 때 콜 스택*은 프로그램을 실행할 때 현재 실행 중인 함수가 가장 위에 쌓이고 그 함수의 실행이 끝나면 사라지는 스택 자료구조입니다. 즉, 프로그램이 시작되면 콜 스택에 함수들이 쌓이고, 가..