Function 함수 선언식과 표현식, 화살표 함수

김민아·2022년 6월 24일

JavaScript 코드스테이츠

함수는 ~~return~~ 돌아온다.

함수

학습 목표

함수가 "작은 기능의 단위"라는 것을 이해할 수 있다.
함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다.
함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다.
함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다.
매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다.
같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다.

함수란

코드의 묶음, 기능의 단위로 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록이다.
입력과 출력간의 매핑 mapping이 이루어 진다.
함수는 반드시 돌아온다. return

⚠️ return 하지 않는 함수는 undefined를 반환한다.
⚠️ return문을 만나면 return하고 함수는 종료된다.

사용 방법

함수의 선언 declaration을 하면 특정 메모리에 저장되고, 이를 호출 call하여 사용할 수 있다.

let result = plus(10, 20)

function plus(param1, param2) {
	console.log(param1 + param2)
	return param1 + param2
}

// 1. plus 함수를 호출한다. 
// 2. 이때 전달인자 argument값인 10과 20이 순서에 따라 매개변수 param1, param2에 매핑된다.
// 3. plus 함수 내의 코드가 진행된다. 
// 4. 연산된 결과 값을 콘솔에 출력하고.
// 5. 값을 리턴한다.
// 6. 리턴된 값은 result에 재할당된다. 

result = 30

함수 선언 방법

함수 선언식

function getTriangleArea(base, height) {
	let triangleArea = (base * height) / 2
	return triangleArea
}

함수 표현식

const getTriangleArea = function (base, height) {
	let triangleArea = (base * height) / 2
	return triangleArea
}

화살표 함수 (ES6 문법)

const getTriangleArea = (base, height) => {
	let triangleArea = (base * height) / 2
	return triangleArea
}

함수에 return 문만 있는 경우 return과 {}를 생략할 수 있다.
!!가독성을 위해 return문이 한 줄일 경우에만 사용하도록!!

const getTriangleArea = (base, height) => base * height / 2
// 정상적으로 값을 return

const getTriangleArea = (base, height) => {base * height / 2}
// undefined를 반환
// 이 식은 return문도 없고, 저장도 하지 않고 연산만 하고 끝나는 함수이기 때문. 

const getTriangleArea = (base, height) => (base * height / 2)
// return문에 소괄호를 사용해도 정상적으로 값을 return

(+) 선언 방식 차이점

함수의 이름과 호이스팅에서 차이가 있다.

함수 선언식은 함수를 호출할 때 이름으로 호출한다. functionName()
함수 표현식은 변수에 함수를 할당하는 방식이다. 함수에 이름을 붙여도 변수명을 사용하여 호출 functionName()

let functionName = function abc() {
    return '변수명으로 호출'
}

functionName()
'변수명으로 호출'

javascript가 실행되면 선언된 변수와 함수를 메모리에 저장한다. 그리고 코드가 위에서부터 아래로 차례대로 실행되는데, 이 때 선언된 함수는 위에서 호출해도 값을 출력하는 반면, 함수 표현식으로 선언된 함수를 호출하면 값이 아직 선언되지 않았다고 출력한다.

func1(); // 'hello'
func2(); // ReferenceError

function func1(){
	console.log('hello') 
}

let func2 = function(){ 
	console.log('hello') 
}

실습 →함수를 사용하여 구구단을 출력

AS-IS

let num = 4 // 4단

console.log(num * 1) // 4
console.log(num * 2) // 8
console.log(num * 3) // 12
console.log(num * 4) // 16
console.log(num * 5) // 20
console.log(num * 6) // 24
console.log(num * 7) // 28
console.log(num * 8) // 32
console.log(num * 9) // 36
console.log(num * 10) // 40

TO-BE

function mulTablePrinter(num) {
	console.log(num * 1) 
	console.log(num * 2) 
	console.log(num * 3) 
	console.log(num * 4) 
	console.log(num * 5) 
	console.log(num * 6) 
	console.log(num * 7) 
	console.log(num * 8) 
	console.log(num * 9)
	console.log(num * 10)
}

mulTablePrinter(4) // 4단
mulTablePrinter(7) // 7단

실습 →함수 표현식을 화살표 함수로 바꿔보자

// 함수 선언식
let getRectangleArea(width, height) {
	let rectangleArea = width * height;
	return rectangleArea
}

// 함수 표현식
let getRectangleArea = function (width, height) {
	let rectangleArea = width * height;
	return rectangleArea
}

// 화살표 함수
let getRectangleArea = (width, height) => {
	let rectangleArea = width * height;
	return rectangleArea
}

// 화살표 함수 return 값만 있을 경우.
let getRectangleArea = (width, height) => width * height