ECMAScript에 대해 알아보자

흔히 ES6이라 불리는 javaScript언어의 표준이다.
아직도 ES6전 코딩방식을 하고 있다면 지금부터 습관을 바꿔 보도록 해보쟈 !!!🔥🔥🔥🔥

1. destructuring assignment

구조분해할당이라 불린다.
배열과 객체의 속성을 해체하여 그값을 개별 변수에 담을 수 있게 하는 표현식 입니다.

배열

//선언에서 분리한 할당
let a, b, rest;
[a,b] = [10,20];
console.log(a);//10
console.log(b);//20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

//기본 변수 할당 
let x = [1,2,3,4,5];
let [y,z] =x;
console.log(y); // 1
console.log(z); // 2

//기본값 
let a,b;
[a = 5, b =7] = [1];
console.log(a); // 1 -> 값이 재할당 
console.log(b); // 7

//변수값 교환하기 
let a = 1;
let b = 3;
[a,b] = [b,a];
console.log(a); // 3
console.log(b); // 1

//함수가 반환한 배열 분석 
function f(){
  return [1,2];
}
let a,b,;
[a,b] = f();
console.log(a); // 1
console.log(b); // 2

//일부 반환값 무시하기 
function f(){
  return [1,2,3];
}
let [a, ,b]=f();
console.log(a); // 1
console.log(b); // 3
//반환값을 모두 무시 할 수도 있다. 
[,,] = f();

//변수에 배열의 나머지를 할당하기 
let[a,...b] = [1,2,3];
console.log(a); // 1
console.log(b); // [2,3]

객체

//기본할당 
let o = {p:42, q:ture};
let {p,q} = o;
console.log(p); // 42
console.log(q); // true

//선언없는할당 
let a,b;
({a,b} = {a:1, b:2}); //->전체 ()가 없으면 에러

//새로운 변수 이름으로 할당하기 
let o = {p:42, q:true};
let {p:foo, q:bar} = o;
console.log(foo); // 42
console.log(bar); // true

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

//기본값 갖는 새로운 이름의 변수에 할당하기 
let {a : aa =10, b: bb =5} = {a:3};
console.log(aa); // 3
console.log(bb); // 5

응용해보기

//ES6
const obj2 = {
  h: 'Eich',
  i: {
    j: 'Jay'
  }
}
const { h, i: { j }, k } = obj2;
console.log(h, j, k); // 'Eich', 'Jay', undefined

h변수 값을 자동으로 obj에서 찾아 넣어주고 j값도 obj2안의 i 객체에서 찾아 넣어 줌으로써 한줄의 코드로 객체를 해체해버리는것이다. 또한 위의 k처럼 obj2에 없는 변수를 선언했을 경우, 자동으로 udefined값이 들어가기 때문에 에러가 발생하지 않는다.

2. Spread operator / Rest parameters

Spread operator
전개구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 또는 요소로 확장하여 , 0개 이상의 키 값의 쌍으로 객체로 확장 시킬 수 있습니다.
Rest parameters
정해지지 않은 수 인수를 배열로 나타낼 수 있게 합니다.

이터러블 : Array, String, Map, Set, DOM 구조 이며, interator를 생성해서 next()로 순회 할 수 있는 자료구조가 이터러블이라고 생각하면 된다.

1. Spread operator 배열 에서 사용하는 방법

일반적으로 배열의 엘리먼트를 함수의 매개변수로 사용하조가 할때 apply를 사용하였습니다.
그러나 ES6부터는 Spread operator로 가능합니다.

//ES5
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);
//ES6
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

//ES5
var arr = [1, 2, 3];
console.log(arr.concat([4, 5, 6])); // [ 1, 2, 3, 4, 5, 6 ]
// ES6
const arr = [1, 2, 3];
// ...arr은 [1, 2, 3]을 개별 요소로 분리한다
console.log([...arr, 4, 5, 6]); // [ 1, 2, 3, 4, 5, 6 ]

🌸 팁 배열 복사 !!

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4); 

// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

//////////

var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// 이제 배열 a 도 영향을 받음: [[], [2], [3]]

1레벨 깊이에서는 Spread operator가 효과 적으로 동작 하지만 , 다차원 배열 복사에는 적합하지 않을 수 있습니다.

2. Spread operator 함수에서 사용하기

// ES6
function foo(x, y, z) {
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}
const arr = [1, 2, 3];
foo(...arr);// Array를 받아서 각 매개변수로 전달되었다.

3. Spread operator 객체에서 사용하기

const o1 = { x: 1, y: 2 };
const o2 = { ...o1, z: 3 };
console.log(o2); // { x: 1, y: 2, z: 3 }
const target = { x: 1, y: 2 };
const source = { z: 3 };
// Object.assign를 사용하여도 동일한 작업을 할 수 있다.
// Object.assign은 타깃 객체를 반환한다
console.log(Object.assign(target, source)); // { x: 1, y: 2, z: 3 }

Rest

함수의 마지막 파라미터 앞에 ...를 붙여 모든 나머지 인수를 표준 자바스크립트 배열로 대체 합니다.
마지막 파라미터만 Rest파라미터가 될 수 있습니다.
...rest파라미터 다음으로 ,(콤마)가 올 수 없습니다.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a); 
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs); 
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

3. Default parameters(기본값 매개변수)

기본값 함수 매개변수를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다.

function multiply(a, b) {
  return a * b
}
multiply(5, 2)  // 10
multiply(5)     // NaN !

multiply호출시 매개변수 b가 없으면 NaN을 반환합니다.
이를 방지 하기 위해 매개변수가 없을시 아래 코드와 같이 1로 설정하는 방식을 사용하곤 했습니다.

function multiply(a, b) {
  b = (typeof b !== 'undefined') ?  b : 1
  return a*b
}

multiply(5, 2)   // 10
multiply(5)      // 5

그러나 ES6에선 간단히 기본값을 설정 할 수 있습니다.

function multiply(a, b = 1) {
  return a*b
}
multiply(5, 2)          // 10
multiply(5)             // 5
multiply(5, undefined)  // 5

4.Template literals

일반 문자열과 비슷해 보이지만 'or"같은 통상적인 따옴표 대신 백틱(backtick)`을 사용하다.
백틱 안에서 표현되는 것은 그대로 출력된다. 띄어쓰기나,줄바꿈도 가능 그대로 출력된다 (개이득)

+연사자를 사용하지 않아도 새로운 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션 (String Iterpolation)이라 한다.

const name = "당근"
const age = 26
console.log(`my name is ${name} 그리고 나는 ${age}살이다.`);

5.Arraw Functions (화살표 함수)

• 화살표 함수 표현은 function표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않는다.
• 화살표 함수는 항상 익명이다.
• 메소드 함수가 아닌곳에서 가장 적합, 생성자로서 사용할 수 없습니다.

  const add = function (x, y) {
      return x + y
    }

위에 코드를 화살표 함수를 이용해서 변경해봅시다

const add = (x, y) => {
      return x + y
    }

위에 코드 에서 return 을 생략 할 수 있습니다.

const subtract = (x, y) => x - y

필요에 따라 소괄호를 붙일 수도 있습니다.

 const multiply = (x, y) => (x * y)

파라미터가 하나 일결우 소괄호 생략이 가능합니다.

const divideBy10 = x => x / 10

화살표 함수를 이용한 클로저의 이용입니다.

const adder = x => {
      return y => {
        return x + y
      }
    }

더 간단히 줄이면

const adder = x => y => { x + y }

🌸 더 알아보기 THIS!!!!!🔥🔥🔥🔥🔥

화살표 함수는 자신의 this가 없습니다.
대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용됩니다. 즉 화살표 함수는 바로 바깥 범위에서 this를 찾는다. !!

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this|는setInterval이 아닌 Person 객체를 참조
  }, 1000);
}

6.for … of loop

반복가능한 객체 (Array,Map,Set,String,argument객체등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.

for (variable of iterable) {
  statement
}

• variable
  각 반복에 서로 다른 속성값이 variable에 할당됩니다.
• iterable
  반복되는 열거가능(enumerable)한 속성이 있는 객체.

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

!!!!헷갈리지 말기 !!!!!
for...in 루프는 객체의 모든 열거가능한 속성에 대해 반복합니다.

var obj = {a: 1, b: 2, c: 3};
    
for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

이상 ES6의 새로운 개념들을 익혀 보았습니다. !!! ✌🏻🥕✌🏻