[JS] ES6 화살표 함수 기본 정리

자바스크립트 JavaScript 화살표함수

화살표함수 : ES6에서 처음 등장한 새로운 함수 선언 방법

---

 

*함수선언식 : function 키워드로 단독으로 함수를 선언한 것

function sum(num1, num2){
	return num1 + num2;
}

 

 

*함수표현식 : 변수에 함수를 할당한 것

const sum = function sum(num1, num2){
	return num1 + num2;
}

 

 

함수선언식과 함수표현식 차이점: https://rebornbb.tistory.com/entry/JS-%ED%95%A8%EC%88%98-%ED%91%9C%ED%98%84%EC%8B%9D%EA%B3%BC-%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EC%8B%9D%EC%9D%98-%EC%B0%A8%EC%9D%B4-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85

[JS] 함수 표현식과 함수 선언식의 차이 - 호이스팅

 

 

화살표 함수 (arrow function)

1.

화살표 함수는 기존의 *함수선언식에서

function이라는 키워드와 식별자를 빼주고 소괄호와 중괄호 사이에 => 를 넣어주면된다

(num1, num2) => {
	return num1 + num2;
}

//의미적으로 똑같은 함수
//function sum(num1, num2){
//	return num1 + num2;
//}

 

2.

화살표함수는 식별자가없어서 호출할 수 없으므로, *함수표현식 방법처럼 

변수에 화살표함수를 할당해주어야 올바르게 화살표 함수를 호출할 수 있다.

const sum = (num1, num2) => {
	return num1 + num2;
}

const result = sum(10, 20);
console.log(result);

 

3.

화살표함수의 내용에서 중괄호 안에 바로 return이라는 키워드를 이용해 반환하는 형태라면

중괄호와 return을 생략해 이를 간단하게 줄일 수 있다 

const sum = (num1, num2) => num1 + num2;

//중괄호와 return 생략가능
//const sum = (num1, num2) => {
//return num1 + num2;
//}

const result = sum(10, 20);
console.log(result);

 

 

4.

만약 내가 전달하고자 하는 매개변수(parameter)가 하나라면

소괄호를 생략할 수있다.

const pow = x => x * x;

//소괄호 생략
//const pow = (x) => x * x;

const result = pow(10);
console.log(result);

 

5.

만약 전달하고자 하는 매개변수가 하나도 없다면

소괄호만 적어두면 매개변수 없는 함수를 만들 수 있다.

const printPie = () => 3.14;  

const result = printPie();
console.log(result);

//결과값 3.14

 

6.

화살표함수로 만든함수가 내부적으로 객체를 반환한다면 주의할 점이 있는데,

return과 중괄호 생략시

안에 남은 중괄호를 소괄호로 감싸 구분해주어야 한다는 점이 있다.

const getObject = () => ({
    	name: "철수",
        age: 20
    })

//return 생략시, 안에있는 중괄호 바깥에 소괄호로 구분을 해주어야한다.
//const getObject = () => {
//	return {
//    	name: "철수",
//        age: 20
//    }
//}

const obj = getObject();
console.log(obj.name);

 

7.

함수안에 함수가 있는 내부 함수 형태의 경우도

간단하게 화살표 함수로 변경 할 수있다.

const outer = (x) => () => x * x;

//아래의 내부함수를 위 화살표 함수로 변경 가능하다
//function outer(x){
//	return function inner(){
//   	 	return x * x;
//    	}
//}

const innerFuc = outer(10);
const result = innerFuc();
console.log(result);

 

 

 

정리 참고 원본 유튜브 영상 링크 : https://www.youtube.com/watch?v=5kRgzyGRPrU&list=LL&index=1