ES6 문법 복습 ( spread operator, Map )

전개 구문 = spread operator

Destructuring과 함께 가장 많이 사용되는 es6 문법 중 하나

배열

let arr = [1, 2, 3];

console.log(...arr); // * 1 2 3

배열에 4를 추가하기

let newArr = [...arr, 4];

전개 구문한 배열에 숫자 4를 추가한 값을 새로운 변수로 선언

console.log(newArr); // * [ 1, 2, 3, 4 ]

---

객체

let user = {
  name: "nbc",
  age: 30,
};

let user2 = { ...user };

console.log(user); // { name: 'nbc', age: 30 }
console.log(user2); // { name: 'nbc', age: 30 }

템플릿 리터럴(Template literals) 많이 쓰임!

• 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식.

• 백틱(``) 과 ${}`로 표현함.

• "" 사용처에 ``을 대신 써도 출력값은 같다

• 자바스크립트를 넣을 때는 ${} 기호 안에 넣으면 작동되며 또한 멀티라인을 지원한다

const testValue = "안녕하세요!";
console.log(`Hello World ${testValue}`); // * Hello World 안녕하세요!

console.log(`
  Hello
    My name is Javascript

      Nice to

      meet          you

`);

보이는 모습 그대로 터미널에 출력된다

---

Map

• JS -> 객체, 배열 : 많고, 다양하고, 복잡한 프로그램을 만들어 왔음

• 다만 여전히 현실세계의 여러가지 문제들을 ‘프로그래밍’적으로 반영하기엔 많이 부족

• Map과 Set은 이러한 한계를 극복하고자 비교적 최근 등장한 자료구조

Map, Set의 목적 : 데이터의 구성, 검색, 사용을 기존의 객체 또는 배열보다 효율적으로 처리

Map의 특징

• Key / value

• Key에 어떤 데이터타입(유형)도 다 들어올 수 있다.

• Map은 키가 정렬된 순서로 저장되기 때문이다

• 검색, 삭제, 제거, 여부 확인

Map 생성 및 사용

• 새로운 Map을 만들려면 Map() 생성자를 사용

const myMapTest = new Map();

• 이제 Map에 값을 추가하려면 set() 메소드를 사용.

myMapTest.set("key", "value");

• Map에서 값을 검색하려면 get() 메소드를 사용.

myMapTest.get("key");

• set과 get은 pair

Map의 반복

• for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문,

• for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator]속성을 가지고 있어야만 한다

• iterator는 반복자라는 뜻이며, 요소 하나하나를 반복할 수 있도록

• 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);
console.log(myMap.keys()); // [Map Iterator] { 'one', 'two', 'three' }

key

for (const key of myMap.keys()) {
  console.log(key); // one, two, three
}

value

console.log(myMap.values());
for (const value of myMap.values()) {
  console.log(value); // 1, 2, 3
}

entries;

console.log(myMap.entries());
{
  ["one", 1], ["two", 2], ["three", 3];
}

for (const entries of myMap.entries()) {
  console.log(entries); // * ["one", 1][("two", 2)][("three", 3)];
}