프론트엔드 개발/JavaScript

JavaScript) 화살표함수 arrow function

Ella Seon 2022. 10. 5. 00:25

출처 : https://www.youtube.com/watch?v=5kRgzyGRPrU&t=357s 

 

✅함수 선언식 

- function 키워드로 단독으로 함수를 선언한 것

 

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

✅함수 표현식

- 변수에 함수를 할당한 것

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

✅화살표 함수(arrow function)

화살표함수는 sum 과 같은 식별자가 없어서 호출할 수가 없다. 

화살표 함수를 호출하기 위해서는 함수 표현식 방법처럼 변수에다가 화살표 함수를 할당해줘야한다.

그래야, 화살표함수가 할당되어져있는 sum이라는 변수를 이용해서 올바르게 화살표함수를 호출할수있게된다. 

 

      const sum = (num1,num2)=>{
        return num1 + num2;
      }
      const result = sum(10,20);
      console.log(result);

✅화살표함수 특징

- return{} 을 생략할 수 있다.

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

- parameter가 1개일 경우 소괄호를 생략할 수 있다. 생략하지 않아도된다.

const pow = x => x*x;

const result = pow(10); //10의 제곱
console.log(result); //100

- parameter가 1개도 없을 경우는 소괄호만 남겨둔다.

 

3.14가 잘 반환된다. 

const printPie = () => 3.14;

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

- 화살표함수가 내부적으로 객체를 반환하고 있다면, 소괄호로 한번 감싸줘야한다.

왜냐하면 return{} 과 겹칠때 헷갈릴수 있기 때문이다.

const getObject = () =>({
   name:"철수",
   age:20
    })
    
    const obj = getObject();
    console.log(obj.name);