화살표 함수: () => {}

0. 기본정보

#스파르타코딩클럽 #부트캠프 #주말자습
- 학습주제: JavaScript 문법

- 학습내용: 화살표 함수

- 참고자료: 모던 자바스크립트https://ko.javascript.info/arrow-functions-basics
- 학습일: 2024. 5. 11.

---

화살표 함수 기본

- 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있음

- 화살표 함수라는 이름은 문법의 생김새를 차용한 것

- 아래는 화살표 함수의 기본 예시 👇 👇

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

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {
  return a + b;
};
*/

console.log( sum(1, 2) ); // 3

• 'function' 삭제
• 매개변수를 감싼 괄호('()') 옆에 화살표 기호('=>') 기입
• 중괄호('{}') 삭제와 동시에 함수 내부에 'return'도 삭제

인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다 👇 👇

let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일합니다.

console.log( double(3) ); // 6

인수가 하나도 없을 땐 괄호를 비워놓을 수 있으나, 괄호는 생략할 수 없다 👇 👇

let sayHi = () => console.log("안녕하세요!");

sayHi();

함수를 동적으로 만들 수도 있다 (아래 예시 👇 👇)

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요!");

welcome();

본문이 여러 줄인 화살표 함수  (아래 예시 👇 👇)

let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

alert( sum(1, 2) ); // 3