DEEPDIVE
[JS] DeepDive(35) 스프레드 문법
ES6에서 도입된 스프레드 문법 ... 은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만들어준다. 스프레드 문법은 Array,String,Map,Set,DOM 컬렉션과 같이 for ... of 문으로 순회할 수 있는 이터러블이어야 한다. // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1 2 3 // 문자열은 이터러블이다. console.log(...'Hello'); // H e l l o // Map과 Set은 이터러블이다. console.log(...new Map([['a', '1'], ['b', '2']])); // [ 'a', '1' ] [ 'b', '2' ] console.l..
[JS] DeepDive(34) 이터레이션 프로토콜
ES6에서 도입된 이터레이션 프로토콜은 순회가능한 데이터 컬렉션을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6이전의 배열,문자열 등등은 통일된 규약 없이 나름의 구조를 가지로 for, for ...in forEach 등 순회할 수 있었다. ES6에서는 이를 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다. 이터러블 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function'; // 배열, 문자열, Map, Set 등은 이터러블이다. ..
[JS] DeepDive(33) 7번째 데이터 타입 Symbol
심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌값은 Symbol함수를 호출하여 생성한다.이때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른값과 절대 중복되지 않은 유일무이한 값이다. // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); console.log(typeof mySymbol); // symbol // 심벌 값은 외부로 노출되지 않아 확인할 수 없다. console.log(mySymbol); // Symbol() 언뜻보면 생성자 함수로 객체를 생성하는 것처럼 보이지만 new 연산자와 함께 호출하지 않으며 선택적으로 문자열을 인수로 전달할 수 있다. // 심벌 값에 대한 설명이 ..
[JS] DeepDive(27) 배열
배열은 여러 개의 값을 순차적으로 나열한 자료구조이다. 배열 리터럴을 통해서 배열을 만들 수 있으며 배열이 가진 값을 요소라고 한다. const arr = ['apple', 'banana', 'orange']; 배열의 길이는 length 프로퍼티로 접근할 수 있다. arr.length // -> 3 JS에서 배열이란 타입은 존재하지 않으며 배열은 사실 객체타입이다. 일반객체와는 다르게 값의 순서와 length프로퍼티가 있다는 특징이 있다. const arr = [1, 2, 3]; // 반복문으로 자료 구조를 순서대로 순회하기 위해서는 자료 구조의 요소에 순서대로 // 접근할 수 있어야 하며 자료 구조의 길이를 알 수 있어야 한다. for (let i = 0; i < arr.length; i++) { co..
[JS] DeepDive(25) 클래스 - 2
클래스의 인스턴스 생성 과정 new 연산자와 함께 클래스를 호출하면 아래와 같은 과정을 거치게 된다. 1. 인스턴스 생성과 this 바인딩 new 연산자와 함께 클래스를 호출하면 constructor의 내부 코드가 실행되기 전에 빈 객체가 생성된다. 2. 인스턴스 초기화 constructor의 내부 코드가 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다. 3. 인스턴스 반환 클래스의 모든 처리가 끝나면 바인딩된 this가 반환된다. class Person { // 생성자 constructor(name) { // 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다. console.log(this); // Person {} console.log(Object.getPrototypeOf(this)..
[JS] DeepDive(25) 클래스 - 1
JS는 프로토타입 기반 객체지향 언어이다. 타 객체지향 언어와의 차이점이 있긴 하지만 JS가 강력한 객체지향 프로그래밍 능력을 가진것은 맞다. 특히 JS는 프로토타입 기반 객체지향언어로 클래스가 필요 없는 객체지향 프로그래밍 언어이다. // ES5 생성자 함수 var Person = (function () { // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person.prototype.sayHi = function () { console.log('Hi! My name is ' + this.name); }; // 생성자 함수 반환 return Person; }()); // 인스턴스 생성 var me = new Person('Lee')..