1. 함수의 기본 형태
- 함수 호출 : 함수를 사용하는 것.
- 매개변수 : 함수 호출 시, 괄호 내부에 넣는 값
- 리턴값 : 함수를 호출해서 최종적으로 나오는 결과
- 함수 : 코드의 집합을 나타내는 자료형
1). 익명 함수(Anonymous Function)
- 아래와 같이 이름이 없는 함수
function() { }2). 선언적 함수
- 이름이 있는 함수
function 함수() {
}
let 함수 = function () { };✅ 기본 미션
p.202 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증샷
3). 기본 매개변수
- 매개변수에 기본값을 지정하여 사용하는 매개변수
가변 매개변수 함수: 매개변수의 개수가 고정되어 있지 않는 함수- 전개 연산자 : 배열을 함수의 매개변수로써 전개하고 싶을 때 사용
함수 이름 (매개변수 = 기본값, 매개변수)
function sample(a=기본값, b) { }확인 문제
- A부터 B까지 범위를 지정했을 때 범위 안의 숫자를 모두 곱하는 함수 작성하기
지문이 명확하지 않았고, 실행 결과가 이상해서 정오표를 찾아봤지만, 그래도 애매했다.
A가 무조건 B보다 작다는 조건이 없다.
그래서 A > B 일 경우를 생각해주었고,
- 범위 안의 숫자를 모두 곱하는 함수라면, A=1 이고 B=2일 경우
1과 2사이에는 숫자가 없으므로 0이 답이 되어야하지 않을까? 라는 생각이 든다.
- 다음 과정에 따라 최대값을 찾는 max() 함수 작성
2-1. 매개변수로 배열 을 받는 max()함수
<script>
const max = function (array) {
let output = array[0];
for (const i of array) {
if (output < i) {
output = i;
}
}
return output;
}
console.log(max(1, 2, 3, 4));
</script>2-2. 매개변수로 숫자 를 받는 max() 함수
<script>
const max = function (...array) {
let output = array[0];
for (const i of array) {
if (output < i) {
output = i;
}
}
return output;
}
console.log(max(1, 2, 3, 4));
</script>2-3. 매개변수로 숫자와 배열 모두 를 입력 받는 max() 함수
const max2 = function (number, ...array) {
let output;
let items;
if (Array.isArray(number)) {
output = number[0];
items = number;
}
else if (typeof(number) === 'number') {
output = number
items = array
}
for (const i of array) {
if (output < i) {
output = i;
}
}
return output;
}
console.log(`max(배열): ${max([1, 2, 3, 4])}`);
console.log(`max(숫자, ...): ${max(1, 2, 3, 4)}`);
2. 함수 고급
1). 콜백 함수
- 자바스크립트는 함수도 하나의 자료형으로 매개변수로 전달 가능하다. 이렇게 매개변수로 전달하는 함수를
콜백 함수라고 한다.
콜백 함수를 활용하는 함수
forEach()
- 배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출한다.
const numbers = [273, 52, 103, 32, 57];
numbers.forEach( function (value, index, array) {
console.log(`${index}번째 요소: ${value}`);
});map()
- 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수
let numbers = [273, 52, 103, 32, 57];
numbers = numbers.map( function (value) {
return value * value;
});
numbers.forEach(console.log);filter()
- 콜백 함수에서 리턴하는 값이
true인 것들만 모아서 새로운 배열을 만드는 함수
const numbers = c
const evenNumbers = numbers.filter(function (value) {
return value % 2 === 0;
});
console.log(`원래 배열: ${numbers}`);
console.log(`짝수만 추출: ${evenNumbers}`);2). 화살표 함수
- map(), filter() 함수처럼 단순한 형태의 콜백 함수를 쉽게 입력하기위해 생긴 함수 생성 방법
let numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
// method chaining
numbers
.filter((value) => value % 2 === 0)
.map((value) => value * value)
.forEach((value) => {
console.log(value)
});- 메소드 체이닝 : 어떤 메소드가 리턴하는 값을 기반으로 함수를 줄줄이 사용하는 것을 말한다.
3). 타이머 함수
- 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수
| 함수 이름 | 설명 |
|---|---|
| setTimeout(함수.시간) | 특정 시간 후에 함수를 한 번 호출 |
| setInterval(함수.시간) | 특정 시간마다 함수를 호출 |
| clearTimeout(타이머_ID) | setTimeout() 함수로 설정한 타이머 제거 |
| clearInterval(타이머_ID) | setInterval() 함수로 설정한 타이머 제거 |
4). 좀 더 알아보기
- 즉시 호출 함수 : 익명함수를 생성하고 곧바로 함수를 호출하는 패턴
-
스코프(Scope) : 변수가 존재하는 범위
같은 단계에 있을 경우 무조건 충돌이 발생하는데, 스코프 단계를 변경하는 방법은 중괄호를 사용해서 블록을 만들거나, 함수를 생성해서 블록을 만드는 방법이 있다. -
섀도잉(Shadowing) : 블록이 다른 경우 내부 변수가 외부 변수를 가리는 현상
-
엄격 모드(strict mode) : 블록의 가장 위쪽에
'use strict'라는 문자열을 이용하여 코드를 엄격하게 검사한다. -
익명 함수 : 순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성된다.
-
선언적 함수 : 순차적인 코드 실행이 일어나기 전에 생성되어 같은 블록이라면 어디에서 함수를 호출해도 상관 없다.
확인 문제
- fillter 함수의 콜백 함수 부분을 채워서
홀수만 추출, 100이하의 수만 추출, 5로 나눈 나머지가 0인 수만 추출하는 코드를 작성해보자.
✅ 선택 미션
p.240 확인 문제 1번 풀고, 풀이 과정 설명하기
<script>
let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76];
// 홀수만 추출하고
numbers = numbers.filter((value) => value % 2 === 1)
// 100이하의 수만 추출하고
numbers = numbers.filter((value) => value < 101)
// 5로 나눈 나머지가 0인 수만 추출
numbers = numbers.filter((value) => value % 5 === 0)
console.log(numbers);
</script>
- 다음 코드를 forEach 메소드를 사용하여 형태를 변경해보자.
