Javascript/모던 자바스크립트

표준 빌트인 객체인 Number는 원시 타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 1) Number 생성자 함수 Number 객체는 생성자 함수 객체다. 따라서 new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다. Number 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성한다. const numObj = new Number(); console.log(numObj); // Number {[[PrimitiveValue]]: 0 } [[PrimitiveValue]] ⇒ [[NumberData]] 내부 슬롯 Number 생성자 함수의 인수로 숫자를 전달하면서 new 연산자와 ..

1) 배열이란? 배열(Array)이란 여러 개의 값을 순차적으로 나열한 자료구조다. 배열이 가지고 있는 값을 요소(element)라고 부른다. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. (원시값, 객체, 함수, 배열 등) 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스(index)를 갖는다. 요소에 접근할 때는 대괄호 표기법을 사용한다. 배열은 배열의 길이를 나타내는 length 프로퍼티를 갖는다. 배열은 객체 타입이다. 배열은 배열 리터럴, Array 생성자 함수, Array.of, Array.from 메서드로 생성할 수 있다. 일반 객체와 배열을 구분하는 가장 명확한 차이는 “값의 순서”와 “length 프로퍼티”다. 인덱스로 표현되는 값의 순서와 length 프로퍼..

1) 함수의 구분 ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. 다시 말해, ES6 이전의 모든 함수는 callable이면서 constructor다. (메서드, 콜백함수 포함) ES6 이전의 모든 함수는 사용 목적에 따라 명확한 구분이 없으므로 호출 방식에 특별한 제약이 없고 생성자 함수로 호출되지 않아도 프로토타입 객체를 생성한다. 이는 혼란스러우며 실수를 유발할 가능성이 있고 성능에도 좋지 않다. 이러한 문제를 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분했다. ES6 함수의 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X..

1) 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES6에서 도입된 클래스는 자바나 C#과 같은 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있는 객체 생성 메커니즘을 제시한다. 그렇다고 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체지향 모델을 제공하는 것은 아니다. 사실 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 볼 수도 있다. 클래스는 생성자 함수와 매우 유사하게 동작하지만 다음과 같이 몇 가지 차이가 있다. 클래스를 new 연산자 없이 호출하면 에러가 발..

클로저 - JavaScript | MDN 클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생 developer.mozilla.org "A closure is the combination of a function and the lexical environment within which that function was declared." 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 1) 렉시컬 스코프 (정적 스코프) 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 렉시컬 환경의 “외..

1) 소스코드의 타입 ECMAScript 사양은 소스코드(ECMAScript code)를 4가지 타입으로 구분한다. 소스코드의 타입 설명 전역 코드 전역에 존재하는 소스코드 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드 함수 내부에 존재하는 소스코드 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다. eval 코드 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 모듈 코드 모듈 내부에 존재하는 소스코드 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다. 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르다. 1. 전역 코드 전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다..

1) this 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신의 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 🔎 this 바인딩 바인딩이란 식별자와 값을 연결하는 과정을 의미한다. this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다. this는 코드 어디에서든 참조 가능하다. 전역에서도 함수 내부에서도 참조할 수 있다. 2) 함수 호출 방식과 this 바인딩 this 바인딩은 함수 호출 방식, 즉 함수가 어떻..

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

1) strict mode란? function foo() { x = 10; } foo(); console.log(x); // 10 위 예제의 경우 x 변수의 선언이 존재하지 않기 때문에 ReferenceError를 발생시킬 것 같지만 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. ⇒ 암묵적 전역 개발자의 의도와는 상관없이 발생한 암묵적 전역은 오류를 발생시키는 원인이 될 가능성이 크다. 잠재적인 오류를 발생시키기 어려운 개발 환경을 만들고 그 환경에서 개발하는 것을 지원하기 위해 ES5부터 strict mode가 추가되었다. strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 ..

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다. 자바스크립트를 이루고 있는 거의 “모든 것”이 객체다. (원시 타입의 값을 제외한 나머지 값들) 1) 객체지향 프로그래밍 📌 객체지향 프로그래밍의 4가지 특징 ▪️ 상속(Inheritance) ▪️ 추상화(Abstraction) ▪️ 캡슐화(Encapsulation) ▪️ 다형성(Polymorphism) 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것을 추상화라 한다. “이름”과 “주소”라는 속성을 갖는 person이라는 객체를 자바스크립트로 표현하면 다음과 같다. const person..