[자바스크립트] 함수 선언, 무명 함수, 화살표 함수 사용법 및 기본예제

함수 사용 이유

프로그래밍을 하다보면 중복되는 기능들을 묶어서 사용하고 싶다. 그런 경우 함수를 사용하면 쉽게 구현할 수 있다. 

아래의 소스코드를 보면, 면적을 구하기 위해서 width와 height를 계속 곱하는 부분이 반복된다. 

 

소스 코드

//함수가 필요한 이유

let width1 = 10;

let height1 = 20;

let area1 = width1 * height1;

console.log(area1);

 

let width2 = 13;

let height2 = 21;

let area2 = width2 * height2;

console.log(area2);

결과

200

273

반복되는 부분들을 계속 타이핑할 순 없으니, 함수를 이용하도록 하자.

 

1. 함수 선언식

위에서 면적을 구하는 부분들을 함수 구현식으로 함수를 구현하면 아래와 같다. 

소스 코드

// 1.함수 선언식 : getArea라는 함수명

function getArea(width, height) {

return width * height;

}

 

getArea(10, 20);

getArea(13, 21);

결과

200

273

getArea라는 메서드만 이용하면, 사람이 직접 타이핑 해야하는 수고를 덜어준다. 지금은 2개만 사용해서 큰 차이가 없게 느껴지지만 계속 사용하게 된다면 엄청난 차이가 난다. 

 

2. 함수 표현식 

위에서는 함수 선언식을 통해서 함수를 구현했다면, 이제는 무명함수를 이용해서 변수에다가 함수를 표현해보도록 하자. 

소스 코드

// 2. 함수 표현식

// 변수에 함수를 담을 수 있다. (무명 함수)

let hello = function () {

return "Hello JY!";

};

 

console.log(hello);

결과

함수를 변수에다가 넣어서 로그를 찍으면 위 결과 처럼 출력된다. 함수를 변수에 넣을 수 있다는 것을 잊지 말자. 

log에서 "Hello JY!"를 출력하고 싶다면, hello 변수를 함수처럼 사용하면 된다. 사용법은 아래와 같다. 

소스 코드

//2-1. 이런식으로 사용할 수 있다.

const helloText = hello();

console.log(helloText);

결과

Hello JY!

위 처럼 hello변수에 ()를 붙여 마치 함수처럼 사용하면된다. 물론 log(hello()) 로 집어 넣어도 바로 출력됨을 알 수 있다. 

 

3. 함수 선언식, 함수 표현식(무명함수) 차이점

소스 코드

// 3. 함수선언식, 함수표현식 차이

console.log(helloB()); // 함수 선언식은 함수가 먼저 호출하고 진행한다.

// console.log(helloA()); // 함수 표현식은 구현전에 사용 못함

 

let helloA = function () {

return "함수표현식";

};

 

function helloB() {

return "함수선언식";

}

 

console.log(helloA()); // 변수에 함수를 넣고 난 뒤에 사용가능하다.

결과

함수선언식

함수표현식

함수 선언식으로 함수를 구현해주면, 함수를 구현한 소스코드가 가장 먼저 실행된다. 그래서 위 예제와 같이 helloB() 함수를 구현 전에 실행하더라도, 실행이 가능한 것을 확인할 수 있다. 

하지만, 함수 표현식으로 변수에 무명함수를 넣는 것은 함수를 구현하기 전에 사용이 불가능함을 알 수 있다. 

 

 

4. 화살표 함수

소스 코드

// 4.화살표 함수

// 4-1. return이 있는 화살표함수

let helloC = () => {

return "함수표현식";

};

 

// 4-2. return이 없는 화살표함수

let helloD = () => "함수표현식";

4-1에서는 중괄호를 사용하는 화살표함수를 알수있고, 리턴값만 있는 함수일 경우에는 중괄호를 빼고 바로 리턴할 수 있다.