[자바스크립트] 함수 표현식, 화살표 함수

본 내용은

아래 강의 내용에 대한 복습내용입니다

 

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

 

 

---

 

 

자바스크립트에서 함수를 선언할 때에는, function키워드  + 함수명 + (매개변수) + {로직} 이렇게 사용된다. 

function funcA(){
    console.log("funcA")
}

 

그리고 호출할 때는 당연히 funcA(); 라고 사용하면 된다.

그런데, 자바스크립트에서는 함수자체를 변수에 담을 수 있다.

그래서 아래와 같이 varA라는 변수에 함수를 담으면 varA();로도 funcA함수를 호출 할 수 있게 된다.

let varA = funcA;
varA();

 

마찬가지로 아래도 같은 방식이다.

그런데 이 방식은 funcA함수를 만들자마자 varA변수에 초기화 시키는 것인데

이와 같은 경우에서는 funcA();로는 함수가 호출되지 않고 무조건 varA();로만 가능하다.

let varA = function funcA(){
    console.log("funcA");
}
varA(); 
funcA(); //작동 x

 

따라서 위와 같이 함수를 만들면 사실상 funcA라는 함수명으로 호출할 수 가 없으니 사실상 의미가 없다.

따라서 축약해서 아래와 같이 함수를 선언할 수 있다.

(함수를 변수에 곧바로 초기화 시킬때는 함수명을 생략할 수 있는 것이다)

let varA = function(){
console.log("funcA")
}

 

이렇게 선언하는 것을 함수 표현식이라고 한다.

---

 

그러면 함수표현식을  더 간단하게 표현할 수 있는데, 이때 사용하는 것이 화살표 함수다

let varA = ()=>{console.log("funA")}

 

 

 

++

 

아래처럼 화살표 함수 내에서 호직이 return문만 있는 경우에는

let varB = ()=>{return 1;}

{} 를 생략하고 곧바로 아래처럼 사용할 수도 있다

let varB = ()=>1;

 

물론 ()매개변수 자리에는 매개변수가 들어갈 수도 있다.

let varC = (value)=>retrun value + 50;
console.log(varC(20)) //70이 출력됨

---

정리