Immersive Prep - ES6 Practice

화살표 함수에 대하여

사실상 초기때에는 못쓰게 하였지만 이제부터 사용해보라고 한 화살표함수에 대해서 기록을 해본다.

길었던 코드길이가 화살표 함수로 인하여 간단해 지는것을 보고 이해만 잘한다면 잘쓰이겠다라고 생각이 들게 만들었다.

 

MDN에서는 다음과 같이 정의를 해놓았다.

 

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

 

ES6에서 새로 도입한 화살표 함수(arrow function)와 일반 함수를 비교해봅시다.

 

ES6란?

[ES6는 ECMA라는 국제 기구에서 만든 ECMAScript 표준 문서의 6번째 개정판 문서에 있는 표준 스펙입니다. ES2015라고도 쓰는데, 6번째 버전이 2015년도에 나왔기 때문입니다. ECMAScript의 7번째 버전은 ECMAScript7 또는 ES7라고 쓰고 2016년에 나왔기 때문에 ES2016이라고 부릅니다.]

 

화살표 함수

보통 함수 표현식을 축약한 형태로 표시됩니다.

 

함수 표현식

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

화살표 함수

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

 

화살표 함수는 function 키워드를 화살표로 축약해서 표시할 수 있습니다.

화살표 함수의 특징 중 하나는 return을 생략할 수 있습니다.

이 때 주의해야 할 점은 {} 중괄호(curly brace)는 사용하면 안됩니다.

() 소괄호(parentheses)를 사용하는 것은 가능합니다.

이는 일반적인 수식에서의 "괄호 치기"와 동일합니다.

const add = (x, y) => x + y

const add = (x, y) => { x + y } // X, 에러 발생
const add = (x, y) => (x + y)   // O, 정상 작동

 

화살표 함수는 클로저를 표현할 때 더욱 강력합니다.

다음은 클로저의 한 예입니다.

 

함수 표현식

 

const adder = function(x) {

return function(y) {

return x + y

}

}

adder(5)(7) // 12화살표 함수

 

먼저 function 키워드를 없애봅시다.

const adder = (x) => {

return (y) => {

return x + y

}

}

가장 안쪽 return부터 없애봅시다.

return 생략시에는 중괄호를 사용하지 않는 점을 기억하세요.

추가적으로, 파라미터가 단 한개라면, 소괄호를 생략할 수 있습니다.

이 점도 유의깊게 살펴보세요.

const adder = x => {

return y => x + y

}

이제 하나 남은 return도 생략해봅시다.

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

이와 같이 클로저는 연속된 여러 개의 화살표로 표시할 수 있습니다.

화살표 함수의 특징

화살표 함수는 다음과 같은 특징이 있습니다.

• call, apply, bind를 사용할 수 없습니다.

• this를 가지지 않습니다. this는 화살표 함수를 감싸고 있는 스코프의 실행 컨텍스트에 의해 결정됩니다.

  let foo = {
• bar: function() { // 메소드 호출시 this === foo const arrowfn = () => { console.log(this) // arrowfn을 감싸고 있는 함수 스코프의 실행 컨텍스트에 의해 결정됩니다 } arrowfn() } } foo.bar()질문
• • 콘솔에 this는 어떤 값으로 출력되나요?

let foo = {

  bar: function() {

     // 메소드 호출시 this === foo

 

       const arrowfn = () => {

            console.log(this) // arrowfn을 감싸고 있는 함수 스코프의 실행 컨텍스트에 의해 결정됩니다

}

 

arrowfn()

  }

}

 

foo.bar()

 

구조 분해 할당 반드시 알아야 할 유용한 예제 몇가지

 

function printObject({ name, age }) {
console.log(`이름은 ${name}, 나이는 ${age}`)
}printObject({
name: '김코딩',
age: 30
})

 

function printArray([ name, age ]) {
console.log(`이름은 ${name}, 나이는 ${age}`)
}printObject(['김코딩',30])

 

let currentUser = {
name: "김코딩",
company: {
name: "Coggle",
department: "Development",
role: {
name: "Software Engineer",
}
}
}//department만 바꾸고 싶을 때
let newUser = {
...currentUser,
company: {
...currentUser.company,
department: "Marketing"
}
}