[JavaScript / ES6] Arrow function 알아보기

💡 실습 포인트!

💜 함수를 만드는 이유 살펴보기

• 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때, 나중에 재사용하기 위해서 사용한다.
• 입출력 기능을 만들고 싶을 때 사용한다.

 

📌 입출력 기능이란

• 입출력 기능을 살펴보기 전에 함수부터 살펴보자면, 함수는 수학에서 온 개념으로 input 을 넣었을 때 뭔가 새로운 output 을 출력해주는 박스같은 것이다.
• 예를 들어, f(x) = x + 2 라는 식이 있을 때 f(2) 는 4가 되는데, 이 때 f(x) 가 x 에 2를 더해주는 박스, 즉 함수에 해당하는 것이다.

 

function add2(x){
  return x + 2
}

• 그리고 프로그래밍에서는 위와 같은 문법으로 함수를 표현할 수 있다.
• 함수의 소괄호 안에는 input 역할을 하는 파라미터 x 가 있고, 함수 내에 return 이 output 역할을 한다.
• 이렇게 소괄호 안에 뭔가 넣고 특정한 과정을 거친 후에 return 을 통해 출력해주는 것이 바로 함수의 입출력 기능이다.

---

💜 Arrow function 문법 알아보기

• ES6 문법 이후부터는 arrow function 이라는 JavaScript 에서 함수를 만들 수 있는 문법이 새로 등장했다.

// 함수 만드는 방법 1.
function 함수명(){
  // 실행할 코드
}

// 함수 만드는 방법 2.
var 함수명 = function(){
  // 실행할 코드
}

• 기존에 JavaScript 에서는 함수를 위와 같이 만든 후에 함수명(); 으로 코드를 실행했다.

 

var 함수명 = () => {
  // 실행할 코드
}

• function 이라는 길고 복잡한 키워드를 사용하여 만들던 함수를 이제는 ES6 신문법을 사용하여, 위와 같이 화살표(=>)만을 가지고도 만들 수 있게 되었다.

---

💜 Arrow function 문법 장점

🤍 입출력 constructor 를 만들 때, 보기가 쉽다.

let func1 = (num) => { return num + 10};
func1(5); // 15

---

🤍 파라미터가 1개일 때 소괄호 생략이 가능하다.

let func2 = num => { return num + 10};
func2(5); // 15

---

🤍 코드가 한 줄이면 중괄호 및 return 도 생략이 가능하다.

let func3 = num => num + 10;
func3(5); // 15

---

💜 Arrow function 문법 예시

🤍 forEach 콜백함수

[1,2,3,4].forEach(function(el){
	console.log(el);  // 1,2,3,4
});

[1,2,3,4].forEach( el => console.log(el) );  // 1,2,3,4

---

🤍 eventListener

<button id="btn">버튼</button>

 

document.getElementById('btn').addEventListener('click', function(){
	console.log(this);  // <button id="btn">버튼</button>
});

document.getElementById('btn').addEventListener('click', (e)=>{
	console.log(this);  // window
	console.log(e.currentTarget);  // <button id="btn">버튼</button>
});

• 일반 function eventListener 에서 this 는 e.currentTarget
• arrow function eventListener 에서 this 는 function 밖의 this 그대로 사용

---

🤍 Object 안의 함수

let obj3 = {
    func3 : () => {
    	console.log(this);
    }
}

obj3.func3();  // window