모던 자바스크립트 Deep Dive: 26장 ES6 함수의 추가 기능

26장 ES6 함수의 추가 기능26.1 함수의 구분ES6 이전까지 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. 자바스크립트의 함수는 일반적인 함수로서 호출할 수도 있고, new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수로서 호출할 수도 있으며, 객체에 바인딩되어 메서드로서 호출할 수도 있다. 이는 언뜻 보면 편리한 것 같지만 실수를 유발시킬 수 있으며 성능 면에서도 손해다.다음 코드를 살펴보면 ES6 이전의 함수는 동일한 함수여도 다양한 형태로 호출할 수 있다.var foo = function (){ return 1;};//일반 함수로 호출foo();//생성자 함수로 호출new foo();//메서드로 호출var obj = {foo:foo};obj.foo();이..

• format_list_bulleted 언어 정리/JavaScript
• · 2024. 8. 6.
• textsms

모던 자바스크립트 Deep Dive: 25장 클래스(Class)

25장 클래스25.1 클래스는 프로토타입의 문법적 설탕인가?자바스크립트는 프로토타입 기반 객체지향 언어이다. 비록 다른 객체지향 언어와의 차이점에 대한 논쟁이 있긴 하지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다.프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다.ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다.하지만 클래스 기반 언어에 익숙한 프로그래머들은 프로토타입 기반 프로그래밍 방식에 혼란을 느낄 수 있으며, 자바스크립트를 어렵게 느끼게 하는 하나의 장벽처럼 인식되었다.ES6에서 새롭게 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 자바나 C#과 같은 클래스 기반 객체지향 프로그래밍에 익..

• format_list_bulleted 언어 정리/JavaScript
• · 2024. 8. 6.
• textsms

모던 자바스크립트 Deep Dive: 24장 클로저(Closure)

24장 클로저클로저는 난해하기로 유명한 개념 중 하나로 앞서 살펴본 실행 컨텍스트에 대한 사전 지식이 있으면 이해하기 어려운 개념은 아니다.클로저는 자바스크립트 고유 개념은 아니기 때문에 ECMAScript 사양에 등장하지 않는다.MDN에서는 클로저를 다음과 같이 정의하고 있다.클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.24.1 렉시컬 스코프렉시컬 스코프를 실행 컨텍스트의 관점에서 다시 한번 살펴보자.자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다.const x = 1;function foo(){ const x = 10; bar();}function bar(){ console.lo..

• format_list_bulleted 언어 정리/JavaScript
• · 2024. 8. 6.
• textsms

모던 자바스크립트 Deep Dive: 23장 실행 컨텍스트

23장 실행 컨텍스트실행 컨텍스트는 자바스크립트의 동작 원리를 담고있는데, 바르게 이해한다면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다.23.1 소스코드의 타입ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 각 소스코드는 실행 컨텍스트를 생성한다.소스코드의 타입설명전역 코드전역에 존재하는 소스코드. 전역에 정의된 험수, 클래스 등의 내부 코드는 포함되지 않음함수 코드함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않음eval 코드빌트인 전역 함수인 eval 함수에 인수..

• format_list_bulleted 언어 정리/JavaScript
• · 2024. 8. 6.
• textsms

모던 자바스크립트 Deep Dive: 22장 this

this22.1 this 키워드19장 "객체지향 프로그래밍"에서 살펴보았듯 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다.동작을 나타내는 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야한다.객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다.const circle = { radious: 5, getDiameter(){ return 2*circle.radius; }};console.log(circle.getDiameter(..

• format_list_bulleted 언어 정리/JavaScript
• · 2024. 8. 6.
• textsms

모던 자바스크립트 Deep Dive: 21장 빌트인 객체

21장 빌트인 객체21.1 자바스크립트 객체의 분류자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다.표준 빌트인 객체ECMAScript 사양에 정의된 객체로, 애플리케이션 전역의 공통 기능 제공. 자바스크립트 실행 환경(node.js, 브라우저)와 관계없이 언제나 사용 가능. 표준 빌트인 객체는 전역 객체의 프로퍼티로 제공되어 별도의 선언 없이 전역 변수처럼 언제나 참조 가능호스트 객체ECMAScipt 사양에 정의되어 있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체.브라우저 환경에서는 DOM,BOM,Canvas,XMLHttpRequest,fetch,SVG,WebStorage 등 클라이언트 사이드 Web API를 호스트 객체로 제공하고, Node.js 환경에서는 고유의 API..

• format_list_bulleted 언어 정리/JavaScript
• · 2024. 8. 6.
• textsms