🛹 [JS] | 화살표 함수, ${ }

📌 화살표 함수

설명 출처1 설명 출처2

• 익명 함수, 이름이 없고 파라미터만 가지고 있다.
• 파라미터1, 2, 3... => return 값

let func = (arg1, arg2, ...argN) => expression
👇 (=)
let func = function(arg1, arg2, ...argN) {
  return expression;
};

º 인자 arg1..argN를 받는 함수 func
º 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환

• () => { ... } : 매개변수가 없을 경우
  x => { ... } : 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
  (x, y) => { ... } : 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

let sayHi = () => alert("안녕하세요!");
sayHi();

---

let double = n => n * 2;
👇 (=)
let double = function(n) { return n * 2 }

alert( double(3) ); 🧾 6

---

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

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

• x => { return x * x }    =    x => x * x
  : 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다.

• () => { return { a: 1 }; }    =    () => ({ a: 1 })
  : 객체 반환시 소괄호를 사용한다.

• () => { const x = 10; return x * x; }; : 본문이 여러 줄인 화살표 함수
  중괄호는 본문 여러 줄로 구성되어 있음을 알려준다.
  중괄호 안에 평가해야 할 코드를 넣어주어야 한다.
  return 지시자를 사용해 명시적으로 결괏값을 반환해 주어야 한다.

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

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

🔹 `$ { }`

템플릿 리터럴

`${value}`

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const input = parseInt(prompt("10미만 숫자를 입력하시오"));
    if (input < 10) {
      resolve(input);
    } else {
      reject(`오류: ${input}은 10 이상이거나 숫자가 아닙니다.`);
    }
  }, 2000);
});

º 템플릿 리터럴의 `${ }` 표현식은 처리된 값을 문자열로 반환한다.
º 템플릿 리터럴은 `` 으로 선언할 수 있다.
º ${} 을 이용해 표현식 삽입 (Expression interpolation) 으로 읽기 쉬운 문자열을 만들 수 있다.
º 표현식에 작성된 값은 문자열로 변환된다.