본문 바로가기

스터디/[모던 자바스크립트 deep dive] JS

 (29)
#24. 클로저 클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(ex. 하스켈, 리스프, 얼랭, 스칼라 등)에서 사용되는 중요한 특성이다. 1. 렉시컬 스코프자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다. 2. 함수 객체의 내부 슬롯 [[Environment]]함수가 정의된 환경(위치)과 호출되는 환경(위치)은 다를 수 있다.따라서 렉시컬 스코프가 가능하려면 함수는 자신이 호출되는 환경과는 상관없이 자신이 정의된 환경, 즉 상위 스코프를 기억해야 한다.이를 위해 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한..
#23. 실행 컨텍스트 실행 컨텍스트 : 자바스크립트의 동작 원리를 담고 있는 핵심 개념 1. 소스코드의 타입- ECMAScript 사양은 소스코드를 4가지 타입으로 구분- 4가지 타입의 소스코드는 실행 컨텍스트를 생성- 소스코드를 4가지 타입으로 구분하는 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문!전역 코드전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다.var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결되어야 한다. 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다.함수 코드지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체를 관리해..
#22. this 1. this 키워드JavaScript에서 객체는 상태(state)를 나타내는 프로퍼티와 동작(behavior)을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다.메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다. 이를 위해 메서드는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴에서의 thisconst circle = { radius: 5, getDiameter() { return 2 * this.radius; } };console.log(circle.getDiameter()); // 10생성자 함수에서의 thisfunction Circle(radius) { this.radius = radius..
#21. 빌트인 객체 1. 자바스크립트 객체의 분류자바스크립트 객체는 크게 3개의 객체로 분류할 수 있다. 2. 표준 빌트인 객체자바스크립트는Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, WeakMap/WeakSet , Function, Promise, Reflect, Proxy, JSON, Error등 40여 개의 표준 빌트인 객체를 제공한다. 생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메서드와 정적 메서드를 제공하고 생성자 함수 객체가 아닌 표준 빌트인 객체는 정적 메서드만 제공한다.3. 원시값과 래퍼 객체const str = 'helLo' ; // 원시 타입인 문자열이 프로퍼티와 메서드를 갖고 있는 객체처럼 동직한다．con..
#20. strict mode 1. strict mode란? strict mode : 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다.ESLint : strict mode와 유사한 효과를 얻을 수 있는 도구린트 도구는 정적 분석 기능을 통해 실행하기 전에 소스코드를 스캔하여 문법적 오류만이 아니라 잠재적 오류까지 짖하내고 오류의 원인을 리포팅해주는 유용한 도구다.strict mode가 제한하는 오류는 물론 코딩 컨벤션을 설정 파일 형태로 정의하고 강제할 수 있기 때문에 더욱 강력한 효과를 얻을 수 있다. 2. strict mode의 적용strict mode를 적용하려면 전역의 선두 또는 함수 몸체의 선두에..
#19. 프로토타입 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어자바스크립트는 클래스 기반 객체지향 프로그래밍 언어보다 더 효율적인 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어1. 객체지향 프로그래밍프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 의미추상화 : 다양한 속성 중 프로그램에 필요한 속성만 간추려 표현하는 것객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임객체지향 프로그래밍은 객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동..
#18. 함수와 일급 객체 1. 일급 객체자바스크립트의 함수는 다음 예제와 같이 위의 조건을 모두 만족하므로 일급 객체다.2. 함수 객체의 프로퍼티arguments 프로퍼티함수 객체의 arguments 프로퍼티 값은 arguments 객체arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체이며, 함수 내부에서 지역 변수처럼 사용됨arguments 객체는 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용arguments 객체는 배열 형태로 인자 정보를 담고 있지만 실제 배열이 아닌 유사 배열 객체유사 배열 객체 : length 프로퍼티를 가진 객체로 for 문으로 순회할 수 있는 객체를 의미caller 프로퍼티ECMAScript 사양에 포함되지 않은 비표준 프로퍼티 이..
#17. 생성자 함수에 의한 객체 생성 1. Object 생성자 함수new 연산자와 함께 object 생성자 함수를 호출하면 빈 객체를 생성하여 반환함생성자 함수 : new 연산자와 함께 호출하여 객체 (인스턴스)를 생성하는 함수를 의미// 빈 객체의 생성 const person = new object(); // 프로퍼티 추가 person.name = 'Lee' ; person.sayHello = function () { console.log('Hi! My name is ' + this.name); } ; console.log(person); // {name: "Lee", sayHello: f}person.sayHello(): // Hi! My name is Lee 2. 생성자 함수 - 객체 리터럴에 의한 객체 생성 방식의 문제점객체 리터럴에..

티스토리툴바