FrontEnd
[JS] DeepDive(36) 디스트럭처링 할당
디스트럭처링할당 (구조 분해 할당) 은 구조화된 배열과 같은 이터러블 또는 객체를 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3 const arr = [1, 2, 3]; // ES6 배열 디스트럭처링 할당 // 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다. // 이때 할당 기준은 배열의 인덱스다. const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 이 때 우변에 이터러블..
[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(32) String
표준 빌트인 객체인 String은 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공한다. String객체는 생성자 함수 객체이다. const strObj = new String(); console.log(strObj); // String {length: 0, [[PrimitiveValue]]: ""} String 생성자 함수에 인수를 전달하지 않고 new 연산자오 ㅏ함께 호출하면 [[StringData]] 내부슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성한다. 생성자 함수의 인수로 문자열을 전달하면 해당 문자열을 할당한 String 래퍼 객체를 생성한다. const strObj = new String('Lee'); console.log(strObj); // String {0: "L..
[JS] DeepDive(31) RegExp
정규표현식이란 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어이다. 정규표현식은 JS의 고유 문법은 아니며 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 정규표현식은 문자열을 대상으로 패턴 매칭 기능을 재공한다. 예를들어 휴대폰 전화번호를 얻어내는 정규표현식을 보자. // 사용자로부터 입력받은 휴대폰 전화번호 const tel = '010-1234-567팔'; // 정규 표현식 리터럴로 휴대폰 전화번호 패턴을 정의한다. const regExp = /^\d{3}-\d{4}-\d{4}$/; // tel이 휴대폰 전화번호 패턴에 매칭하는지 테스트(확인)한다. regExp.test(tel); // -> false 정규표현식을 활용하면 반복문이나 조건문 없이 패턴을 정의하고 테스트..