javascript ES6문법 다지기 (2)

Object

향상된 오브젝트 리터럴(Enhanced Object Literal) 로 기존에 객체정의 방식들을 개선한 문법임

속성(property)와 값(value)이 같으면 축약이 가능함

// 기존
var hello = {
  // 속성: 값
  language: 'javascript',
  coding: function() {
    console.log('Hello World');
  }
};
// ES6
var language = 'javascript';

var hello = {
  language
};

console.log(hello); // {language: "javascript"}

속성에 함수를 정의할때 function 예약어 생략이 가능함

// 기존
const hello = {
  // 속성: 함수
  coding: function() {
    console.log('Hello World');
  }
};
hello.coding(); // Hello World

// ES6
const hello = {
  coding() {
    console.log('Hello World');
  }
};
hello.coding(); // Hello World

Destructuring

변수 선언형식이 자유로워지는 것을 구조분해라고 함

var hello = {
  outer: 'coat',
  pants: 'slacks',
  shoes: 'flat',
  acc: 'ring'
};

var { outer, pants, shoes, acc } = hello;
console.log(outer); // coat
console.log(pants); // slacks
console.log(shoes); // flat
console.log(acc); // ring

1. Destructuring Array
   배열선언시 원하는 인덱스를 내가 원하는 변수로 할당할 수 있음
   콤마로 불필요한 값 매칭 가능함
   배열과 객체에 패턴 매칭을 통한 데이터 바인딩을 제공함.
   Destructuring는 할당 실패에 유연하며, 실패 시 undefined 값이 자동할당 됨

 let data = ["coat", "slacks", "flat", "ring"];

    // ES6에서는 다음과 같이 표현 가능
    let [outer, ,shoes] = data;
    
    console.log(outer, shoes); // coat , flat

2. Destructuring Object
   필요데이터만 뽑아서 변수로 할당할 수 있다.

 let data = {
  outer: 'coat',
  pants: 'slacks',
  shoes: 'flat',
  acc: 'ring'
};

let {outer : myouter, acc:myacc} = data;
console.log(outer, acc, myouter, myacc) // coat, ring, coat, ring

    // ES6에서는 다음과 같이 표현 가능
    let [outer, ,shoes] = data;
    
    console.log(outer, shoes); // coat , flat

3. Destructuring 활용 JSON파싱
   JSON형태의 데이터 객체를 개별변수로 할당하는데 자유롭게 사용할 수 있음

var response = [
  {
    "title" : "first",
    "name" : "dori"
  },
  {
    "title": "second",
    "name" : "ted"
  }
]
/*let [,second] = response;
let {title, name} = second
console.log(title, name); // second, ted
*/

let [, {title, name}] = response; //한번에 뽑을 수 있음
console.log(name) //ted

4. Destructuring 파라미터 전달

var response = [
  {
    "title" : "first",
    "name" : "dori"
  },
  {
    "title": "second",
    "name" : "ted"
  }
]
function getFirstList([{name}]) {
  console.log(name)
}
getFirstList(response); //첫번째 name 출력

function getSecondList([,{name}]) {
  console.log(name)
}
getSecondList(response); //두번째 name 출력

Set & WeakSet

set은 중복없이 유일한 값을 저장할때 사용함 (이미 존재하는지 체크할때 유용)

let myset = new Set();

myset.add("minux")
myset.add("ted")
myset.add("dori")
myset.add("ted")

myset.forEach(function(v){
  console.log(v)
})
// minux, ted, dori 
// 중복된 ted 제외하고 3가지 값이 나옴

console.log(myset.has("ted"));
// true

myset.delete("minux");
//minux 삭제됨