[JavaScript] 자바스크립트 함수 (function) / 함수 선언식, 함수 표현식, 화살표 함수

[JavaScript] 자바스크립트 함수 (function) / 함수 선언식, 함수 표현식, 화살표 함수

자바스크립트의 함수는 크게 함수 선언식, 함수 표현식으로 나뉜다.

 

먼저 함수 선언식은 다음과 같다.

function first() {
	let a = 10;
    let b = 20;
    
    let c = a * b;
    console.log(c);
}

first();
console.log("함수 실행 완료")

>>> 200
>>> 함수 실행 완료

 

 

함수 안에 return을 사용하면 단순히 출력하는 것이 아닌 함수로 나온 값을 반환하여 사용할 수 있다.

함수의 소괄호()는 매개변수를 주고 받기 위해 존재한다. 다음 코드와 같이 매개변수를 전달할 수 있다.

 

function first(a, b) {
	let c = a * b; // 지역변수(local)
    console.log(c);
    return c;
}

let d = first(10, 20);

console.log("d:", d);
console.log("함수 실행 완료");

>>> 200
>>> d: 200
>>> 함수 실행 완료

 

 

위 코드에서 first() 함수 안의 let c와 같이 함수 안에 존재하는 지역함수(local)는 함수 바깥에서 접근할 수 없다.

반면 함수 바깥에서 선언한 전역변수(global)는 함수 내부에서도 접근할 수 있다.

 

let count = 1; // 전역변수(global)

function first(a, b) {
	let c = a * b;
    console.log(count);
    return c;
}

let c = first(10, 20);
console.log(c);

>>> 1
>>> 200

 

 

함수 표현식은 다음과 같다.

let hello = function () {
	return "안녕하세요 여러분";
}; // 함수표현식

console.log(hello);

>>> ƒ hello() {}
// 변수가 함수를 담을 수 있다.

const helloText = hello();
console.log(helloText);

>>> 안녕하세요 여러분

 

 

함수 표현식과 함수 선언식의 차이

함수 선언식으로 만든 함수는 프로그램 실행 전에 코드 최상단으로 끌어올려진다. 이것을 호이스팅이라도 한다.

따라서 다음과 같이 작성한 코드도 실행이 가능하다.

console.log(helloB());
console.log(helloA());

let helloA = function() {
	return "안녕하세요 여러분";
} // 함수 표현식

let helloB() {
	return "안녕하세요 여러분";
} // 함수 선언식

>>> 안녕하세요 여러분
>>> TypeError: helloA is not a function // 함수 표현식은 호이스팅이 되지 않는다.

 

 

화살표 함수

함수 표현식으로 작성한 코드를 화살표 함수로 작성할 수 있다.

화살표 함수도 함수 표현식에서 나온 것이기 때문에 호이스팅이 되지 않는다. 함수 표현식과 화살표 함수는 순서를 잘 지켜서 작성해야 한다.

let helloA = () => {
	return "안녕하세요 여러분";
};

// 위와 같이 하나만 return 하는 화살표 함수는 아래와 같이 return 값을 직접 써도 된다.

let helloA = () => "안녕하세요 여러분";

console.log(helloA());

>>> 안녕하세요 여러분