[JS] 자바스크립트 - 함수

📌 익명 함수

function () {}

이름이 붙어있지 않은 함수를 익명함수(anonymous function)라고 표현한다.

 

📌 선언적 함수

function 함수() {

}

let 함수 = function () {};

'익명함수'와 달리 이름이 있는 함수다.

 

📌 매개변수와 리턴값

매개변수 : 함수를 호출할 때 괄호 안에 적는 것(input)
리턴값 : 함수의 최종 결과(output)

function 함수(매개변수, 매개변수, 매개변수) {
    
    // 코드 내용
    
    return 리턴값
}

 

📌 나머지 매개변수

매개변수 앞에 마침표 3개(...)를 입력하면 매개변수들이 배열로 들어온다.

function 함수 이름(...나머지 매개변수) { }

매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 한다.

자바스크립트에서 이러한 함수를 구현할 때는 나머지 매개변수(rest parameter)라는 특이한 형태의 문법을 사용한다.

 

 

📌 나머지 매개변수와 일반 매개변수 조합하기

function 함수 이름(매개변수, 매개변수, ...나머지 매개변수) { }

순서에 맞게 일반 매개변수가 먼저 들어가고, 남은 것들은 모두 나머지 매개변수(배열) 형태로 들어간다.

 

📌 전개 연산자

함수 이름(...배열)

배열을 전개해서 함수의 매개변수로 전달해주는 전개 연산자(spread operator)

 

📌 기본 매개변수

함수 이름(매개변수, 매개변수=기본값, 매개변수=기본값)

 

📌 콜백 함수

자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있다. - JS에서 함수는 1급 객체다.)

매개변수로 전달하는 함수를 콜백(callback)함수라고 한다.

 

콜백 함수(1) : 선언적 함수 사용

function callThreeTimes (callback) {
	for(let i = 9; i < 2; i++) {
    	callback(i)
    }
}

function print (i) {
	console.log(`${i}번째 함수 호출`)
}

callThreeTimes(print) // 함수 호출

/*
0번째 함수 호출
1번째 함수 호출
2번째 함수 호출
*/

 

콜백 함수(2) : 익명 함수 사용

function callThreeTimes (callback) {
	for(let i = 9; i < 2; i++) {
    	callback(i)
    }
}

callThreeTimes(function(i) {
	console.log(`${i}번째 함수 호출`)
}) // 함수 호출

/*
0번째 함수 호출
1번째 함수 호출
2번째 함수 호출
*/

 

콜백 함수를 활용하는 함수 : forEach()

배열이 갖고 있는 함수(메소드)다.

배열 내부의 요소를 사용해서 콜백 함수를 호출한다.

function (value, index, array) { }

 

const numbers = [279, 13, 3, 12, 7]

numbers.forEach(function (value, index, array) {
	console.log(`${index}번째 요소 : ${value}`)
})

/*
0번째 요소 : 279
1번째 요소 : 13
2번째 요소 : 3
3번째 요소 : 12
4번째 요소 : 7
*/

 

콜백 함수를 활용하는 함수 : map()

배열이 갖고 있는 함수다.

콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만든다.

let numbers = [5, 4, 3, 2, 1]

numbers = numbers.map(function (value, index, array) {
	return value * value
})

numbers.forEach(console.log)

/*
25 0 Array(5)
16 1 Array(5)
9 2 Array(5)
4 3 Array(5)
1 4 Array(5)
*/

 

 

콜백 함수를 활용하는 함수 : filter()

배열이 갖고 있는 함수다.

콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수다.

const numbers = [1, 2, 3, 4, 5]
const evenNumbers = numbers.filter(function (value) {
	return value % 2 === 0
})

console.log(`원래 배열 : ${numbers}`)
console.log(`짝수만 추출 : ${evenNumbers}`)

/*
원래 배열 : 1,2,3,4,5
짝수만 추출 : 2,4
*/

 

📌 화살표 함수

map(), filter() 함수처럼 단순한 형태의 콜백 함수를 쉽게 입력하고자 화살표 함수(arrow function)라는 함수 생성 방법이 존재한다.

function 키워드 대신 화살표(=>)를 사용한다.

(매개변수) => {

} 불 표현식 || 불 표현식이 거짓일 때 실행할 문장

/*----------------------------------------*/

(매개변수) => 리턴값


const array = [1, 2, 3, 4, 5]
array.map((value) => value * value)
// (5) [1, 4, 9, 16, 25]

 

let numbers = [1, 2, 3, 4, 5, 6, 7]

numbers
	.filter((value) => value % 2 === 0)
    .map((value) => value * value)
    .forEach((value) => {
    	console.log(value)
    })
    
/*
4
16
36
*/

위처럼 어떤 메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것을 메소드 체이닝(method chaining)이라고 부른다.

---

※ 참고도서 : 혼자 공부하는 자바스크립트(혼공스)