ES6+ (Grammer)

ES6 문법을 기준으로 작성합니다...! 👨🏻‍💻

기본적인 사용법보다는 응용 위주로 다룹니다.

Keyword : high-order funcion, ES6+

0. 시작

JS파일을 생성하고, 귀찮은console.log는 줄여준다 :)

const log = console.log;

1. sort

배열의 각 객체에 접근하여 key값에 따라 정렬한다!

// 1. sort
const todos = [
  { id: 3, name: 'Jung' },
  { id: 1, name: 'Kim' },
  { id: 2, name: 'Lee' }
];

const compare = key => (a, b) => (a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0);

log(todos.sort(compare('id')));
// [ { id: 1, name: 'Kim' },
//   { id: 2, name: 'Lee' },
//   { id: 3, name: 'Jung' } ]

2. forEach

forEach는 for 문에 비해 성능이 좋지는 않지만, 가독성이 아주 좋다 :)
리턴값은 undefined이다.
각 값에 접근하여 prototype의 메소드를 실행한다.
화살표함수를 사용하여 this를 인스턴스에 매칭한다.

function Square() {
  this.array = [];
}

Square.prototype.multiply = function (arr) {
  return arr.forEach((item) => this.array.push(item * item));
}

const square = new Square();
square.multiply([1,2,3]);
log(square.array);
// [ 1, 4, 9 ]

3. map

forEach와 마찬가지로 화살표함수를 사용하여 this를 인스턴스에 매칭한다.

// 3. map
function Prefixer(prefix) {
  this.prefix = prefix;
}

Prefixer.prototype.prefixArr = function (arr) {
  return arr.map(val => this.prefix + val);
}

const addWebKit = new Prefixer('-webkit-');
const preArr = addWebKit.prefixArr(['linear-gradient', 'border-radius']);
log(preArr);
// [ '-webkit-linear-gradient', '-webkit-border-radius' ]

4. reduce

reduce를 호출할 때는 언제나 초기값을 전달하는 것이 보다 안전하다.
(0 을 넣지 않으면 아래는 에러.)

// 4. reduce
const products = [
  { id: 1, price: 100 },
  { id: 2, price: 200 },
  { id: 3, price: 300 }
];

const total_price = products.reduce((pre, curr) => {
  return pre + curr.price;
}, 0)
log(total_price);
// 600

5. find

find는 ES6에서 생긴 메소드이다.
id가 2인 객체의 value를 가져왔다.
Kim

const users = [
  { id: 1, name: 'Lee' },
  { id: 2, name: 'Kim' },
  { id: 2, name: 'Choi' },
  { id: 3, name: 'Park' }
];

const findUser = users.find(item => item.id === 2);
log(findUser.name);

6. default parameter

함수의 파라미터에 기본값을 줄 수 있다.

// 6. Default Parameter
const plus = (a = 0, b = 0) => a + b;
log(plus(1, 2)); // 3
log(plus(3))     // 3

7. rest

arguments를 거의 대체할 수 있다.

// 7. rest
const sum = (...rest) => {
  return rest.reduce((acc, cur) => acc + cur, 0);
} 
log(sum(1,2,3,4,5));
// 15

8. spread

너무나도 자주 사용하는 스프레드 연산자 :)
피연산자는 반드시 iterable 해야한다...!

// 8. spread
const foo = (x, y, z, a, b) => console.log(`x: ${x}, y: ${y}, z: ${z}, a: ${a}, b: ${b}`); 
foo(1, 2, ...[3, 4], 5, ...[6, 7]); 
// x: 1, y: 2, z: 3, a: 4, b: 5

9. Object rest/spread property

최신 문법으로, 적용되지 않는 브라우저도 꽤 있다...
Object.assgin({}, ~)을 대체할 수 있다...!

// 9. Object rest/spread property
// - Spread
const obj_num = { x: 1, y: 2, ...{ z: 3, a: 4 }, b: 5 };
log(obj_num); // { x: 1, y: 2, z: 3, a: 4, b: 5 }

// - Rest
const {x, y, ...z} = obj_num;
log(x, y, z) // 1 2 { z: 3, a: 4, b: 5 }

// Object Merge
const merged = { ...{x: 1, y: 2}, ...{a: 4, b: 5} };
log(merged); // { x: 1, y: 2, a: 4, b: 5 }

// Change Object Property
const changed = { ...obj_num, ...{y: 20, z: 30} };
log(changed); // { x: 1, y: 20, z: 30, a: 4, b: 5 }

// Add Object Property
const added = { ...obj_num, ...{c: 6} };
log(added); // { x: 1, y: 2, z: 3, a: 4, b: 5, c: 6 }

10. Computed Property Name

연산 프로퍼티 네임...!
객체의 key값을 대괄호([])로 감싸야한다.
자세히보면 꽤 신기하다.

// 10. Computed Property Name
const pre_obj = 'pre';
let i = 0;
const computed_obj = {
  [`${pre_obj}-${++i}`] : i,
  [`${pre_obj}-${++i}`] : i,
  [`${pre_obj}-${++i}`] : i,
}
log(computed_obj); 
// { 'pre-1': 1, 'pre-2': 2, 'pre-3': 3 }

11. Shorted Method Expression

내가 자주 사용하는 화살표 함수는 this를 정적으로 지정한다.
그래서 프로퍼티 메소드에는 사용하지 않는 것이 좋다.
그러므로 축약 메소드 표현을 사용하자...!

// 11. Shorted Method Expression
const hello_obj = {
  name: 'hong',
  hello() {
    log(`${this.name}, Hello!`)
  }
}
hello_obj.hello(); 
// hong, Hello!

12. proto Inheritance

proto를 이용하여 부모 객체를 지정해줄 수 있다.

// 12. __proto__ Inheritance
const parent = {
  name: 'parent',
  sayHi() {
    log(`I'm ${this.name}!`)
  }
}
const child = {
  __proto__: parent,
  name: 'child'
}
parent.sayHi(); // I'm parent!
child.sayHi();  // I'm child!

13. Array Destructuring ( 구조 할당 )

할당 기준은 배열의 인덱스이다.
코드 축약에 도움된다. 자주 사용하자 :)

// 13. Array Destructuring
const arr13 = [1,2,3,4,5];
const [dest1, dest2, ...dest3] = arr13;
log(dest1, dest2, dest3);
// 1 2 [ 3, 4, 5 ]

// with Date
const now = new Date();
const f_date = now.toLocaleDateString().split('-');
const [year, month, day] = f_date;
log(`오늘은 ${year}년 ${month}월 ${day}일 입니다...`);
// 오늘은 2019년 6월 10일 입니다...

14. Object Destructuring

할당 기준은 객체의 키이다.
배열 구조 할당과 비슷하지만 중괄호 사용법이 꽤 까다롭다.

// 14. Object Destructuring
const obj14 = {none: 'none', first: 'React', second: 'is so difficult :)'};
const { first, second, n } = obj14; // 키와 일치하지 않으면 undefined!
log(first, second, n);              // React is so difficult :) undefined

const { p1, p2, p3 = 'c' } = { p1: 'a', p2: 'b' };
log({p1, p2, p3}); // { p1: 'a', p2: 'b', p3: 'c' }

// array obj filtering
const user = [
  { id: 1, content: '다현', checked: false },
  { id: 2, content: '나연', checked: false },
  { id: 3, content: '소희', checked: true }
];
const checkedUser = user.filter(({checked}) => checked);
log(...checkedUser); // { id: 3, content: '소희', checked: true }

// nested obj
const user2 = {
  name: '다현',
  birth: {
    b_year: '1998',
    b_month: '5',
    b_day: '28'
  }
};

const { birth: { b_year, b_month, b_day } } = user2;
console.log(`다현의 생년월일은 ${b_year}년 ${b_month}월 ${b_day}일이다~`);
// 다현의 생년월일은 1998년 5월 28일이다~

---

👏🏻 👏🏻 👏🏻