이 글의 목적
📌 함수 표현식에 대해 알아봅니다.
함수표현식
함수표현식
함수를 생성하고 변수에 함수를 할당해 주는 것.
콜백함수
함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이 콜백 함수의 개념.
자바스크립트의 함수 실행
- 스크립트 실행 전 선언된 함수 선언문을 찾는다.
- 실행되기 전 "초기화 단계"에서 함수 선언 방식으로 정의한 함수가 생성
- 함수 선언문이 모두 처리된 이후에서야 실행됩니다.
- 따라서, 스크립트 어디서든 함수 선언문으로 선언한 함수에 접근할 수 있는 것.
함수표현식은 표현식에 다다랐을 때 만들어집니다.
따라서, 표현식은 선언식과 다르게 코드의 흐름에 따라 실행됩니다.
함수 선언문과 함수 표현식 중 무엇을 선택해야 하나요?
제 경험에 따르면 함수 선언문을 이용해 함수를 선언하는 걸 먼저 고려하는 게 좋습니다. 함수 선언문으로 함수를 정의하면, 함수가 선언되기 전에 호출할 수 있어서 코드 구성을 좀 더 자유롭게 할 수 있습니다.
함수 선언문을 사용하면 가독성도 좋아집니다. 코드에서 let f = function(…) {…}보다 function f(…) {…} 을 찾는 게 더 쉽죠. 함수 선언 방식이 더 “눈길을 사로잡습니다”.
그러나 어떤 이유로 함수 선언 방식이 적합하지 않거나, (위 예제와 같이) 조건에 따라 함수를 선언해야 한다면 함수 표현식을 사용해야 합니다.
화살표 함수 기본
화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용합니다.
- 중괄호 없이 작성: (...args) => expression – 화살표 오른쪽에 표현식을 둡니다. 함수는 이 표현식을 평가하고, 평가 결과를 반환합니다.
- 중괄호와 함께 작성: (...args) => { body } – 본문이 여러 줄로 구성되었다면 중괄호를 사용해야 합니다. 다만, 이 경우는 반드시 return 지시자를 사용해 반환 값을 명기해 주어야 합니다.
함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다.
바로 화살표 함수(arrow function)를 사용하는 것입니다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다.
나머지 매개변수
...rest는 항상 마지막에 있어야 합니다.
arguments도 있으나 잘 사용하지 않는다.
스프레드 문법 (spread syntax)
반대로 배열을 매개변수에 넘겨줄 때 쓰는 문법
Array.from은 유사 배열 객체와 이터러블 객체 둘 다에 사용할 수 있습니다.
스프레드 문법은 이터러블 객체에만 사용할 수 있습니다.
연습문제
// 윤년을 확인하는 함수 만들기
let year = prompt("해당 년도를 입력해주세요", "");
let confirmLeapyear =
(year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
? () => alert("윤년입니다.")
: () => alert("윤년이 아닙니다.");
confirmLeapyear();
let a = Number(prompt("A부터 B까지 더하는 함수의 'A' 값을 입력하시오", ""));
let b = Number(prompt("A부터 B까지 더하는 함수의 'B' 값을 입력하시오", ""));
function sumAll(a, b) {
let output = 0;
for (let i = a; i <= b; i++) {
output += i;
}
return output;
}
alert(`${a}부터 ${b}까지 모든 수의 합은 ${sumAll(a, b)} 입니다.`);
//최솟값 구하는 함수 만들기
function min(array){
let output = array[0]
for (const item of array) {
if (output > item){
output = item
}
}
return output
}
const testArray = [23,54,643,52,12]
console.log(`${min(testArray)}`)
function multiplyAll(a, b) {
let output = 1
for (let i = a; i <= b; i++) {
output *= i
}
return output;
}
console.log(multiplyAll(1,2));
console.log(multiplyAll(1,3));
//array 매개변수로 받아들여 연산
const max = function(array) {
let output = array[0]
for (const item of array) {
if(output < item)
output = item
}
return output
}
console.log(max([1,2,3,4]))
//...array를 사용하여 배열로 받아들임
const max = function(...array) {
let output = array[0]
for (const item of array) {
if(output < item)
output = item
}
return output
}
console.log(max(1,2,3,4))
const max = function(first, ...rests) {
//변수 선언하기
let output
let items
if(Array.isArray(first)) {
output = first[0]
items = first
} else if (typeof(first) === 'number') {
output = first
items = rests
}
for (const item of items){
if(output < items)
output = items
}
return output
}
console.log(`max(배열): ${max([1,2,3,4])}`)
console.log(`max(숫자, ...): ${max(1,2,3,4)}`)
// number에 filter를 이용하여 조건에 맞는 배열 추출
let numbers = [273,25,75,52,103,32,57,24,76]
numbers = numbers.filter((x) => x % 2 == 1)
numbers = numbers.filter((x) => x <= 100)
numbers = numbers.filter((x) => x % 5 == 0)
console.log(numbers)
//forEach를 이용하여 value와 index 값 호출
const array = ['사과','배','귤','바나나']
array.forEach((value, index) => {
console.log(index)
})
array.forEach((value, index) => {
console.log(value)
})