ES6 - Arrow function

Arrow Function(화살표 함수)은 함수를 더 간결하게 작성할 수 있는 문법적인 편의를 제공하는 JavaScript의 기능이다.

• 기존함수

1. 
function 함수(){
  // 함수 본문
}
2. 
var 함수 = function(){
  // 함수 본문
}

• 화살표 함수(Arrow function)

var 함수 = () => {
  // 함수 본문
}

(param1, param2, ..., paramN) => { 
  // 함수 본문
}

---

화살표 함수를 쓰는 이유?

함수 문법을 쓰는 이유는

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

화살표 함수를 사용하면 입출력기능을 직관적으로 표현해준다.

const sum = (a, b) => a + b;

화살표 함수는 함수를 더 간결하게 작성할 수 있는 문법을 제공한다. 함수 선언문이나 함수 표현식에서 사용되는 일반적인 함수보다 간결한 문법을 가지고 있고, 불필요한 부분을 줄여서 코드를 간소화할 수 있다.

---

화살표 함수의 특징

• this의 동작
  화살표 함수는 자신만의 this를 생성하지 않고, 상위 스코프의 this를 그대로 사용한다.

 document.getElementById('btn').addEventListener('click', (e) => {
    console.log(this); // 출력 : window
  });

  var obj = {
    function: () => {
      return this; // 출력 : window
    },
  };

• arguments 객체 사용 불가
  화살표 함수는 자신만의 arguments 객체를 생성하지 않고, 상위 스코프의 arguments 객체를 그대로 사용한다.
• new 키워드 사용 불가
  화살표 함수는 생성자 함수로 사용될 수 없다.

예시

1. 파라미터가 없는 함수

// ES6 화살표 함수 예시 (인자 없음)
const sayHello = () => {
  console.log("안녕");
};

sayHello(); // 출력: 안녕

2. 파라미터가 1개

// ES6 화살표 함수 예시 (인자 1개)
const greet = name => {
  console.log(`안녕하세요, ${name}님!`);
};

greet("철수"); // 출력: 안녕하세요, 철수님!

3. 여러 개의 파라미터

// ES6 화살표 함수 예시 (인자 여러 개)
const add = (a, b) => {
  return a + b;
};

console.log(add(3, 5)); // 출력: 8

4. 간단한 입출력

// ES6 화살표 함수 예시 (간단한 반환문)
const multiply = (a, b) => a * b;

console.log(multiply(2, 4)); // 출력: 8