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

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

728x90

이번 시간에는 일반 함수를 화살표 함수로 변경 방법을

몇 가지 예제를 통해서 알아보겠습니다.

들어가기 앞서 함수의 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

이상으로 함수 선언문과 함수 표현식의 차이점

그리고 화살표 함수로 변경하는 방법에 대해서 알아보았습니다.

728x90

반응형

그리드형

from http://bebeya.tistory.com/1533 by ccl(A) rewrite - 2021-09-09 13:27:52