함수 표현식, 화살표 함수(arrow function)
출처 : 코팅앙마 자바스크립트 기초강좌 내용을 정리한 글입니다.
https://www.youtube.com/watch?v=KF6t61yuPCY
🍋함수 선언문
기본 방식입니다.
function sayHello(){
console.log('Hello');
}
sayHello()
🍋함수 표현식
이름이 없는 함수에 변수 선언해서 함수를 할당하는 것입니다.
let sayHello = function(){
console.log('Hello');
}
sayHello()
🤔 함수 선언문과 함수 표현식은 어떤 차이가 있을까요?
바로 호출 타이밍입니다.
함수 선언문 : 어디서든 호출 가능
sayHello()
function sayHello(){
console.log('Hello');
}
이렇게 바꿔도 동작합니다.
위에서 아래로 읽으면서 동작하는 인터프리터 언어인 자바스크립트에서 어떻게 저런게 가능할까요?
console.log
를 사용하면 아래와 같이 에러가 출력됩니다.
그렇다면 sayHello
는 어떻게 동작된걸까요?
이것은 자바스크립트 내부 알고리즘 때문입니다.
자바스크립트는 실행 전 초기화단계에서 코드의 모든 함수 선언문을 찾아서 생성해둡니다. 즉, 눈으로 볼 땐 생성 전이지만 함수를 사용할 수 있는 범위는 코드 위치보다 위로 올라갑니다. 이를 호이스팅이라고 합니다.
함수 표현식 : 코드에 도달하면 생성
let sayHello = function(){
console.log('Hello');
}
sayHello()
코드에 도달해야만 생성되기 때문에 생성 이후에만 사용할 수 있습니다.
🤔그래서 뭐가 더 좋은가요?
함수 선언문이 더 자유롭게 코딩할 수 있지만, 어느것은 사용하든 딱히 상관없습니다.
🍋화살표 함수(arrow function)
- 보다 간결하게 작성 가능합니다.
let add = function(num1, num2){
return num1 + num2;
}
👇
let add = (num1, num2) => {
return num1 + num2;
}
- return문이 한줄일경우 { }중괄호를 => ()일반괄호로 바꾸고 return 생략가능합니다.
let add = (num1, num2) => (
num1 + num2;
)
- return문이 한줄이라면 괄호 생략 가능합니다.
let add = (num1, num2) =>num1+num2;
- 인수가 하나라면 괄호 생략 가능합니다.
let add = name =>`Hello, ${name}`;
- 만약 인수가 없는 합수라면 괄호는 생략할 수 없습니다.
let showError = () => {
alert('error!');
}
- return문이 한줄이라고 해도 여러줄의 코드가 있다면 ()일반 괄호는 사용할 수 없습니다.
let add = (num1,num2) => {
const result = num1 + num2;
return result;
}
let add = function(num1, num2){
return num1 + num2;
}
👇
let add = (num1, num2) => {
return num1 + num2;
}
let add = (num1, num2) => (
num1 + num2;
)
let add = (num1, num2) =>num1+num2;
let add = name =>`Hello, ${name}`;
let showError = () => {
alert('error!');
}
let add = (num1,num2) => {
const result = num1 + num2;
return result;
}
선언문이 좀 더 자유롭습니다.
화살표 함수는 ES6 이후에 추가된 기능입니다. ES6 이후 굉장히 활발히 쓰이고 있기 때문에 필수로 알아두어야합니다.
Author And Source
이 문제에 관하여(함수 표현식, 화살표 함수(arrow function)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@remon/함수-표현식-화살표-함수arrow-function저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)