개발이랑 일상이랑

- 클로저에서 먼저 이해해야 할 핵심 키워드는 "함수가 선언된 렉시컬 환경"이다. const x = 1; function outerFunc(){ const x = 10; innerFunc(); } function innerFunc(){ console.log(x); //1 함수는 자신이 선언된 상위스코프만 참조할 수 있다. } outerFunc(); 1. 렉시컬 스코프 - 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라, 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다. - 스코프의 실체는 실행컨텍스트의 렉시컬 환경이다. - 렉시컬환경은 자신의 "외부 렉시컬 환경에 대한 참조"를 통해 상위 렉시컬 환경과 연결된다. 이것이 스코프체인이다. - 렉시컬 환..

실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 1. 소스코드의 타입 - ECMAScript 사양은 소스코드를 4가지 타입으로 구분하고, 각각의 코드는 실행 컨텍스트를 생성한다 소스코드의 타입 설명 전역 코드(global code) 전역에 존재하는 소스코드를 말한다. 전역에 적의된 함수, 클래스등의 내부코드는 포함되지 않는다 함수 코드(function code) 함수 내부에 존재하는 소스코드를 말한다. 함수 내부에 중첩된 함수, 클래스 등의 내부코드는 포함되지 않는다. eval 코드(eval code) 빌트인 전역함수인 eval 함수에 인수로 전달되어 실행되는 소스코드이다. 모듈 코드(module code) 모듈 내부에 존재하는 소스코드를 말한다. 모듈 내부의 함수, 클래스 등의 내..

1. this 키워드 - 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. - 객체 리터럴의 경우 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. - 생성자방식으로 인스턴스를 참조하려면 함수를 정의하는 시점에는 인스턴스가 없기 때문에 식별자를 알 수 없다. - this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. - this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. - this는 엔진에 의해 암묵적으로 생성되며 코드 어디서든 참조할 수 있다. - this바인딩은 함수 호출 방식에 의해 동적으로 결정된다. * this 바인딩 -> 바인딩은 ..

1. 자바스크립트 객체의 분류 표준 빌트인 객체(standard built-in objects/native objects/global objects ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공한다. 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)과 상관없이 언제나 사용할 수 있다. 표준 빌트인 객체는 전역 객체의 프로퍼티로서 제공된다. 따라서 별도의 선언 없이 전역변수처럼 언제나 참조할 수 있다. 호스트 객체 호스트 객체는 ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경(브라우저 환경 또는 Node.js환경)에서 추가로 제공하는 객체를 말한다. 브라우저환경에서는 DOM, BOM, Canvas, XMLHttpRequest, fet..

1. strict mode란? function foo(){ x = 10; //스코프체인상의 변수를 검색하고 전역스코프에도 존재하지 않으면 암묵적으로 전역 객체에 x프로퍼티를 생성 } foo(); console.log(x); // - 개발자의 의도와 상관없이 발생한 암묵적 전역은 오류를 발생시키는 원인이 될 가능성이 크다. - 따라서 반드시 var let const키워드를 사용해서 변수를 선언한 후 사용해야 한다. - strict mode는 자바스크립트 언어의 문법을 더 엄격히 적용해 오류를 발생시킬 가능성이 높거나, 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 일으킨다. - ESLint를 사용해도 strict mode와 유사한 효과를 얻을 수 있다. - 린트 도구..

- 자바스크립트는 명령형, 함수형, 프로토타입 기반, 객체지향을 지원하는 멀티 패러다임 프로그래밍 언어이다. - 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다. *클래스 -> ES6에서 클래스가 도입되었지만 기존 프로토타입 기반 객체지향 모델을 폐기하는것은 아니다. -> 클래스도 함수이며 프로토타입 기반의 Syntatic sugar라고 볼 수 있다. (사람이 쉽게 이해하고 쓸 수 있게 만들어진 문법) -> 생성자 함수와는 작동하는 방식이 동일하지 않기 때문에 새로운 객체 생성 메커니즘으로 보는것이 더욱 합당하다. 1. 객체지향 프로그래밍 - 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러개의 독립적 단위, 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 의미한다. - 실체는 ..

1. 일급 객체 - 다음과 같은 조건을 만족하는 객체를 일급 객체라 한다. 무명의 리터럴로 생성할 수 있다. 즉 런타임에서 생성이 가능하다. 변수나 자료구조(객체,배열)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. - 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미이다. 2. 함수 객체의 프로퍼티 - 함수는 객체이기때문에 프로퍼티를 가질 수 있다. - arguments, caller, length, name, prototype 프로퍼티는 모두 함수객체의 데이터 프로퍼티다. - 하지만 __proto__는 접근자 프로퍼티이며, 함수 객체 고유의 프로퍼티가 아니라 Object.prototype객체의 프로퍼티를 상속받았다. 2.1 argum..

1. Object 생성자 함수 - new연산자와 함께 Object생성자 함수를 호출하면 빈 객체를 생성해 반환한다. - 생성자 함수에 의해 생성된 객체를 인스턴스라 한다. 2. 생성자 함수 2.1 객체 리터럴에 의한 객체 생성 방식의 문제점 - 객체 리터럴은 단 한개의 객체만 생성한다. - 동일한 프로퍼티를 갖는 객체를 여러개 생성해야 하는 경우에는 비효율적이다. 2.2 생성자 함수에 의한 객체 생성 방식의 장점 프로퍼티 구조가 동일한 객체 여러개를 간편한게 생성할 수 있다. 생성자 함수는 new연산자와 함께 호출하면 해당 함수가 생성자 함수로 동작한다. * this - this는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이다. - this가 가리키는 값, this바인딩은 함수 호출 ..

1. 내부 슬롯과 내부 메서드 - 내부 슬롯과 내부 메서드는 자바스크립트 엔진 구현 알고리즘을 설명하기 위해 ECMAScriot사양에서 사용하는 의사 프로퍼티와 의사 메서드이다. - ECMAScript 사양에 등장하는 이중 대괄호 [[..]] 로 감싼 이름들이 내부 슬롯과 내부 메서드이다. - 내부 슬롯과 내부 메서드는 실제로 동작하지만 개발자가 직접 접근하도록 외부로 공개된 객체의 프로퍼티는 아니다. - 일부만 간접적으로 수단을 제공한다(ex. [[Prototype]] => __proto__ ) 2. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 - 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. - 프로퍼티의 상태란 프로퍼티의 값, ..

1. var 키워드로 선언한 변수의 문제점 1.1. 변수 중복 선언 허용 - var키워드로 선언된 변수는 같은 스코프 내에서 중복선언을 허용한다. - 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var키워드가 없는것처럼 동작한다. 1.2. 함수 레벨 스코프 - var키워드로 선언한 변수는 함수 코드 블록만을 지역 스코프로 인정한다. 1.3. 변수 호이스팅 - var로 변수를 선언하면 호이스팅이 일어나 변수 선언전에 참조하면 undefined를 반환한다. 2. let 키워드 2.1. 변수 중복 선언 금지 - let 키워드로 이름이 같은 변수를 선언하면 Syntax Error가 발생한다. 2.2 블록 레벨 스코프 - let으로 선언한 변수는 모든 코드 블록을 지역스코프로 인정하는 블록 레벨 스코프..