JS- 함수 표현식과 함수 선언문의 차이, 화살표 함수
저번 JS 파트에서 함수를 사용하는 방식 중
함수 선언문에 대해 알아보았습니다.
오늘은 함수 선언문과 비슷한 방식의 함수 표현식과 차이점에 대해 알아보고
함수를 간단하게 정리할 수 있는 화살표 함수에 대해 알아보겠습니다.
(1)
함수 표현식과 함수 선언문의 차이
함수 표현식과 함수 선언문의 차이는
함수 선언문은
function ex(매개 변수){
함수 본문(body);
return 결과값;
}
이런 식으로 function 키워드를 사용하여 작성했다면
함수 표현식은
let ex = function(매개 변수){
함수 본문(body);
return 결과값;
};
와 같이 변수를 선언하듯이 사용합니다.
함수 표현식의 특징은 마지막 괄호에
세미 콜론을 넣는다는 것입니다.
함수 표현식에 마지막 괄호에
세미 콜론을 넣는 이유는
let을 사용했기 때문입니다.
let을 사용했기 때문에 끝에 구분을 짓는
세미 콜론을 사용하는 것입니다.
함수 선언문과 함수 표현식의 차이에서
가장 중요한 것은
호출하는 방식에 있습니다.
함수 선언문은 선언하기 전에
호출을 하고 함수를 선언해도
결과 값이 진행됩니다.
하지만 함수 표현식은 선언하기 전에는
호출이 안되기 때문에
이 부분에서 큰 차이가 있습니다.
함수 선언문은 독립된 구문의 형태로
존재하게 되는데 이것이 의미하는 것은
함수 표현식을 보시면 알 수 있습니다.
함수 표현식은 변수를 사용하여 함수를 사용하는데
함수를 하나의 표현식으로 사용합니다.
그래서 함수 표현식은 합수 선언문과 달리
독립적인 형태가 아닌 어떤 표현식에
사용되는 형태로 사용되기 때문에
이 부분에서 차이가 있습니다.
함수 표현식과 함수 선언문을 사용할 때
주로 사용되는 것은 함수 선언문입니다.
이유는 함수 표현식보다 함수 선언문이 가독성이 좋고
우선 적으로 할당을 한 뒤에
함수를 선언해서 사용되기 때문에 유용합니다.
하지만 함수 표현식을 사용하는 이유는
함수 선언문에서 사용하기 부적절한 상황이 있기 때문에
사용됩니다.
이런 상황에 대해서는 추후에 더 자세하게 다뤄보겠습니다.
(2)
화살표 함수
화살표 함수는 함수 표현식을
더 간단하게 작성할 수 있는 일종의 치트키라고 보시면 좋습니다.
함수 표현식은
let ex = function() {
함수 본문;
return 결과값;
};
과 같은 형식으로 작성했는데
화살표 함수를 사용해서
작성하면
let ex = () => 함수 본문;
과 같이 더 간단하게 작성할 수 있습니다.
화살표 함수가 유용한 이유는
연산자를 사용해서 더 복잡한 코드를
간단하게 작성할 수 있다는 것입니다.
예를 들면
let age = prompt('당신의 나이는?', );
let yourAge = (age <19)?
() => alert('학생입니다.') :
() => alert('성인입니다.');
위에 예시는 조건부 연산자'?'를
사용한 예시로
화살표 함수를 사용하여 간단하게
나이를 확인하는 모달 창을 띄우는
예시를 만들어 보았습니다.
이 밖에 다른 연산자들을 사용하여
유용하게 사용할 수 있으니
알아두시면 좋겠습니다.
마지막으로 함수에는 return을 함께 사용하는데
return을 사용하는 이유는 추후에 함수를 사용하기 위함도 있고
return을 씀으로써 함수가 마무리가 되었다는
것을 알리는 기능으로도 사용합니다.
그래서 함수 사용시 return을 사용해서 결과값을 출력하는 것이 좋습니다.
오늘은 함수 표현식과 선언문의 차이와
함수 표현식을 간단하게 작성할 수 있는
화살표 함수에 대해 알아보았습니다.
보통은 가독성이 높은 함수 선언문을 많이
사용하고 이외에 함수 선언문에 사용하기
적절하지 않을 때 함수 표현식을 사용하는데
이때 화살표 함수를 이용해서 함수 표현식을
간단하게 작성할 수 있다는 것을
알아두시면 좋겠습니다.
감사합니다!!

'JS > JS 기초' 카테고리의 다른 글
JS- 객체(Object) (3) | 2022.08.25 |
---|---|
JS- 인터프리터 언어 (0) | 2022.08.25 |
JS- 함수(지역 변수, 전역 변수, 매개 변수) (0) | 2022.08.19 |
JS - switch문 (1) | 2022.08.12 |
JS-반복문 while, do while, for (0) | 2022.08.10 |
댓글