JavaScript 함수사용 방법 (함수 선언문, 함수 표현식, 익명함수, 애로우펑션, 생성자 함수)

JavaScript에서 함수를 선언하는 방법에 대해서 설명드리고자 합니다.

1. 함수 선언문

함수 호출이 선언문 위에 있을 때

helloWorld("hello", "world"); function helloWorld(first, second) { console.log(first + second); }

함수 호출이 선언문 아래 있을 때

function helloWorld(first, second) { console.log(first + second); } helloWorld("hello", "world");

함수의 호출이 선언문의 위치와의 관계가 있을까요?

함수 선언문에서는 위치와 관계없이 실행이 됩니다.

둘 다 되는데 왜 말했을까요?

그건 함수 표현식에서 보겠습니다.

 

2. 함수 표현식

우선 함수 선언문을 함수 표현식으로 바꾸는 방법을 알아볼게요.

1) 변수 선언

const helloWorld

2) 함수 선언문을 익명 함수화 시켜주기

함수에 이름이 없는 것을 익명 함수라고 합니다. 변수명이 있으니 굳이 함수에 이름이 없어도 되겠죠?

function (first, second) {

  console.log(first + second);
}

3) 함수의 호출은 함수 표현식 아래쪽에 존재하도록 해야 함

함수 표현식에서 함수 호출 문을 표현 문 아래와 위에 있을 때 실행을 해본 것은 이 부분 때문인데요.

우선 아래 코드를 넣고 실행해볼게요.

함수 호출이 선언문 아래에 있을 때

const helloWorld = function(first, second) { console.log(first + second); } helloWorld("hello", "world");

함수 호출이 선언문 위에 있을 때

helloWorld("hello", "world"); const helloWorld = function(first, second) { console.log(first + second); }

어떤가요?

선언문이 위에 있고 호출문이 아래에 있을 때는 함수 표현식과 마찬가지로 오류 없이 실행이 되었죠?

근데 선언문이 아래에 있을 때는

이렇게 에러가 발생할 거예요.

이게 호이 스팅이라는 자바스크립트의 특징 때문인데요.

함수 선언식은 코드 구현 위치와 관계없이 호이 스팅에 따라 브라우저가 코드를 해석할 때 위로 끌어올려 순서가 선언문 다음 호출 문 순으로 인식하기 때문에 에러 없이 실행됩니다.

자세한 내용은 아래 링크에서 확인해주세요.

 

3. 애로우 펑션

애로우 펑션을 만드는 순서를 알아볼까요?

1) 함수 표현식에서 function을 지우고 대신에 입력과 출력 사이에 =>를 넣어준다

const helloWorld = (first, second) => {   return console.log(first + second); } helloWorld("hello", "world");

* console을 return에 적어주지 않아도 되지만 애로우 펑션의 기본적인 것을 보여주고자 return에 입력했습니다.

* 문장이 한 줄로 표현이 가능한 경우 { }와 return을 입력하지 않아도 됩니다.

const helloWorld = (first, second) => console.log(first + second); helloWorld("hello", "world");

 

4. 생성자 함수

생성자 함수에 대해서는 추후에 더 업데이트 할것입니다.

우선 함수를 선언할 때 첫 글자를 대문자로 쓴 것이 생성자 함수로 사용하겠다는 의미라는 것만 알아주세요.

function Title () {}

이렇게 Title이 대문자로 적혀있죠?