어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록
함수는 항상 출력값(return)을 반환하는데,
만약 함수 내부에서 return을 하지 않으면, 출력값으로 undefined
를 반환한다.
function getArea(width, height) {
let area = width * height;
return area;
}
변수를 선언하고, 변수에 익명 함수를 할당한다.
const getArea = function(width, height) {
let area = width * height;
return area;
}
함수 표현식을 화살표 함수로 간단하게 표현할 수 있다.
const getArea = (width, height) => {
let area = width * height;
return area;
}
화살표 함수의 특징
- 함수의 body에 return문만 있는 경우, return과 중괄호{ }를 생략할 수 있다.
const getArea = (width, height) => width * height;
하지만 이 때 return을 생략하고 중괄호{ }는 생략하지 않으면,
undefined
를 반환한다.const getArea = (width, height) => {width * height}; // XXX!!! getArea(2, 2); // undefined
- 필요에 따라 return문에서 소괄호( )를 사용할 수 있다.
const getArea = (width, height) => (width, height);
- 매개변수가 하나일 경우 소괄호를 생략할 수 있다.
const square = width => width * width;
- 함수 내의 표현식이 2줄 이상인 경우, return과 중괄호{ }를 명시적으로 쓰는 것이 좋다.
function getArea(width, height)
getArea(3, 4);
❔ 만약 설정된 parameter보다 argument가 더 많이 전달되면 어떻게 될까?
function getArea(side) { return side * side; } getArea(4); // 16 getArea(4, 10); // 16
➡️ 첫 번째 argument만 전달되고, 더 많이 전달된 argument는 무시된다.
❔ 만약 전달되는 argument보다 parameter가 더 많이 설정되어 있다면 어떻게 될까?
function getArea(width, height) { return width * height; } getArea(4, 4); // 16 getArea(4); // NaN (4 * undefined이므로)
➡️ NaN을 반환한다.
이때, 인자가 전달되지 않은 매개변수의 값은
undefined
가 할당된다.function getArea(width, height) { console.log(width, height); } getArea(4, 4); // 4 4 getArea(4); // 4 undefined
: 매개변수에 값이 전달되지 않거나 undefined
가 전달될 경우의 매개변수에 기본값을 설정할 수 있다.
function getArea(width = 4, height = 4) {
return width * height;
}
getArea(); // 16 (4 * 4)
getArea(10); // 40 (10 * 4)
getArea(undefined, 20); // 80 (4 * 20)
[]
을 설정해줄 수도 있다.function pushNum(num, arr = []) { // num과 arr을 매개변수로 받아서
arr.push(num); // arr에 끝에 num을 추가하고,
return arr; // arr을 반환하는 함수
}
pushNum(1, 2, 3); // [1, 2, 3]
pushNum(4, [1, 2, 3]); // [1, 2, 3, 4]
소통해요~~