모던 자바스크립트 Deep Dive 27

[HUFS/GnuVil] #17 String, Symbol

String 표준 빌트인 객체인 String 객체는 생성자 함수 객체로, 형변환으로도 사용될 수 있다 // 숫자 타입 => 문자열 타입 String(1); // -> "1" String(NaN); // -> "NaN" String(Infinity); // -> "Infinity" // 불리언 타입 => 문자열 타입 String(true); // -> "true" String(false); // -> "false" // 문자열은 원시값이므로 변경할 수 없다. 이때 에러가 발생하지 않는다. strObj[0] = 'S'; console.log(strObj); // 'Lee' 유사 배열 객체이므로 인덱스로 접근할 수 있지만 원시 값이라서 변경할 수 없다 String 프로퍼티: length String 메서드: ..

[HUFS/GnuVil] #16 Number, Math, Date, RegExp

Number // 문자열 타입 => 숫자 타입 Number('0'); // -> 0 Number('-1'); // -> -1 Number('10.53'); // -> 10.53 // 불리언 타입 => 숫자 타입 Number(true); // -> 1 Number(false); // -> 0 표준 빌트인 객체인 Number 객체는 숫자를 생성하는 생성자 함수로, 형변환으로도 사용된다 Number 프로퍼티: EPSILON / MAX_VALUE / MIN_VALUE / MAX_SAFE_INTEGER / MIN_SAFE_INTEGER / POSITIVE_INFINITY / NEGATIVE_INFINITY / NaN Number 메서드: isFinite / isInteger / isNaN / isSafeInteg..

[HUFS/GnuVil] #15 배열

배열 배열(Array)이란 여러 개의 값을 순차적으로 나열한 자료구조로, 배열이 가지고 있는 값을 요소(Element)라고 부른다. 각 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스(index)를 가지며 같은 타입의 요소가 연속적으로 위치하는 것이 일반적이다 const arr = [1, 2, 3, 4, 5]; const arr2 = new Array(3).fill(1); // -> [1, 1, 1] const arr3 Array.of(1, 2, 3); // -> [1, 2, 3] const arr4 = Array.from({ length: 3 }, (_, i) => i); // -> [0, 1, 2] typeof arr // -> object 배열은 객체 타입이며 리터럴, Array 생성자 함수..

[HUFS/GnuVil] #14 ES6 함수의 추가 기능

ES6 함수의 추가 기능 const obj = { x: 1, // foo는 메서드이다. foo() { return this.x; }, // bar에 바인딩된 함수는 메서드가 아닌 일반 함수이다. bar: function() { return this.x; } }; console.log(obj.foo()); // 1 console.log(obj.bar()); // 1 ES6 이후 메서드는 객체 내에서 축약 표현으로 정의된 함수만을 의미한다 const multiply = (x, y) => x * y; multiply(2, 3); // -> 6 화살표 함수는 선언문이 아닌 표현식으로 정의해야 하며 호출 방식은 동일하다 * prototype 프로퍼티가 없어 인스턴스/프로토타입 생성 불가 class Prefixer..

[HUFS/GnuVil] #13 클래스

클래스 자바스크립트는 프로토타입 기반 객체지향 언어로, 인스턴스 생성에 생성자 함수가 있어 클래스가 굳이 필요 없었지만 ES6에 추가된 클래스 문법은 다음과 같은 몇 가지 차별점이 있다 생성자 함수와 달리 new 없이 호출하면 에러가 발생한다 상속을 지원하는 extends와 super 키워드를 제공한다 함수/변수 호이스팅이 발생하지 않는 것처럼 동작한다 (TDZ) 클래스 내의 모든 코드에 암묵적으로 strict mode가 지정된다 constructor 및 메서드들의 [[Enumerable]] 값이 false로, 열거되지 않는다 // 클래스 선언문 class Person { // 생성자 constructor(name) { // 인스턴스 생성 및 초기화 this.name = name; // name 프로퍼티..

[HUFS/GnuVil] #12 클로저

클로저 클로저(Closures)는 둘러싸여진 상태의 참조와 함께 다발로 묶여진 함수의 콤비네이션으로, 함수가 생성되는 시점에 내부 함수로부터 외부 함수에의 접근 권한을 준다 const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } // innerFunc와 outerFunc 사이의 closure (oER) innerFunc(); } // outerFunc와 전역컨텍스트 사이의 closure (oER) outerFunc(); 함수 내부의 중첩 함수에서 상위 스코프의 변수에 접근할 수 있다! * 만약 innerFunc가 outerFunc 외부에서 정의되었다면 outerFunc의 변수에 접근 불가..

[HUFS/GnuVil] #11 strict mode, 빌트인 객체, this

strict mode function foo() { x = 10; } foo(); console.log(x); // 10 위 코드는 실행이 안될 것 같지만 x가 암묵적 전역으로 들어가며 문제없이 실행된다 'use strict'; function foo() { x = 10; // ReferenceError: x is not defined } foo(); ES5부터 strict mode를 위와 같이 활성화해 의도적으로 에러를 발생시킬 수 있다 * 암묵적 전역 / delete 연산자 사용 / 매개변수 이름 중복 / with 문의 사용 등 컨벤션을 커스텀해 적용할 수 있는 ESLint 등의 린트 도구를 사용하는 것이 더 적절하다 빌트인 객체 표준 빌트인 객체는 object, String, Number, Bool..

[HUFS/GnuVil] #10 프로토타입

프로토타입 JS는 명령형 / 함수형 / 프로토타입 기반 / 객체 지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다. 간혹 객체지향 언어가 아니라는 오해를 받지만 JS는 클래스 기반 객체지향 프로그램 언어보다 더 강력한 프로토타입 기반의 객체지향 프로그래밍 언어이며 원시 타입의 값을 제외한 모든 값들(함수, 배열, 정규 표현식 등)은 객체다 객체지향 프로그래밍(OOP) = 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 const circle = { radius: 5, // 반지름 // 원의 지름: 2r getDiameter() { return 2 * this.radius; }, // 원의 둘레: 2πr getPerimeter() { return 2 * Math.PI * this.radi..

[HUFS/GnuVil] #9 함수와 일급 객체

함수와 일급 객체 다음 조건을 만족하는 객체를 일급 객체라고 한다 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다 변수나 자료구조(객체, 배열 등)에 저장할 수 있다 함수의 매개변수에 전달할 수 있다 함수의 반환 값으로 사용할 수 있다 // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다. const auxs = { increase, dec..

[HUFS/GnuVil] #8 프로퍼티 어트리뷰트, 생성자 함수에 의한 객체 생성

프로퍼티 어트리뷰트 내부 슬롯과 내부 메서드란 JS 엔진의 구현 알고리즘을 설명하기 위해 사용되는 의사(pseudo) 프로퍼티와 의사(pseudo) 메서드이다. ES 사양에서 이중 대괄호([[…]])로 감싼 이름들이 그것이다 const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다. o.[[Prototype]] // -> Uncaught SyntaxError: Unexpected token '[' // 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. o.__proto__ // -> Object.prototype 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지며, 이는 __proto__를 통해 간접적으로..