혼공자 - 05. 함수

05-1. 함수의 기본 형태

핵심 포인트

• 익명 함수란 이름이 없는 함수로 function () {} 형태로 만듭니다.
• 선언적 함수란 이름이 있는 함수로 function 함수이름 () {} 형태로 만듭니다.
• 함수의 괄호 안에 넣는 변수를 매개변수라고 합니다. 매개 변수를 통해 함수는 외부의 정보를 입력받을 수 있습니다.
• 함수의 최정적인 결과를 리턴값이라고 합니다. 함수 내부에 return 키우드를 입력하고 뒤에 값을 넣어서 생성합니다.
• 가변 매개변수 함수란 매개변수의 개수가 고정되어 잇지 않은 함수를 의미합니다. 나머지 매개변수(…)를 활용해서 만듭니다.
• 전개 연산자란 배열을 함수의 매개변수로써 전개하고 싶을 때 사용합니다.
• 기본 매개변수란 매개변수에 기본값이 들어가게 하고 싶을 때 사용하는 매개변수입니다.

확인 문제

1. A부터 B까지 범위를 지정햇을 때 범위 안의 숫자를 모두 곱하는 함수를 만들어 보세요.

<script>
	function multiplyAll (numStart, numEnd) {
		let result = numStart
		for (let i = numStart + 1; i <= numEnd; i++) {
			result *= i			
		}
		return result
	}

	console.log(multiplyAll(1,2))
	console.log(multiplyAll(1,3))
</script>

2. 다음 과정에 따라 최대값을 찾는 max() 함수를 만들어 보세요.

// 매개변수로 max([1,2,3,4])와 같은 배열을 받는 max() 함수를 만들어보세요.

<script>
	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]))
</script>

// 매개변수로 max(1,2,3,4)와 같이 숫자를 받는 max() 함수를 만들어보세요.

<script>
	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))
</script>

// max([1,2,3,4]) 형태와 max(1,2,3,4) 형태를 모두 입력할 수 있는 max() 함수를 만들어보세요.

<script>
	const max = function (array,...rests) {
		let output
		let items

		if (Array.isArray(array)) {
			output = array[0]
			items = array
		} else if (typeof array === 'number') {
			output = array
			items = rests
		}
		
		for (const item of items) {
			if (output < item) {
				output = item
			}
		}

		return output 
	}

	console.log(`max(배열): ${max([1,2,3,4])}`)
	console.log(`max(숫자, ...): ${max(1,2,3,4)}`)
</script>

05-2. 함수 고급

핵심 포인트

• 콜백 함수란 매개변수로 전달하는 함수를 의미합니다.
• 화살표 함수란 익명 함수를 간단하게 사용하기 위한 목적으로 만들어진 함수 생성 문법입니다. () => {} 형태로 함수를 만들고, 리턴값만을 가지는 함수라면 () => 값 형태로 사용할 수 있습니다.
• 즉시 호출 함수란 변수의 이름 충돌을 막기 위해서 코드를 안전하게 사용하는 방법입니다.
• 자바스크립트의 문법 오류를 더 발생시키는 엄격 모드는 실수를 줄일 수 있는 방법입니다. 'use strict'라는 문자열을 블록 가장 위쪽에 배치해서 사용할 수 있습니다.

확인 문제

1. filter 함수의 콜백 함수 부분을 채워서 홀수만 추출, 100이하의 수만 추출, 5로 나눈 나머지가 0인 수만 추출해주세요. 그리고 코드의 실행 결과를 적어보세요.

<script>
	// 변수를 선언합니다.
	let numbers= [273, 25, 75, 52, 103, 32, 57, 24, 76]

	// 처리합니다.
	numbers
		.filter((number) => number % 2 === 1)
		.filter((number) => number <= 100)
		.filter((number) => number % 5 === 0)
		.forEach((number) => {
			console.log(number)
		})
</script>

// 실행결과
25
75

2. 이전에 반복문 부분에서 살펴보았던 다음과 같은 코드를 배열의 forEach메소드를 사용하는 형태로 변경해주세요.

<script>
	// AS-IS
	const array = ['사과', '배', '귤', '바나나']
		
	console.log('# for in 반복문')
	for (const i in array) {
		console.log(i)
	}
	
	console.log('# for of 반복문')
	for (const i of array) {
		console.log(i)
	}

	// TO-BE		
	console.log('# for in 반복문')
	array.forEach((value, index, array) => {
		console.log(index)
	})

	console.log('# for of 반복문')
	array.forEach((value, index, array) => {
		console.log(value)
	})
</script>