[자바스크립트] 화살표 함수 => 사용법

이번 시간에는 일반 함수를 화살표 함수로 변경 방법을
몇 가지 예제를 통해서 알아보겠습니다.

들어가기 앞서 함수의 2가지 개념인
함수 표현식과 함수 선언문의 차이를 알아야 합니다.

---

함수의 2가지 선언방식

함수 표현식

선언된 함수보다 상단에 있는 구문은 실행이 불가능합니다.

showError()

let showError = function (){
    console.log("error")
}

 

함수 선언문(자주사용)

자바 스크립트는 순차적으로 위에서 아래로 읽어오지만 함수 선언문은 시작 전 function을 모두 저장해두기 때문에 아래의 코드는 실행됩니다.

showError()

function showError(){
    console.log("error")
}

---

화살표 함수(=>)

자바스크립트 ES6에서 자주 사용되기 때문에 사용법을 익혀두면 좋습니다.

첫 번째 예제(일반)

function showError(){
    console.log("error")
}
showError()

첫번쨰 예제(화살표)

let showError = () => {
    console.log("error")
}
showError()

---

두 번째 예제(일반)

const welcome = function(name) {
    const msg=`hi, ${name}`;
    console.log(msg);
}
welcome("bebe");

두번쨰 예제(화살표)

const welcome = (name) => {
    const msg=`hi, ${name}`;
    console.log(msg);
}
welcome("bebe");

---

세 번째 예제(일반)

인수가 2개이고 return문이 있습니다

const sum = function (num1, num2) {
    return num1 + num2;
}
console.log(sum(1,2)) //3

 

세 번째 예제(화살표)

함수 안에 코드가 한 줄인 경우에는 {} 대신 ()를 사용하여 자동으로 return문을 사용하게 변경이 가능합니다

const sum = (num1, num2) => (num1 + num2);
console.log(sum(1,2)) //결과 3

---

이상으로 함수 선언문과 함수 표현식의 차이점
그리고 화살표 함수로 변경하는 방법에 대해서 알아보았습니다.