[TIL] Immersive 04_2021.04.08

안녕! 오늘도 빠짐없이 블로그를 작성하기 위해 돌아왔지!
오늘 배운 내용을 블로그로 정리하면서 한번 더 보면 머릿속에 잘 기억이 남는거같아!
앞으로도 꾸준히 학습을 기록하자!

오늘은 Modern JavaScript 라는 것에 대해서 페어와함께 과제를 풀어가며 학습을 했어
차근 차근 정리해볼게!!

1. 화살표함수 (Arrow Function)

화살표 함수라는게 개발자들이 얼마나 귀차니즘이 심한지 알게해주는 첫번째 요소였어!..
아마도 내가 생각했을 땐 function쓰고 중괄호를 쓰고하는게 너무 귀찮아서 만든게아닐까?? 그러면서 코드는 함축적이고 더 빠르게 돌아갈 수 있는거지 !
이건 ES6문법에서 나왔다고 유튜브에서 봤어!

쉽게 생각하면 function을 생략할때 쓰는 것 !이라고 생각했는데 또 그것만 하는게 아니더라고!

화살표 함수 사용법

• function키워드를 화살표로 축약해서 표시

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

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

• 함수 안에 return문만 있다면 return도 생략 가능! 이때 {} 중괄호도 생략한다

 const add = (x,y) => x+y  // wow~~
 const add = (x,y) => {x+y} // undefined를 리턴 이렇게 사용하면 안돼!
 const add = (x,y) => (x+y)  // 소괄호는 사용가능! 

• 만약에 인자가 한개일 경우에 소괄호 생략도 가능하다구 !

  const add = x => x/10  // 정상작동 

• 만약에 함수 내의 표현식이 두줄 이상일 경우에는 return을 생략하기 보다는 중괄호과 return을 알아볼 수 있도록 명시적으로 써주는게 좋아!

  // bad
const getStudentAvg = arr => arr.filter(person => person.job === 'student').reduce((sum, person) => (sum + person.grade), 0)

// good
const getStudentAvg = arr => {
  return arr
    .filter(person => person.job === 'student')
    .reduce((sum, person) => (sum + person.grade), 0)
} 

• 화살표 함수로 클로저를 표현할 수 있어 ! (매우 강력한 표현)

 const adder = x => y => x + y

return문과 중괄호 function을 생략하다보면 이런식으로 코드를 쓸 수 있는데
클로저는 연속된 여러개의 화살표로 표시할 수 있어
각 화살표함수가 클로저라고 생각하면 좋아!

2. Spread/Rest 문법

Parameter, Argument

Argument: 함수를 실행할 때 넣는 값
parameter: 함수에서 받을 수 있는 변수

// value1과 value2가 parameter
function add(value1, value2) {
  return value1 + value 2
}

add(2, 3) // 2와 3이 argument

add(1, 2, 3, 4, 5) // parameter는 2개 밖에 없지만, argument는 2개를 초과할 수 있다.

파라미터 기본값

ES6부터 함수 parameter에 기본값을 설정할 수 있다.

const add = (x = 0, y = 0) => {
  // parameter x, y에 인수를 할당하지 않은 경우, 기본값 0을 할당한다.
  return x + y
}

console.log(add())	// 0
console.log(add(1, 2))	// 3

arguments

argument는 5개인데 parameter는 2개일 경우 어떻게 해야할까?
이런 경우에는 함수 내부에서arguments를 사용하면 된다.
arguments란 모든 argument를 유사배열 형태로 참조하는 값이다.

function something(value1, value2) {
  console.log(arguments)
}

something(2, 3) //{ "0": 2, "1": 3 }

something('a', 'b', 'c', 'd', 'e') // { "0": "a", "1": "b", "2": "c", "3": "d", "4": "e" }

rest parameter

ES6부터는 arguments를 사용하지 않는다.
rest parameter라는 기능을 이용해서 나머지 argument를 배열로 사용할 수 있다.
arguments와는 다르게 배열이다.

// 반드시 마지막 parameter에 ...을 붙여서 사용해야 한다.
const add = (a, b, ...rest) => {
  console.log(a)	// 5
  console.log(b)	// 3
  console.log(rest)	// [9, 2, 1, 6 ]
}
add(5, 3, 9, 2, 1, 6)

// 파라미터 이름은 자유롭게 할 수 있다.
const add2 = (one, two, ...args) => { 
}

// 아예 모든 파라미터를 ...으로 지정할 수도 있다.
const add3 = (...allValues) => { 
  console.log(allValues) // [1, 2, 3, 4, 5]
}
add3(1, 2, 3, 4, 5)

spread 연산자

ES6에 추가된 spread 연산자 기능을 이용하면
배열, 문자열 등의 iterable을 분해해서 개별요소로 만들 수 있다.
iterable은 간단하게 배열을 분해한다고 생각하면 된다.

const arr = ['a', 'b', 'c']
console.log(arr) // ['a', 'b', 'c']
console.log(...arr) // 'a' 'b' 'c'

const arr2 = [1, 2, 3]
console.log([...arr, ...arr2]) // ['a', 'b', 'c', 1, 2, 3]
// 배열 합치기에 사용할 수 있다.

const copiedArr = [...arr]
console.log(copiedArr) // ['a', 'b', 'c']
// 배열 복사에도 사용할 수 있다.

Object spread 연산자

ES6 이후에 ES9에는 Object 또한 spread 연산자 사용이 가능하다.

const obj1 = {a: 1, b: 2}
const obj2 = {c: 3}
console.log({...obj1, ...obj2}) // {a: 1, b: 2, c: 3}
// 객체 합치기에 사용할 수 있다.

const copiedObj = {...obj1}
console.log(copiedObj) // {a: 1, b: 2}
// 객체 복사에 사용할 수 있다.

const obj3 = {...obj1, b: 'b'}
console.log(obj3) // {a: 1, b: 'b'}
// 기존 객체의 값을 수정해서 새로운 객체 만들기에 사용할 수 있다.

Array 비구조화 할당 (구조분해할당)

Array destructuring은 배열의 값 추출을 더욱 쉽게 한다.
...과 함께 이용하면, 배열의 값을 좀 더 간편하게 할당할 수 있다.

const arr = [1, 2, 3]
const [one, two, three] = arr // 기본 destructuring

console.log(one)   // 1
console.log(two)   // 2
console.log(three) // 3

const arr2 = ['a', 'b', 'c', 'd', 'e', 'f']
const [a, b, c, ...rest] = arr2 // ...을 이용해서 나머지를 모두 배열 몰아넣는다.

console.log(a)     // 'a'
console.log(b)     // 'b'
console.log(c)     // 'c'
console.log(rest)  // ['d', 'e', 'f']

const arr3 = ['z', 'y', 'x']
const [x, y, z] = arr3 // 배열은 무조건 순서대로 할당된다.

console.log(x) // 'z'
console.log(y) // 'y'
console.log(z) // 'x'

Object 비구조화 할당 (구조분해할당)

Object 또한 비구조화 할당이 가능하다.

Array 비구조화 할당과 다른점은 순서대로가 아닌 key에 따라 할당되고 값(value)만 추출한다는 것이다.

const obj1 = {a: 1, b: 2, c: 3}
const {c, b, a} = obj1 // key의 값을 가져오므로 순서는 상관없다.

console.log(c) // 3
console.log(b) // 2
console.log(a) // 1

const obj2 = {aa: 1, bb: 2, cc: 3, dd: 4, ee: 5}
const {aa, bb, ...rest} = obj2 // ...을 이용해서 나머지를 모두 객체에 몰아넣는다.

console.log(aa)     // 1
console.log(bb)     // 2
console.log(rest)   // {cc: 3, dd: 4, ee: 5}