1. 함수
함수란? 하나의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다.
함수를 선언한 후 호출할 때마다 해당 작업을 반복해서 수행할 수 있습니다.
자바스크립트에서는 함수도 하나의 타입으로 사용됩니다.
함수를 사용하면 좋은 점
✔ 반복되는 코드를 한 번만 정리해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있습니다.
✔ 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아집니다.
✔ 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽습니다.
📌 함수 관련 용어
- 함수 정의 : 함수를 정의하는 것
- 함수 호출 : 함수를 사용하는 것
- 인수 : '함수를 호출할 때' 괄호 내부에 여러가지 자료를 넣는 것
- 매개변수 : 함수를 정의할 때 전달받은 인수를 정의하는 것
- 리턴 값 : 함수를 호출해서 최종적으로 나오는 결과 / 종료 지정
(1) 함수 선언
함수는 function 함수명 을 사용하여 선언할 수 있습니다.
// 함수 선언
function 함수명(매개변수 1, 매개변수 2) {
함수 실행문;
[return]
}함수를 선언할 때, 함수명, 매개변수, 반환(return)문을 선언할 수 있으며 매개변수와 반환문은 생략이 가능합니다.
✔ 매개변수 : 함수를 호출할 때 괄호 내부에 넣는 여러가지 자료
✔ 반환문 : 함수를 호출해서 최종적으로 나오는 결과
(2) 함수 호출
함수를 사용하는 것을 함수 호출이라고 하며, 함수 사용 시 함수명(전달매개변수1, 전달매개변수2)으로 사용합니다.
// 함수 선언 및 사용 예제
// 함수 선언
function add(x, y) {
return x + y;
}
// 함수 사용
let sum = add(2, 5);
console.log(sum) // 72. 함수 형태
(1) 선언적 함수
선언적 함수는 이름이 있는 일반적인 함수를 말합니다.
기본적으로 function 함수이름() {} 으로 사용합니다.
대부분의 프로그래밍 언어에서는 선언적 함수를 주로 사용하지만, 자바스크립트는 함수지향 프로그램으로 변수에 함수를 할당하거나 익명함수를 주로 사용하고 선언적 함수는 보조적인 수단으로 사용하는 것을 지향합니다.
function func() {
console.log("선언함수 1");
console.log("선언함수 2");
}
// 함수 호출
func();
/* 출력
선언함수 1
선언함수 2
*/
// 값 출력
console.log(func);
/* 출력
f func () {
console.log("선언함수 1")
console.log("선언함수 2")
}(2) 익명 함수
익명 함수(anonymous function)은 이름이 없는 함수로 변수를 선언해서 함수를 할당하는 것을 말합니다.
자바스크립트에서는 중복 선언을 막기 위해서 익명함수 사용을 권장합니다.
// 익명함수 선언
const func = function() {
console.log("익명함수 1");
console.log("익명함수 2");
}
// 함수 호출
func();
/* 출력
익명함수 1
익명함수 2
*/
// 값 출력
console.log(func);
/* 출력
f () {
console.log("익명함수 1")
console.log("익명함수 2")
}
*/📌 선언적 함수와 익명 함수의 차이
선언적 함수 : 함수 선언 전 사용 가능, 함수 재정의 가능
익명 함수 : 함수 선언 전 사용 불가능, 함수 재정의 불가능
3. 함수 종류
(1) 기본 매개변수
매개변수에 기본 값을 지정하는 것을 기본 매개변수라고 합니다.
기본 매개변수를 작성하면 매개 변수가 들어오지 않는 경우에 기본 값을 대체되어 사용됩니다.
기본 매개 변수와 일반 매개 변수를 섞어서 사용할 경우에는 기본 매개 변수가 오른쪽에 있어야 합니다.
// 기본 형태
함수이름(매개변수, 매개변수 = 기본값) {
내용
}
// 사용 예제
const work = function(name, wage = 9000, hours = 40) {
console.log(`${name}님, 급여 정보`);
console.log(`시급 : ${wage}원`);
console.log(`근무시간 : ${hours}시간`);
console.log(`급여 : ${wage * hours}원`);
}
// 최저 임금으로 최대한 일하는 경우
earnings("smith");
// 시급 1만원으로 최대한 일하는 경우
earnings("adam", 10000);
// 시급 1만원으로 52시간 일한 경우
earnings("tom", 10000, 52);(2) 화살표 함수
화살표 함수는 ES6에서 추가된 내용으로 =>를 이용하여 함수를 간결하게 표현할 때 사용합니다.
(자바의 람다식과 유사)
📌 화살표 함수 사용
- function 키워드를 생략
- 부등호 '=' 과 '>' 를 합쳐서 코딩
- 항상 익명함수 형식으로 표현
- 단일 명령문일 경우 함수의 중괄호 {}와 return을 생략
// 기본 형태
(매개변수) => {}
// 사용 예제
// 배열을 선언
let numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
// numbers에서 2의 배수만 추출한 후, 제곱을 한 후에 로그에 출력
// 메서드 체이닝 : 메서드가 리턴하는 값을 기반으로해서 메서드를 줄줄이 사용하는 것
numbers.filter((value) => value % 2 === 0) // 2의 배수만 추출 / [0, 2, 4, 6, 8]
// 메서드 체이닝
.map((value) => value * value) // 제곱 / [0, 4, 16, 36, 64]
.forEach((value) => console.log(value)); // [0, 4, 16, 36, 64](3) 콜백 함수
콜백 함수란 매개변수로 함수를 전달하는 것을 말합니다.
자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있습니다.
function callThreeTimes(callback) { // 함수 선언
for (let i = 0; i < 3; i++) {
callback(i);
}
}
const print = function(i) {
console.log(`${i}번째 함수 호출`);
}
// 함수 호출
callThreeTimes(print); // 매개변수로 함수 전달
/* 출력
0번째 함수 호출
1번째 함수 호출
2번째 함수 호출
*/
// 콜백 함수로 익명함수 사용하기
callThreeTimes(function (i) {
console.log(`${i}번째 함수 호출`);
});(4) 재귀 함수
재귀 함수는 함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 말합니다.
// 사용 예제
let num = 0;
function testFnc() {
// 재귀 함수 호출을 적용하여 1부터 10까지의 값을 출력
num++;
document.write(num, '<br>');
if(num === 10) return; // num 값이 10이면 종료
console.log(`${num}번째 호출`);
testFnc(); // 재귀 함수 호출
}
testFnc();(5) 나머지 매개변수
가변 매개변수 함수(매개변수의 개수가 고정적이지 않은 함수)를 사용할 때 나머지 매개변수를 사용합니다.
나머지 매개변수는 ...를 입력해서 매개변수를 배열로 입력합니다.
// 기본 형태
function 함수형 (...items) {}
// 사용 에제
function sample(...items) {
console.log(items);
}
// 매개변수 앞에 ...이 없을 때는 1번째 요소만 들어오지만
// ...이 있을 때는 매개변수로 넘어온 요소를 배열로 처리함
sample(1, 2); // [1, 2]
sample(1, 2, 3); // [1, 2, 3]
sample(1, 2, 3, 4); // [1, 2, 3, 4]
function sample2nd(items) {
console.log(items)
}
sample2nd([1, 2]);
sample2nd([1, 2, 3]);
sample2nd([1, 2, 3, 4]);(6) 전개 연산자
배열을 전개해서 함수의 매개변수로 전달하는 것을 전개 연산자라고 합니다.
함수 호출 시 배열 앞에 마침표 3개(...)를 붙이는 형태로 사용합니다.
// 기본 형태
함수이름(...배열)
// 사용 예제
const array = [1, 2, 3, 4];1. 기본적인 전개 연산자 사용법
1) 인수로 전달
function sample1st(a, b, c, d) {
console.log('sample1st() 실행');
console.log(a, b, c, d);
}
// 전개 연산자를 이용해서 배열을 인수로 전달
// 배열은 개개로 전개해서 전달한 것과 결과가 같음
sample1st(...array); // 호출할 때 ...을 붙임
sample1st(array[0], array[1], array[2], array[3]);
2) 함수의 리턴 값 배열로 하고 결과 값을 전개 할당
function sample2nd() {
console.log('sample2nd() 실행');
let array = [1, 2, 3, 4];
return array;
}
console.log(sample2nd()); // [1, 2, 3, 4]. 결과 값은 배열
// sample2nd() 호출 결과를 각각 변수에 저장하려면?
// let arrayNew = sample2nd();
// let a = arrayNew[0];
// let b = arrayNew[1];
// let c = arrayNew[2];
// let d = arrayNew[3];
let [a, b, c, d] = sample2nd(); // 배열을 각 변수에 할당
console.log(a); // 1
2. 나머지 매개변수와 함께 사용하는 경우
function sample3rd(...items) {
document.write('<br>sample3rd() 실행<br>');
document.write(items, '<br>');
for (const item of items) {
document.write(item, '<br>');
}
}
console.log('# 전개 연산자를 사용하지 않은 경우');
sample3rd(array); // 배열의 요소로 배열을 가진 매개변수가 됨. [[1, 2, 3, 4]] -> 0번 인덱스가 배열 전체
console.log('# 전개 연산자를 사용한 경우');
sample3rd(...array); // 숫자 하나하나가 전개되어서 들어옴. 배열의 요소가 4개인 매개변수가 됨.
// [1, 2, 3, 4] -> 인덱스 순서대로 사용 가능
3. 일반 매개변수에 전개 연산자 사용
function sample4th(items) {
document.write('<br>sample4th() 실행<br>');
document.write(items, '<br>');
for (const item of items) {
document.write(item, '<br>');
}
}
// 전개 되어서 전달이 됨. sample4th(1, 2, 3, 4)과 동일한 결과.
// items에 1만 전달이 되고, 배열이 아니기 때문에 for문으로 순회가 안됨
sample4th(array);
sample4th(...array); // 1. Uncaught TypeError: items is not iterable at sample4th()
sample4th(array[0], array[1], array[2], array[3]);
// 1. Uncaught TypeError: items is not iterable at sample4th()
(7) 타이머 함수
타이머 함수는 특정 시간 이후에 콜백함수를 호출하거나 멈출 수 있는 함수입니다.
1. 타이머 호출
특정 시간 후에 함수를 호출하는 setTimeout(함수, 시간)
setTimeout(function() {
console.log('2초 후에 실행됩니다.');
}, 2 * 1000); // 시간의 기초단위는 밀리 초 단위특정 시간마다 함수를 호출하는 setInterval(함수, 시간)
let count = 0;
setInterval(() => {
console.log(`2초마다 실행됩니다.(${count}번째)`);
count++;
}, 2 * 1000);2. 타이머 종료
setTimeout() 함수로 설정한 타이머를 제거하는 clearTimeout(타이머_ID)
let count = 0;
let id = setInterval(() => {
console.log(`1초마다 실행됩니다(${count}번째)`);
count++;
}, 1 * 1000);setInterval() 함수로 설정한 타이머를 제거하는 clearInterval(타이머_ID)
setTimeout(() => {
console.log('타이머를 종료합니다.');
clearInterval(id);
}, 5 * 1000); // 5초후 종료