자바스크립트 ES6 화살표 함수 기본

 화살표 함수란 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법으로, 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌다.

// 화살표 함수
let func = (arg1, arg2, ...argN) => expression

// 함수 표현식
let func = function(arg1, arg2, ...argN) {
  return expression;
}

 → 인자(arg1 ...argN)를 받는 함수 func가 만들어지고, 함수 func는 화살표(⇒) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환한다.

 

👾 화살표 함수로 함수를 정의할 때 생략할 수 있는 규칙

 1. 매개변수가 한 개일 때, 소괄호()를 생략할 수 있다.

// 매개변수가 한 개일 때, 소괄호를 생략할 수 있다.
const square = x => { return x * x }

// 위 코드와 동일하게 동작
const square = ( x ) => { return x * x }

// 매개변수가 없는 경우엔 소괄호를 생략할 수 없다.
const greeting = () => { return 'hello world' }

 

 2. 함수 코드 블록 내부가 하나의 문으로 구성되어 있다면 중괄호{}를 생략할 수 있다. 이때 코드 블록 내부의 문이 값으로 평가될 수 있으면 return 키워드를 생략할 수 있다.

const squre = x => x * x

// 위 코드와 동일하게 동작
const square = x => { return x * x }

// 위 코드와 동일하게 동작
const square = function (x) {
  return x * x
}

 

👾 화살표 함수의 특징

화살표 함수는 일반 함수와는 다른 몇가지 특징을 가지고 있다.

 1. 화살표 함수는 함수 표현식의 일종으로 호이스팅 되지 않는다. 

 2. 화살표 함수에는 ‘this’가 없다.

 3. 화살표 함수에는 ‘arguments’가 없다.

 

 → 이번 글에서는 화살표 함수의 기본만 정리하기로 하고, 화살표 함수의 특징은 <화살표 함수 심화> 이 곳을 참고하면 좋을 것 같다 🙂 

 

 

 

👩🏻‍💻 화살표함수 예제 코드들

let sum = (a, b) => {
  let result = a + b;
  return result; 
};

sum(1, 2) // 3

const ask = (question, yes, no) => {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  () => alert("동의하셨습니다."),
  () => alert("취소 버튼을 누르셨습니다.")
);

// 함수 선언방식
function add(x, y){ 
  return x + y;
}

// 함수 표현식
let add = function (x, y) {
  return x + y;
}

// 화살표 함수
const add = (x, y) => x + y;

 

---

자료출처: JAVASCRIPT.INFO

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊