[Language/JavaScript] 자바 스크립트(Java Script) 함수 선언 방법 3가지

https://denstoredanske.lex.dk/JavaScript

 

#.포스트 소개 (Post Introduction)

오늘은 자바스크립트에서 함수를 선언하는 3가지 방법에 대해서 각각 알아보려고 한다. 사실 이 글을 포스팅하는 이유는 필자가 면접 때 질문을 받았는데 1가지 방법이 생각나지 않아서 답변을 하지 못했기 때문이다!... 요즘 프로젝트 유지 보수 스터디에서 역할 분담을 Back-End만 맡아서 하다보니 Front-End에 너무 소홀했던거 같아 반성할 겸 포스팅을 하면서 다시 한번 정리해 보려고 한다. 

 

 

 

---

 

 

 

 

#1. 함수 선언문 (Function Declaration) 으로 선언하기

function test() {
  console.log("안녕하세요!");
}

첫 번째 방법은 바로 '함수 선언문 (Function Declaration)' 을 사용하는 방법이다. 함수 선언문은 자바 스크립트에서 가장 흔하게 볼 수 있는 함수 선언 방식이다. 위와 같이 함수 선언부와 함수 구현부를 작성하여 선언해주면된다. 이 방법은 너무 기본적이라 다들 한 번쯤 본적이 있을거다.

 

 

 

 

#2. 함수 표현식 (Function Expression) 으로 선언하기

var test = function() {
  console.log("안녕하세요!");
};

두 번째 방법은 바로 '함수 표현식 (Function Expression)' 을 사용하는 방법이다. 필자가 바로 이 방법을 대답하지 못했다..! 사실 이렇게도 함수를 선언해서 사용할 수 있다는 것 정도는 유사한 코드를 몇번봐서 알고 있었는데 본인은 이렇게 함수를 선언하여 사용한적이 거의 없었기 때문에 '자바 스크립트에서 함수를 선언하는 대표적인 3가지 방법' 이라고 질문을 받으니 생각 조차 나지 않았다.

 

아무튼 함수 표현식을 사용하여 선언하는 방법을 설명하자면 함수를 변수에 할당하는 방식이다. 이렇게 선언하면 함수는 값처럼 취급되어 다른 변수에 할당이 가능하며, 필요한 곳에 전달하여 사용할 수도 있다. 이 2가지 사용방법은 아래에서 예시코드를 보면서 설명하겠다.

 

ㄴ2-1.함수 표현식 (Function Expression) - 다른 변수에 할당하여 사용하기

var testFunction = function() {
    return "안녕하세요!";
};

var hello = testFunction; // 함수를 다른 변수에 할당

console.log(hello()); // 결과: "안녕하세요!"

위의 코드에서 'testFunction' 필드에 함수를 선언하여 할당하였다. 그리고 이를 다시 'hello' 라는 필드에 할당하였다. 그 후 hello() 와 같이 사용하면 함수 표현식으로 선언하여 hello 필드에 할당된 'testFunction' 즉, "안녕하세요!" 라는 문자열이 리턴되는 함수를 호출 할 수 있다. 이와 같이 함수 표현식으로 선언한 함수는 또 다른 변수에 할당하여 필요한 곳에 용이하게 사용할 수 있다.

 

ㄴ2-2. 함수 표현식 (Function Expression) - 필요한 곳에 전달하여 사용하기

var testFunction = function() {
    return "안녕하세요!";
};

function showTest(func) {
    var message = func(); // 함수를 인자로 받아 실행
    console.log(message);
}

showTest(testFunction); // 결과: "안녕하세요!"

다음은 함수 표현식으로 선언한 함수를 필요한 곳에 전달하여 사용하는 방법을 알아보겠다. 위의 코드에서와 같이 함수 표현식으로 선언한 testFunction 함수를 또 다른 함수를 호출할 때 인자로 넘겨주어 showTest와 같이 매개변수로 함수를 받는 함수내부에서 사용할 수 있다.

 

 

 

 

#3. 화살표 함수 (Arrow Function) 으로 선언하기

세 번째 방법은 바로 '화살표 함수 (Function Expression)' 을 사용하는 방법이다. 화살표 함수로 선언하는 방법은 선언 하려는 함수의 매개변수 유무와 함수 구현부의 코드 라인 수에 따라 선언 형태가 조금씩 다르기 때문에 아래에서 케이스 별로 나누어서 예시코드와 함께 설명하겠다.

 

ㄴ3-1.화살표 함수 (Arrow Function) - 매개변수가 없는 함수 선언하기

var test = () => {
  console.log("안녕하세요!");
};

화살표 함수를 사용하여 선언하는 방법은 선언하려는 함수가 매개변수가 없는 함수일 경우 기본적으로 위의 코드와 같다. 

 

ㄴ3-2.화살표 함수 (Arrow Function) - 매개변수가 있는 함수 선언하기

// 매개변수가 1개인 함수 선언
var name = (name) => {
  console.log("안녕하세요, " + name + "님!");
};

name('발자'); // "안녕하세요, 발자님!" 출력


// 매개변수가 2개인 함수 선언
var fullName = (firstName, lastName) => {
    console.log(`안녕하세요, ${firstName} ${lastName}님!`);
};

fullName('괴', '발자'); // "안녕하세요, 괴 발자님!" 출력

위와 같이 매개변수가 있는 함수를 선언할 경우도 기본적으로 '3-1.화살표 함수 (Arrow Function) - 매개변수가 없는 함수 선언하기' 의 경우와 같으나, 조금의 차이점이 있다면 단지 소괄호 안에 매개변수로 사용할 변수명을 지정해 주면된다는 것 뿐이다. 선언하려는 함수의 매개변수가 1개든 2개든 선언방법은 같다.

 

ㄴ3-3.화살표 함수 (Arrow Function) - 구현부가 한 줄인 함수 선언하기

var square = x => x * x;

console.log(square(3)); // 9 출력

위와 같이 화살표 함수로 선언하려는 함수의 구현부가 한 줄로 끝날 경우에는 중괄호({})와 return 키워드를 생략하여 선언할 수 있다. 물론 생략해서 선언할 수 있다는 것이지 무조건 생략해서 선언해야하는 것은 아니다! 그러나, 관례적으로 코드의 간결성을 위해 생략해서 사용하는 경우가 많다고 한다.

 

 

 

 

---

 

 

 

#.소감 (Feelings)

'함수 선언문 (Function Declaration)' 과 '화살표 함수 (Arrow Function)' 를 사용하여 함수를 선언하는 방법은 원래 알고 있었고 실제 프로젝트에서 함수 선언시 자주 자주 사용했던 방법이라 면접에서 질문을 받았을 때 바로 생각났던거 같다.

 

따지고 보면 '함수 표현식 (Function Expression)' 을 사용하는 방법도 아예 모르던 것은 아니였으나, 실제로 활용한 적이 거의 없는 어색한 사이 였기 때문에 생각 조차 나지 않았던거 같다... 이제라도 알았으니 프론트 단을 개발할 때 적절한 상황에 맞춰 3가지 함수 선언 방법을 사용해보려한다. 이상으로 포스팅을 마친다.