ES6 문법 (2)

7. Destructing

1) Array

2) Object

3) JSON parsing

4) Event 객체 전달

8. Template

1) Tagged Tamplate literals

9. Module

1) export

2) import

10. Proxy

7. Destructing

 1)  Array에서

let data = ["crong", "honux", "jk", "hinny"];
// 기존 ES5 방법
let myname = data[0];
let jisu = data[0];

// ES6
let [jisu,,jung] = data;    // jisu = data[0], jung = data[2]
console.log(jisu, jung);    // "crong", "jk"

 2) Object에서

key, value 값을 같은 이름에 할당할 수 있습니다.

let obj = {
  name = "crong",
  address = "Korea",
  age:  10
}

let {name, age} = obj;
console.log( name, age );    // "crong", 10

let {name: myName, age: myAge} = obj;
console.log( myNAme, age );  // "crong", 10

 3) JSON Parsing 할때

// destructing 활용 json 파싱 방법
var news = [
  { title: "sbs", "imgurl": 123, "newsList" : ["news1", "news2", "news3"]},
  { title: "mbc", "imgurl": 456, "newsList" : ["news4", "news5", "news6"]},
]

let [,mbc] = news;
console.log(mbc);
// { imgurl: 456, newsList : ["news4", "news5", "news6"]}, title: "mbc" }

let {title, imgurl} = mbc;
console.log(title, imgurl)  // "mbc", 456

// 2번째 데이터에 newsList
function getNewsList2( [, { newsList }] ) {  
  console.log(newsList);
}
// 1번째 데이터의 newsList
function getNewsList1( [{ newsList }] ) {    
  console.log(newsList);
}

getNewsList2(mbc);
getNewsList1(mbc);

 4)  Event 객체를 전달할 경우

element.addEventListner("click", ( {target, type} ) => {  // event객체의 target, type선택
  console.log(target.tagName)
})

8. Template

 1) Template 처리

const data = 'text';
const template = `<div> ${data} </div>`;

 2) Tagged Template literals

function fn(tags, name, items) {
  console.log(tags);
  if(typeof items === "undefined") {
  	items = "주문가능한 상품이 없습니다.";
  }
  return (tags)
}

const data = [{...}, {...}];
data.forEach((v) => {
  const template = fn`<div> ${data.} </div>`;
  console.log(template);
});

const template = fn`<div> ${data.} </div>`
console.log(template);

9. Module

webpack, babel 등을 이용하여 module을 사용할 수 있습니다.

 1) export

다른 스크립트 내에서 사용하기 위해서는 export를 해주어야 합니다.

// location.js
export function log(data){
  console.log(data);
};

// default 는 '기본'으로 내보낸다는 뜻
export default function log2(data) {  ...  }

// class
export class MyLogger {
  constructor(props) {
    this.lectures = ['java', 'iOS'];
  }

  getLectures() {
    return this.lectures;
  }
}

// const/let 은 export default와 함께 쓸 수 없다 ★
export const log3 = () => { ... }  // 방법 1.
const log3 = () => { ... } // 방법 2.
export default log3;

 2)  import

스크립트에 파일을 불러올 때 사용합니다.

// export시 { 객체 }로 넘어오기 때문에 { } 사용 
import { log1, MyLogger } from './location';

// export default는 기본이기때문에 따로 처리를 하지 않아도 됨
import log2 from './location';

log1('my first data');

const logger = new MyLogger();
log1(logger.getLectures());

10. Proxy

Object를 가로채서 다른작업을 추가로 할 수 있도록 도와줍니다.

const myObj = {name: "crong"};
const proxy = new Proxy( myObj, {} )
// 1. target object, 2. handler

proxy.name;             // "crong"
proxy.name = "jisu"     
proxy.name;             // "jisu"

toString.call(proxy)    // [object Object]
proxy;                  // Proxy {name: "jisu"}
myObj;                  // Object {name: "jisu"}
proxy === myObj;        // false
proxy.name === myObj.name   // true

const myObj = {name: "crong", changedValue: 0};
const proxy = new Proxy( myObj, {
  // target => {name: "crong"}
  get: function(target, property, receiver) {
    console.log('get value');
    return target[property];
    // return Reflect.get() ... 검색하기 무슨말인지 모르겠음
  },
  set: function(target, property, value) {
    console.log("set value");
    target['changedValue']++;
    target[property] = value;
  }
}); 

proxy.name;                  // "get value" "crong"
proxy.name = "codesquad";    // "set value" "codesquad"
proxy.name;                  // "get value" "codesquad"
myObj;                       // "get value"  Object {name: "codesquad", changedValue: 1}