✨05-1 함수
-
익명 함수
함수를 사용하는 것은 함수호출, 즉 '함수를 호출하다'고 표현합니다. 함수를 호출할 때는 괄호 내부에 여러가지 자료를 넣는데, 이러한 자료를매개변수라고 부릅니다. 그리고 함수를 호출해서 최정적으로 나오는 결과를리턴값이라고 부릅니다.함수는 코드의 집합을 나타내는 자료형입니다.
function() {}함수를 코드의 집합이라고 말하는 이유는 중괄호
{...}내부에 코드를 넣기 때문입니다.
함수를 사용하면 좋은 점은 다음과 같습니다.-
반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있습니다.
-
긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아집니다.
-
기능별(함수별)로 수정이 가능하므로 유지보수가 쉽습니다.
// 변수를 선언합니다. const 함수 = function () { console.log('함수 내부의 코드입니다 ... 1') console.log('함수 내부의 코드입니다 ... 2') console.log('함수 내부의 코드입니다 ... 3') console.log('') } // 함수를 호출합니다. 함수() 함수() // 출력합니다. console.log(typeof 함수) console.log(함수)함수는 코드의 집합입니다. 그래서 함수를 실행하면 여러 코드를 한 번에 묶어서 실행할 수 있으며, 필요할 때마다 호출하여 반복적으로 사용할 수도 있습니다.
함수의 자료형은function이며 현재 코드에서 함수를 출력하면f() {}라고 출력됩니다.
이때f는 함수를 나타냅니다. 함수를 출력했을 때 별다른 이름이 붙저있지 않은 것을 볼 수 있습니다. 이처럼 이름이 붙어있지 않은 함수를익명함수라고 표현합니다.
-
-
선언적 함수
function 함수() {}function 함수 () { console.log('함수 내부의 코드입니다 ... 1') console.log('함수 내부의 코드입니다 ... 2') console.log('함수 내부의 코드입니다 ... 3') console.log('') } // 함수를 호출합니다. 함수() 함수() // 출력합니다. console.log(typeof 함수) console.log(함수)
-
매개변수와 리턴값
함수를 호출할 떄 괄호 안에 적는 것을매개변수라고 합니다.
prompt()함수를 사용할 때는 매개변수로 message를 넣어야 합니다. 그러면 prompt()함수의
최종 결과는 문자열로 나옵니다. 함수의 최종 결과를리턴값이라고 부릅니다.function 함수 ( 매개변수, 매개변수, 매개변수) { 문장 문장 return 리턴값 }함수에 넣는 input이
매개변수이고, 결과로 나오는 output이리턴값입니다.
리턴값은 함수 내부에return키워드를 입력하고 뒤에 값을 넣어서 생성합니다.
// 함수를 선언합니다. function f(x) { return x * x } // 함수를 호출합니다. console.log(f(3))-
윤년을 확인하는 함수 만들기
- 4로 나누어 떨어지는 해는 윤년이다.
- 하지만 100으로 나누어 떨어지는 해는 윤년이 아니다.
- 하지만 400으로 나누어 떨어지는 해는 윤년이다.
function isLeapYear(year) { return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0) } console.log(`2020년은 윤년일까? === ${isLeapYear(2020)}`) console.log(`2010년은 윤년일까? === ${isLeapYear(2010)}`) console.log(`2000년은 윤년일까? === ${isLeapYear(2000)}`) console.log(`1900년은 윤년일까? === ${isLeapYear(1900)}`) -
최솟값을 구하는 함수
function min(array) { let output = array[0] for (const item of array) { // 현재 output 보다 더 작은 item이 있다면 if (output > item) { // output 값을 item으로 변경 output = item } } return output } const testArray = [52, 273, 32, 103, 275, 24, 57] console.log(`${testArray}중에서`) console.log(`최솟값 = ${min(testArray)}`)
-
-
나머지 매개변수
호출할 때 매개변수의 개수가 고정적이지 않은 함수를가변 매개변수 함수라고 부릅니다.
자바스크립트에서 이러한 함수를 구현할 때는나머지 매개변수라는 특이한 형태의 문법을 사용합니다.
function 함수 이름(...나머지 매개변수){}
함수의 매개변수 앞에 마침표 3개를 입력하면 매개변수들이배열로 들어옵니다.function sample(...items) { console.log(items) } sample(1,2) sample(1,2,3) sample(1,2,3,4)
이를 활용하면 이전에 살펴본min()함수의 매개변수에 배열을 사용하지 않는 형태로 변경 할 수 있습니다.// 나머지 매개변수를 사용한 함수 만들기 function min(...items) { // 매개변수 items는 배열처럼 사용합니다. let output = items[0] for (const item of items) { if (output > item) { output = item } } return output } // 함수 호출하기 console.log('min(52,273,32,103,275,24,57)') console.log(`=${min(52,273,32,103,275,24,57)}`)-
나머지 매개변수와 일반 매개변수 조합하기
function 함수 이름( 매개변수,매개변수, ...나머지 매개변수) {}function sample(a,b, ...c) { console.log(a, b, c) } sample(1, 2) sample(1, 2, 3) sample(1, 2, 3, 4)실행 결과를 보면 알 수 있듯이 함수를 호출할 때는 매개변수 a,b가 먼저 들어가고, 남은 것들은
모두 c에 배열 형태로 들어갑니다.지금까지 살펴보았던 내용을 종합해서 다음 함수를 구현해보세요.
- min(배열) 형태로 매개변수에 배열을 넣으면 배열 내부에서 최솟값을 찾아주는 함수
- min(숫자, 숫자, ...) 형태로 매개변수를 넣으면 숫자들 중에서 최소값을 찾아주는 함수
이를 구현 하려면 매개변수로 들어온 자료형이 배열인지 숫자인지 확인할 수 있어야 합니다.
숫자 자료형은typeof연산자를 사용합니다.function min(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 > item) { output = item } } return output } console.log(`min(배열): ${min([52,273,32,103,275,24,57])}`) console.log(`min(숫자, ...): ${min(52,273,32,103,275,24,57)}`)
-
-
기본 매개변수
매개변수에 기본값을 지정하는기본매개변수
함수 이름(매개변수, 매개변수=기본값, 매개변수 =기본값)매개변수는 왼쪽부터 입력하므로 다음과 같이 함수를 작성하면 기본 매개변수의 의미가 없습니다.
b에 값을 전달하기 위해서는 a에 값을 채워야 하기 때문입니다.
function sample(a=기본값, b) {}-> 기본 매개변수는오른쪽 매개변수에 사용합니다.function earnings (name, wage=8590, hours=40) { console.log(`# ${name} 님의 급여 정보`) console.log(`- 시급: ${wage}원`) console.log(`- 근무 시간: ${hours}시간`) console.log(`- 급여: ${wage * hours}원`) console.log('') } // 최저 임금으로 최대한 일하는 경우 earnings('구름') // 시급 1만원으로 최대한 일하는 경우 earnings('별', 10000) // 시급 1만원으로 52시간 일한 경우 earnings('인성', 10000, 52)
-
기본 매개변수를 추가한 윤년 함수
function isLeapYear(year=new Date().getFullYear()) { console.log(`매개변수 year: ${year}`) return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0) } console.log(`올해는 윤년일까? === ${isLeapYear()}`)
-
✨05-2 함수 고급
-
콜백함수
자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있습니다. 이렇게 매개변수로
전달하는 함수를 콜백callback함수 라고 합니다.// 함수를 선언합니다. function callThreeTimes (callback) { for (let i = 0; i < 3; i++) { callback(i) } } function print (i) { console.log(`${i}번째 함수 호출`) } // 함수를 호출합니다. callThreeTimes(print)callThreeTimes()함수는 함수를 매개변수로 받아 해당 함수를 3번 호출합니다.
callThreeTimes()함수의callback매개변수에print()함수를 전달했습니다. 그리고callThreeTimes()함수 내부에서는callback(i)형태로 함수를 호출하고 있습니다.
따라서 매개변수로 전달했던print()함수가print(0),print(1),print(2)로
차례대로 호출되어 실행 결과와 같은 결과를 냅니다.콜백 함수(2) 익명 함수 사용하기
// 함수를 선언합니다. function callThreeTimes (callback) { for (let i = 0; i < 3; i++) { callback(i) } } // 함수를 호출합니다. callThreeTimes(function (i) { console.log(`${i}번째 함수 호출`) })
-
콜백 함수를 활용하는 함수 : forEach()
콜백 함수를 활용하는 가장 기본적인 함수는forEach()메소드 입니다.forEach()메소드는
배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출해줍니다.
function (value, index, array) {}const numbers = [273, 52, 103, 32, 57] numbers.forEach(function (value, index, array) { console.log(`${index}번째 요소 : ${value}`) })
-
콜백 함수를 활용하는 함수 : map()
map()메소드도 배열이 갖고 있는 함수 입니다.
다음 코드에서는 콜백 함수 내부에서value * values를 하고 있으므로 모든 배열의 요소를
제곱한 새로운 배열을 만듭니다.// 배열을 선언합니다. let numbers = [273, 52, 103, 32, 57] // 배열의 모든 값을 제곱합니다. numbers = numbers.map(function (value, index, array) { return value * value }) // 출력합니다. numbers.forEach(console.log)
-
콜백 함수를 활용하는 함수 : filter()
filter()메소드도 배열이 갖고 있는 함수입니다.filter()메소드는 콜백 함수에서
리턴하는 값이true인 것들만 모아서 새로운 배열을 만드는 함수입니다.const numbers = [0, 1, 2, 3, 4, 5] const evenNumbers = numbers.filter(function (value) { return value % 2 === 0 }) console.log(`원래 배열: ${numbers}`) console.log(`짝수만 추출: ${evenNumbers}`)
-
-
화살표 함수
앞에서 살펴본map(),filter()함수처럼 단순한 형태의 콜백 함수를 쉽게 입력하고자
화살표 함수라는 함수 생성 방법이 있습니다. 화살표 함수는function키워드 대신
화실표(=>) 를 사용합니다.
(매개변수) => { }화살표 함수는 다음과 같이 간편하게 사용할 수 있습니다
(매개변수) => 리턴값// 배열을 선언합니다. let numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] // 배열의 메소드를 연속적으로 사용합니다. numbers .filter((value) => value % 2 === 0) .map((value) => value * value) .forEach((value) => { console.log(value) })filter()메소드는 배열을 리턴하므로map()메소드를 적용할 수 있고
map()메소드도 배열을 배ㅔ열을 리턴하므로forEach()메소드를 적용할 수 있습니다.
이렇게 어떤 메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것을
메소드 체이닝이라고 부릅니다.
-
타이머 함수
자바스크립에는 다음과 같이 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는
타이머 함수들이 있습니다.-
setTimeout(함수,시간): 특정 시간 후에 함수를 한 번 호출합니다. -
setInterval(함수,시간): 특정 시간마다 함수를 호출합니다.setTimeout(() => { console.log(`1초 후에 실행됩니다.`) }, 1 * 1000) let count = 0 setInterval(() => { console.log(`1초마다 실행됩니다.(${count}번째)`) count++ }, 1 * 1000)
타이머를 종료하고싶을때는
clearTimeout()함수와clearInterval()함수를 사용합니다.
clearTimeout(타이머_ID)/clearInterval(타이머_ID)
타이머_ID는setTimeout()함수와setInterval()함수를 호출 할때 리턴값으로
나오는 숫자입니다.let id let count = 0 id = setInterval(() => { console.log(`1초마다 실행됩니다(${count}번째)`) count++ }, 1 * 1000) setTimeout(() => { console.log('타이머를 종료합니다.') clearInterval(id) }, 5 * 1000)
-
