ES6 문법 (1) - 수정중

1. new String Method – ES6 전용

1) starts with, endsWith(), include()

2. Array

1) for of

2) spread operator 와 활용

3) from()

3. Obejct

1) df

2) class

3) Object.assign() - object 제작

4) Object.assign() - immutable 객체 제작

5) setPrototypeOf()

6) prototype chain 활용

4. Function

1) Arrow function

2) Arrow function – this context

3) default parameters

4) rest parameters

5. Set, WeakSet – 특별한 자료구조

1) Set

2) WeakSet

6. Map & WeakMap

1) Map

2) WeakMap

1. 새로운 String Methods 

 1) startsWith() ,  endsWith() ,  include()

두 단어가 앞/뒤에 정확히 매칭하고있는지 확인하며,  boolean 리턴합니다.

 let str = "Hello world!";
 let matchstr = "hello";
 console.log( str.startsWith(matchstr) );  // true
 console.log( str.endsWith(matchstr) );  // false
 console.log( str.includes("!") );  // true

2. Array

 1)  for of

var data = [1, 2, undefined, NaN, null, ""];

// 방법 1.
data.forEach(function(value) {
	console.log(value);
})

// 방법 2. -> 별로 좋지 않은 방법
for (let idx in data) { 
	console.log(data[idx]);
}

// 방법 3. 배열을 순회하는 새로운 방법 - string 순회도 가능
for (let value of data) { 
	console.log(value);
}

 2)  spread operator - 펼침 연산자

let pre = ["apple", "orange", 100];
let newData = [...pre];
console.log(newData);           // ["apple", "orange", 100]
console.log(pre === newData);   // false (같은참조를 유지하지 않음 - 배열 복사)

활용

 let pre = [100, 200, "hello", null];
 let newData = [0, 1, 2, 3, ...pre, 4];
 console.log(newData);
 // [0, 1, 2, 3, 100, 200, "hello", null, 4]

function sum(a, b, c) { return a + b + c }
let pre = [100, 200, 300];
console.log( sum.apply(null, pre) );    // 600
console.log( sum(...pre) )              // 600

 3.  from()

 // 기존 방식
 function addMark() {
   let newData = [];
   for (let i = 0; i < arguments.length; i++) {
     newData.push(arguments[i]) + "!");
   }
   console.log(newData);
 }
 addMark(1,2,3,4,5,6,7,8,9);
 // ["1!", "2!", "3!", "4!", "5!", "6!", "7!", "8!", "9!"]

// from()을 사용한 방식
function addMark() {
  let newArray = Array.from(arguments);
  // arguments는 진짜 배열이 아니라 배열의 형태만 가지는 객체
  let newData = newArray.map(function(value) {
    return value + "!";
  });
  console.log(newData);
}
addMark(1,2,3,4,5,6,7,8,9);
// ["1!", "2!", "3!", "4!", "5!", "6!", "7!", "8!", "9!"]

3. Object

 1) Object 생성

function getObj() {
  const name = "crong";

  const getName = function() {
    return name;
  }

  const setName = function(newname) {
  	name = newname;
  }
  const printName = function() {
    console.log(name);
  }
  
  return {
    getName,    // getName = getName()
    setName     // setName = setName()
    name        // name = name
  }
}

var obj = getObj();
console.log(obj.getName());

 2) Class

// ES5 object 생성방식
function Health() {
  this.name = name;
}

Health.prototype.showHealth = function() {
  console.log(this.name + " 님 안녕하세요")
}

const h = new Health("crong");
h.showHealth();             // "crong 님 안녕하세요"

 // ES6 class - 내부적으로는 함수가 작용하는것(위 코드와 동일)
 class Health {
   constructor(name, lastTime) {
   this.name = name;
   this.lastname = lastTime;
 }

showHealth() {
  console.log("안녕하세요" + this.name);
}
}
const myHealth = new Health("crong")
myHealth.showHealth();      // "crong 님 안녕하세요"

 3) Object.assign() - Object 제작

// ES5
const healthObj = {
  showHealth : function() {
  console.log("오늘 운동시간" + this.healthTime);
}
}
const myHealth = Object.create(healthObj);

myHealth.healthTime = "11:20";
myHealth.name = "crong";

console.log(myHealth);
// Object {healthTime: "11:20", name: "crong"}

// ES6
const healthObj = {
  showHealth : function() {
 	 console.log("오늘 운동시간" + this.healthTime);
  }
}
const myHealth = Object.assign(Object.create(healthObj), {
  name : "crong",
  lastTime: "11:20"
});

console.log(myHealth);
// Object {lastTime: "11:20", name: "crong"}

 4) Object.assign() - immutable 객체 제작

new 생성자를 사용하지 않고 만들 수 있습니다.

const previousObj = {
  name: "crong",
  lastTime: "11:20"
}
const myHealth = Object.assign({}, previousObj, {
  // previousObj 내용에서 변경사항을 적용
  "lastTime" : "12:30",
  "name": "honux",
  "age": 99
});

// previousObj !== myHealth  =>  참조하지 않으므로 같은값X
console.log(previousObj);
// Object {lastTime: "12:30", name: "honux", "age": 99}

console.log(myHealth);
// Object {lastTime: "11:20", name: "crong"}

 5) setPrototypeOf()

프로토타입을 지정할 수 있습니다.

const healthObj = {
  showHealth : function() {
  	console.log("오늘 운동시간" + this.healthTime);
  },
  setHealth: function(time) {
  	this.healthTime = newTime;
  }
}

// 특정객체에 healthObj를 프로토타입으로 지정
// Object.__proto__ 로 사용해도 괜찮음 -> 권장하지는 않음
const newObj = Object.setPrototypeOf({
  name: "crong",
  lastTime: "11:20"
}, healthObj);     


console.log(newObj);      
// Object {lastTime: "11:20", name: "crong"},
// -> prototype: showHealth(), setHealth()

 6) prototype chain 활용

// parent object (위와 동일)
const healthObj = { ... }

// child object
const healthChildObj = {
  getAge: function() {
 	 return this.age;
  }
}

// chain 만들기!
const lastHealthObj = Object.setPrototypeOf(healthChildObj, healthObj)

const childObj = Object.setPrototypeOf({
  age: 22,
}, healthChildObj);

console.log(childObj);      
// Object {age: 22} -> prototype: getAge()
// -> prototype: showHealth(), setHealth()

childObj.setHealth("11:55");
childObj.showHealth();
// 오늘 운동시간 : 11:50

4. Function

 1)  Arrow function

// 함수를 () => {} 로 표현
let newArr = [1,2,3,4,5].map(() => {
  return value * 2;
});

// return이 생략된 표현법
let newArr = [1,2,3,4,5].map( () => value * 2 );

 2)  Arrow function의 this context

Arrow function은 this를 포함하고있기 때문에 bind() 를 사용하지 않아도 감지합니다.
비슷하게는 call , apply  메서드를 이용하는 방법이 있습니다.

const myObj = {
  runTimeOut_1() {
    // 일반 callback 함수
    setTimeOut(function(){      
      console.log(this === window);
    }.bind(this), 200);
    // => this 객체는 window이기 때문에 함수를 bind 시켜줘야함
  },
  runTimeOut_2() {
    // arrow 함수
    setTimeOut(() => {          
      console.log(this === window);
      this.printData();
      // arrow함수는 this를 포함하고있음
    }, 200);
  },
  printData() {
    console.log("hi codesquad!")
  }
}

myObj.runTimeout_1();       // true
myObj.runTimeout_2();       // false, "hi codesquad!"

 3)  default parameters

매개변수가 전달되지 않은경우 자동으로 사용되는 변수를 말합니다.

function sum(value, size = 1) {     
  // size = size || 1;
  return value * size;
}

function sumObj(value, size{ value: 1 }) {
  return value * size;
}

console.log(sum(3));    // 3
console.log(sumObj(3, { value: 3 }));  // 9

 4)  rest parameters

// ES5
function checkNum() {
  // argument는 Array가 아님 -> Array로 변경해주어야함
  const argArray = Array.prototype.slice.call(argumetns);
  console.log(toString.call(argArray));
  
  const result = argArray.every((v) => typeof v === "number")
  console.log(result);
}

// ES6
function checkNum(...argArray) {
  // argArray로 argument를 Array로 변경할 수 있음
  console.log(toString.call(argArray));
  
  const result = argArray.every((v) => typeof v === "number")
  console.log(result);
}

const result = checkNum(10,2,3,4,5,"55");   // false

5. Set, WeakSet - 특별한 자료구조

Set과 WeakSet은 Array를 개선한 자료구조 입니다.

 1)  Set

중복없이 유일한 값을 저장하기 위해 사용. 이미 존재하는지 체크후 배열을 생성할때 유용

let mySet = new Set();
console.log(toString.call(mySet));     // [object Set]

mySet.add( "crong" );
mySet.add( "hary" );
mySet.add( "crong" );

// 배열에 "crong"이 있는지 확인
console.log(mySet.has("crong"))     // true

mySet.forEach(function(v) {
	console.log(v);         // "crong" "hary"
})

mySet.delete("crong");  // "hary"

 2)  WeakSet

참조를 가지고 있는 객체만 저장이 가능합니다. 객체형체를 중복없이 저장하려고 할 때 유용합니다.

let arr = [1,2,3,4];
let arr = [5,6,7,8];
let obj = {arr, arr2};
let ws = new WeakSet();

ws.add(arr);

// ws.add(111);
// ws.add("111");
// ws.add(null);   // => 모두 집어넣을수 없는 형태
ws.add(function(){});  // => 집어넣을 수 있는 형태

ws.add(arr2);
ws.add(obj);

arr = null;

console.log( ws );
// WeakSet {(4) [5, 6, 7, 8], [1, 2, 3, 4], function, Object {arr: Array(4), arr2: Array(4)}}
console.log( ws.has(arr), ws.has(arr2) )
// false, true  =>  실제로는 null로 인해 지워져있는 상태

6. Map, WeakMap

Object를 개선한 자료구조입니다.

 1) Map

key / value 뿐만 아니라 관련 정보도 저장할 수 있습니다.

 let wm = new WeakMap();
 let myfunc = function() {};

// 이 함수가 몇번 실행됐는지 확인 할 때
wm.set(myfunc, 0);
console.log(wm);   // 0번째 돌아감

for (let i = 0; i < 0; i++) {
  count = wm.get(myfunc);   // get value
  count++;
  wm.set(myfunc, count);
}
console.log(wm);   // 10번째 돌아감

myfunc = null;
console.log(wm.get(myfunc));
// undefined -> null로 제거하였음

  2) WeakMap

let wm = new WeakMap();
let myfunc = function(){};