개발/Javascript

[javascript] 함수 선언문, 함수 표현식, 화살표 함수 정리

2realzoo 2022. 11. 10. 12:23

오늘은 함수에 대해서 다시 공부해 보려고 한다.

점점 DOM으로 넘어가면서 javascript의 함수가 헷갈리고 있기 때문이다... 😢

우선 함수를 만드는 데에는 세가지 방법이 있다.

  • 함수 선언문
    function isOdd(num) { 
       if(num % 2 === 1) { 
           return true; 
          } 
       }

내가 가장 많이 사용하고 익숙한 방법이다.
호이스팅이 일어난다.

  • 표현식함수

    let isOdd = function (num) { 
      if(num % 2 === 1) { 
        return true; } }

    화살표 함수

    let isOdd = (num) => {if(num % 2 === 1) {return true;}}

위와 동일하게 사용하기 위해 if를 넣었지만 보통은 아래 예제처럼 사용하는 것 같다.
그리고 {return true;}{}는 생략이 가능하다.

const materials = [  
'Hydrogen',  
'Helium',  
'Lithium',  
'Beryllium'  
];

console.log(materials.map(material => material.length));  
// expected output: Array [8, 6, 7, 9]

여기에선 map을 사용하여 materials 배열을 길이로 바꾸어 배열로 반환하고 있다.
보통 map, filter, forEach, reduce를 사용할 때 짧게 화살표 함수로 표현하는 것 같다.

화살표 함수는 전달인자가 1개라면 ()를 생략할 수 있다.
그리고 return{} 생략이 가능하다.