함수의 기초

함수가 무엇인지 알아보기 전에 이와 같은 문제를 풀어보자.

함수를 모른다고 생각하고 삼각형의 넓이를 코딩을 통해 구해야하는 경우 다음과 같은 코드를 작성할 수 있다.

//삼각형의 밑변의 길이가 3, 높이가 4일때의 삼각형의 넓이

cosnt base = 3;
const height = 4;
const triangleArea = (base * height) / 2;
console.log(triangleArea); // Output: 6

위와 같은 방법으로 코딩을 한다면 밑변이 3, 높이가 4인 삼각형의 넓이를 구할 수는 있지만 어느 한 값이 달라진다면 다시 코딩을 해야하는 번거로움이 있을 수 있다.

따라서 반복적으로 실행되는 일이 필요한 경우 함수를 만들 수 있다.

따라서 아래와 같은 함수를 만들 수 있다.

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

//혹은

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

console.log(getTriangleArea(2,4)) 

로 작성할 수 있지만 위에 코드 중 2번째 코드의 경우 출력값이 Undefined가 나오게 된다. 그 이유는 return에 있다.

function getTriangleArea(base, height) {
 	let triangleArea = (base * height) / 2;
    	return triangleArea
}
// -> return을 통해 출력값이 함수 밖으로 출력

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

console.log(getTriangleArea(2,4))
// -> return이 없기 때문에 출력값이 함수 밖으로 출력되지 않음. Prints undefined

함수에서는 쭉 실행이 되다가 return을 만나면 값을 출력하고 함수가 종료된다. 하지만 return이 없으면 계산은 했지만 출력은 할 수 없어 값이 undefined로 표시된다. 또한 함수의 바디 내에서 return보다 하단에 위치한 작업은 실행되지 않는다.

function getTriangleArea(base, height) {
 	let triangleArea = (base * height) / 2;
    	return triangleArea
}
// -> 정상 작동

function getTriangleArea(base, height) {
    	return triangleArea
        let triangleArea = (base * height) / 2;
}
// -> 오류 발생

위와 같은 상황이 발생하는 이유는 return을 만나면 함수의 동작이 종료되기 때문에 아래의 동작은 작동하지 않고 따라서 2번의 경우 tiangleArea를 출력해야 하지만 해당 값이 정의되지 않았기 때문에 생기는 오류이다.

함수란 지시사항들의 묶음이다.

function getSomeCoffee () {
 //1. 물을 끓인다.
 //2. 원두를 갈아 온다.
 //3. 드리퍼에 필터를 설치한다.
 //4. 드립 커피를 추출한다.
 //5. 만들어진 커피를 제공한다.(return)
 }

함수 선언 방법

함수 선언식

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

함수 표현식

const getTriangleArea = function (base, height) {
 let triangleArea = (base * height) / 2;
 return triangleArea
}
// -> 변수선언 후 익명함수 할당.

화살표 함수

const getTriangleArea = (base, height) => {
 let triangleArea = (base * height) / 2;
 return triangleArea
}
// -> 변수선언 후 function keyword를 '=>'로 할당.

화살표 함수의 특징

1. 만약 함수의 본문(body)에 return문만 있는 경우
   :return과 {}중괄호(curly bracket)를 생략할 수 있다.

const getTriangleArea = (base, height) => base * height / 2; // O, 정상 작동

const getTriangleArea = (base, height) => {base * height / 2} // X, undefined return

2. return문에서 ()소괄호를 사용할 수 있다.

const getTriangleArea = (base, height) => (base * height / 2) // O, 정상 작동

3. 만약 함수 내의 표현식이 2줄 이상인 경우
   :return과 {}중괄호(curly bracket)를 명시적으로 쓰는 것이 좋다.

//bad
const getStudentAvg = arr => arr.filter(person => person.job === 'student').reduce((sum, person) => (sum + person.grade), 0)
// -> 가독성이 떨어짐

//good
const getStudentAvg = arr => {
 return arr
 .filter(person => person.job === 'student')
 .reduce((sum, person) => (sum + person.grade), 0)
}
// ->가독성이 좋음 

함수의 호출

1. 선언: 매개 변수(parameter)

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

// -> 에서 base, height가 매개 변수

매개변수는 함수를 실행할 때 입력에 따라서 바뀔 수 있지만 let 등의 키워드를 사용하지 않고 사용가능

2. 호출: 전달 인자(argument)

getTrianlgleArea(3,4)

// -> 에서 3, 4가 전달 인자

함수를 호출할 때 매개변수에 할당되는 값

예제: 사각형의 넓이를 구하는 함수를 선언식으로 작성하고 함수 표현식 / 화살표 함수로 바꾸어 보세요.

1. 함수 선언식

function getQuadrangleArea(param1, param2) {
 let quadrangleArea = param1 * param2;
 return quadrangle;
}

2. 함수 표현식

const getQuadrangle = function(param1, param2) {
 let quadrangleArea = param1 * param2;
 return quadrangleArea
}

3.화살표 함수

const getQuadrangleArea = (param1, param2) => param1 * param2;