[Javascript Function] 함수 작성 방법 한 번에 정리하기

JavaScript에서 함수를 작성하는 방식이 다양한 이유

 자바스크립트를 표준화하기 위해 만들어진 ECMA Script(ES)는 시간이 지나면서 계속해서 변화해 왔고, 당시의 프로그래밍 패러다임을 반영한 문법을 추가하였다. ES6 이전까지는 함수를 문으로 작성하는 방법과 식으로 작성하는 방법을 지원했고, ES6부터는 함수형 프로그래밍 패러다임에 맞춰 함수형 선언인 화살표 함수 작성을 추가했다. 

 자 이제 JavaScript에서 함수를 작성하는 방법에 대해 살펴보자.

 

JavaScript 함수를 작성하는 방법

JavaScript는 함수를 작성하기 위해 문으로 작성하는 방식, 식으로 작성하는 방식, 화살표 함수로 작성하는 방식 세가지를 지원한다.

 

JavaScript 함수를 작성하는 방식
1. 문으로 작성하기
2. 식으로 작성하기
3. 화살표 함수 작성하기

 

문으로 작성하기

문법

함수를 문으로 작성하는 방식은 다음과 같은 문법을 따른다. [값] 은 사용자가 설정하는 값으로 쓸 때는 []을 제거한다.

function [함수 이름]([파라미터1], [파라미터2]) {
	console.log("함수 작성 방법1")
}

 

예시

이에 대한 예시는 다음과 같다. hello라는 함수를 정의하고 name이라는 파라미터를 받아  `Hello ${name}`을 출력한다.

function hello(name) {
    console.log(`Hello ${name}`)
}

hello("DevWorld")

 

식으로 작성하기

문법

함수를 식으로 작성하는 방식은 다음 문법을 따른다. 문에서는 function 뒤에 함수 이름이 왔지만, 식에서는 함수 이름이 변수로 선언되고 function의 소괄호 '()' 사이에는 파라미터가 오는 점이 다르다.

const [함수 이름] = function([파라미터1],[파라미터2]) {
    console.log("함수 작성 방법2")
}

sayHello("DevWorld")

 

예시

예시는 '문으로 작성하기'와 이름만 다르다. 함수의 이름을 hello를 sayHello로 변경하였다. 

const sayHello = function(name) {
    console.log(`Hello ${name}`)
}

 

화살표 함수로 작성하기

문법

함수를 화살표 함수(함수형)로 작성할 때는 function 키워드가 필요 없다. 식에서 function을 제거하고 파라미터를 선언하는 부분 오른쪽에 '=>' 화살표를 붙이면 화살표 함수가 된다.

const [함수명] = ([파라미터1],[파라미터2]) => {
    console.log("함수 작성 방법3")
}

 

함수에 반환 값을 넣으려면 다음과 같이 쓰면 된다.

const [함수명] = ([파라미터1],[파라미터2]) => {
    console.log("함수 작성 방법3")
    return [리턴값]
}

 

예시

'식으로 작성하기'와 같은 함수이다. 화살표 함수가 어떻게 다른지 알아보기 위해 구조를 완전히 똑같이 만들었다.

const sayHello = (name) => {
    console.log(`Hello ${name}`)
}

sayHello("DevWorld")

 

자바스크립트 함수 선언 정리

이번 시간에는 자바스크립트에서 함수를 선언하는 3가지 방법에 대해 살펴보았다. 도입 배경을 보면 더욱 심오한 내용들이 있지만, 이 부분은 별도의 글에서 따로 정리하도록 하겠다. 이번 글에서는 각 방법이 어떻게 다른지 문법 정도만 파악하고 넘어가도록 하자.