ES6 - 2 — 봉동이.blog

const, string 메서드, Array, Object, 구조분해할당, Set/WeakSet, Map/WeakMap

1. const

const 선언은 블록 범위의 상수를 선언한다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없다.

const number = 42;

try {
  number = 99;
} catch (err) {
  console.log(err);
  // expected output: TypeError: invalid assignment to const `number'
  // Note - error messages will vary depending on browser
}

console.log(number);
// expected output: 42

const를 사용하더라도 배열과 오브젝트 값을 변경하는 것은 가능하다. immutable이 아니라 재할당이 안 되는 것이다.

const arr = ['apple', 'banana', 'orange'];
arr.push('watermelon');
console.log(arr);
// ["apple", "banana", "orange", "watermelon"]

immutable array 만들기

const arr1 = ['apple', 'banana', 'orange'];
arr2 = [].concat(arr1, 'watermelon');
console.log(arr1 === arr2); // false;

2. ES6 stirng 새로운 메서드들

let str = 'hello world !!';
let matchStr = 'world !!';

console.log(str.startsWith(matchStr)); // false
console.log(str.endsWith(matchStr)); // true
console.log(str.includes('world')); // true

3. Array

foreach

array, Set, Map 에서 사용 가능한 반복문

var items = ['item1', 'item2', 'item3'];

items.forEach(function(item) {
    console.log(item);
}); // item1 item2 item3

for in

객체에 사용한다. 값이 아닌 키에 접근한다. js에서는 배열도 객체다.

var arr [1, 2, undefined, Nan, ""];

for(let i in arr) {
  console.log(arr[i]);
} // 1 2 undefined NaN ""

for of

ES6에 추가된 새로운 컬렉션 전용 반복 구문

var arr = [1, 2, 3];

for (var val of arr) {
  console.log(val); // 1, 2, 3
}

for in, for of 차이

for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복
for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용

spread operator(전개 구문)

let arr = ['apple', 'banana', 'orange'];
console.log(...arr); 
// 'apple', 'banana', 'orange'

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum.apply(null, numbers));
// 6
console.log(sum(...numbers));
// 6

from 메서드로 진짜 배열 만들기

function addExclamationMark() {
  // arguments는 객체
  // arguments로부터 배열을 만들기 
  let newArray = Array.from(arguments);
  let newData = newArray.map(function(value) {
    return value + '!';
  }); 
  
  console.log(newData);
}

addExclamationMark("hello", "world", 1, undefined, NaN, '');
// ["hello!", "world!", "1!", "undefined!", "NaN!", "!"]

4. Object

프로퍼티 초기화 단축(Property Initializer Shorthand)

// ES5까지
function Person(name, age) {
    return {
        name: name,
        age: age
    };
}

// ES6
function createPerson(name, age) {
    return {
        name,
        age
    };
}

간결한 메서드(Concise Method)

// ES5까지
var person = {
    name: 'gildong'
    sayName: function() {
        console.log(this.name);
    }
};

// ES6
// 메서드의 key 네임과 function 키워드 생략
var person = {
    name: 'gildong'
    sayName() {
        console.log(this.name);
    }
};

Object.is() 메서드

js에서 두 값을 비교할 때 ’==’, ’===’ 등을 사용하지만 ’===‘도 정확하진 않다. +0과 -0을 같다고 인식한다. 그리고 NaN === NaN은 false이므로 isNaN() 메서드를 제공한다. es6에서는 equals 연산자의 단점을 보충하기 위해 is() 메서드를 추가했다.
is()메서드는 두개의 파라미터를 받아들여 값이 동일하면 true를 반환한다.

console.log(+0 == -0);              // true
console.log(+0 === -0);             // true
console.log(Object.is(+0, -0));     // false
console.log(NaN == NaN);            // false
console.log(NaN === NaN);           // false
console.log(Object.is(NaN, NaN));   // true
console.log(5 == 5);                // true
console.log(5 == "5");              // true
console.log(5 === 5);               // true
console.log(5 === "5");             // false
console.log(Object.is(5, 5));       // true
console.log(Object.is(5, "5"));     // false

참고블로그

5. 구조분해 할당(Destructuring)

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

원래 변수에서 어떤 값을 분해해 할당할지 정의한다.

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

배열 구조 분해

// 기본 변수 할당
var foo = ["one", "two", "three"];

var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

// 변수의 선언이 분리
var a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

// 기본 값 : 분해한 값이 undefined일 때 그 값을 대신 사용
var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

객체 구조 분해

// 기본
var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

// 선언 없는 할당
var a, b;
({a, b} = {a: 1, b: 2});

// 새로운 변수명으로 할당
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true

//객체로부터 해체된 값이 undefined인 경우, 변수에 기본값을 할당할 수 있습니다.
var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

구조 분해 할당 활용 - JSON 파싱

var news = [
  {
    'title' : 'mbc',
    'url' : 'https//mbcmbc',
    'newsList' : [
      '뉴스1',
      '뉴스2',
      '뉴스3',
    ]
  },
  {
    'title' : 'sbs',
    'url' : 'https//sbssbs',
    'newsList' : [
      '뉴스1',
      '뉴스2',
      '뉴스3',
    ]
  }
];

let [, sbs] = news;
let {title, url} = sbs;

console.log(sbs);
console.log(title, url);
/*
[object Object] {
  newsList: ["뉴스1", "뉴스2", "뉴스3"],
  title: "sbs",
  url: "https//sbssbs"
}
"sbs"
"https//sbssbs"
*/

구조 분해 할당 활용 - Event 객체 전달

document.querySelector('div').addEventListener('click',function({target}){
  console.log(target.name); // DIV
});

6. Set / WeakSet

Set - 중복없는 유니크한 배열

let mySet = new Set();
mySet.add('seungui');
mySet.add('gildong');

mySet.forEach(function(value){
  console.log(value); // "seungui" "gildong"
});

console.log(mySet.has('best')); // false;

mySet.delete('gildong'); // "seungui"


mySet.forEach(function(value){
  console.log(value);
});

WeakSet - 참조를 가지는 객체만 저장

let arr = [1, 2, 3, 4];
let arr2 = [5, 6, 7, 8];
let obj = {arr, arr2};

let ws = new WeakSet();
ws.add(arr);
ws.add(arr2);
ws.add(obj);

console.log(ws);

// 객체가 null이 되면 가비지컬렉션 대상이 되어 메모리를 효율적으로 운영
arr = null;
arr2 = null;
console.log(ws.has(arr), ws.has(arr2)); // false false

7. Map / WeakMap

Map

var sayings = new Map();
sayings.set("dog", "woof");
sayings.set("cat", "meow");
sayings.set("elephant", "toot");
sayings.size; // 3
sayings.get("fox"); // undefined
sayings.has("bird"); // false
sayings.delete("dog");

for (var [key, value] of sayings) {
  console.log(key + " goes " + value);
}
// "cat goes meow"
// "elephant goes toot"

Object와 Map비교

Object의 키는 Strings이며, Map의 키는 모든 값을 가질 수 있다. -Object는 크기를 수동으로 추적해야하지만, Map은 크기를 쉽게 얻을 수 있다.
Map은 삽입된 순서대로 반복된다.
객체(Object)에는 prototype이 있어 Map에 기본 키들이 있다. (이것은 map = Object.create(null) 를 사용하여 우회할 수 있다. )

Object 혹은 Map중에 어느 것을 사용할지를 결정하는데 도움을 줄 두가지 팁이 있다

실행 시까지 키를 알수 없고, 모든 키가 동일한 type이며 모든 값들이 동일한 type일 경우에는 objects를 대신해서 map을 사용해라.
각 개별 요소에 대해 적용해야 하는 로직이 있을 경우에는 objects를 사용해라.

WeakMap

object만을 키로 허용하는 Map
객체에 대한 참조가 더이상 존재하지 않을 경우 garbage collection(GC)의 호출 대상이 됨