[D+44] 화살표 함수, 구조분해 할당, this

 

D+44

-  화살표 함수, 구조분해 할당, this -

(화살표 함수, 구조분해 할당, this)

 

---

 

 

화살표 함수

 

 

함수 표현식

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

만약 매개변수 x, y를 입력받아 두 수를 더한 값을 리턴하는 함수를 만들고자 할때

우리는 위의 코드를 생각할 것이다.

 

해당코드는 기존에 우리가 알고 있는 함수 표현식으로 우리는 해당 함수 표현식을 더욱 간단하게 표현할 수 있다.

 

화살표 함수

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

바로 화살표 함수이다.

 

const add = (x, y) => x + y 
const add = (x, y) => (x + y)   // O, 정상 작동(소괄호 사용가능)
const add = (x, y) => { x + y } // X, undefined 리턴 (중괄호 사용 불가능)

화살표 함수는 function 키워드를 화살표(=>)로 대체가 가능하며,

함수 안에 return문만 있을 경우에 return 생략이 가능하다.

 

또한 파라미터가 한 개일 경우에 소괄호도 생략이 가능하다.

(단, 중괄호({})는 사용이 불가능하다)

 

화살표 함수 특징

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

 

•화살표 함수의 실행은 this를 결정짓지 않는다.

 

화살표 함수 만들어보기

const adder = function(x) {
  return function(y) {
    return x + y
  }
}
adder(5)(7) // 12

여기 x값과 y값을 입력받아 두 수를 더해 리턴시키는 함수 표현식으로 표현된 함수식을

화살표 함수로 나타내 보려고 한다.

 

1 > function 키워드를 화살표(=>)로 대체해준다.

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

 

2 > 안쪽부터 순서대로 return을 없애준다.

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

⬇️

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

완성!

 

 

---

구조 분해 할당

•배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

 

 

구조 분해 할당

var x = [1, 2, 3, 4, 5];
var [y, z] = x; // 구조 분해 할당
console.log(y); // 1
console.log(z); // 2

할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지를 정의한다.

 

 

---

this 키워드

•함수 실행시 호출방법에 의해 결정되는 특별한 객체

 

•함수 실행시 결정되므로 실행되는 맥락에 따라 다르게 결정됨

 

 

'this'를 바인딩하는 5가지 패턴

패턴	바인딩되는 객체	설명
Method 호출	부모 객체	하나의 객체에 값과 연관된 메소드를 묶어서 사용할 때 주로 사용함
new 키워드를 이용한 생성자 호출	새롭게 생성된 (new) 인스턴스 객체	객체 지향 프로그래밍에서 주로 하용함
.call 또는 .apply 호출	첫번째 인자로 전달된 객체	this 값을 특정할 때 사용하며 특히 apply의 경우 배열의 엘리먼트를 풀어서 인자로 넘기고자 할때 유용함

패턴	바운딩되는 객체 (브라우저)	바인딩되는 객체 (node.js)
Global	window	module.exports
Function 호출	window	global

 

 

Method 호출

메소드 호출은 객체에 담긴 함수, 즉 부모가 있는 것이라고 볼 수 있다.

 

즉, '객체.메소드()'과 같이 객체 내에서 메소드를 호출하는 방법을 의미한다.

 

이때, 부모가 있는 녀석에서 메소드를 호출할 경우 this는 직계부모 오브젝트를 가져온다.

let counter1 = {
  value: 0,
  increase: function() {
    this.value++ // 메소드 호출을 할 경우, this는 counter1을 가리킵니다
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2

 

 

생성자 호출

new 연산자로 생선된 함수 영역의 this를 나타내며 이때의 this는 생성자를 나타낸다.

class Counter {
  constructor() {
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스입니다
  }
  increase() {
    this.value++
  }
  decrease() {
    this.value--
  }
  getValue() {
    return this.value
  }
}

let counter1 = new Counter() // 생성자 호출
counter1.increase()
counter1.getValue() // 1