05-1 함수의 기본 형태
함수
코드의 집합을 나타내는 자료형
함수 호출 - 함수 사용
매개변수 - 함수를 호출할 때 괄호 내부에 넣는 자료
리턴값 - 함수를 호출해서 최종적으로 나오는 결과
장점
- 반복되는 코드를 한번만 정의 후 필요할 때마다 호출하여 반복작업 줄임
- 기능별로 쪼개 함수별로 나눌 수 있어 전체코드의 가독성 향상 및 수정이 편리하여 유지보수가 용이해짐
- 여러 코드를 한번에 묶어 실행 가능
※ 웹브라우저가 내장하고있는 함수의 소스코드는 볼 수 없음
익명 함수
- 이름이 붙어 있지 않는 함수
| function () { } |
<script>
// 변수를 선언합니다.
const 함수 = function () {
console.log('함수 내부의 코드입니다 ... 1')
console.log('함수 내부의 코드입니다 ... 2')
console.log('함수 내부의 코드입니다 ... 3')
console.log('')
}
// 함수를 호출합니다.
함수()
함수()
// 출력합니다.
console.log(typeof 함수)
console.log(함수)
</script>
실행결과)
function - 함수의 자료형
선언적 함수
- 이름이 있는 함수
| function 함수() { } |
| let 함수 = function () { }; |
<script>
// 함수를 생성합니다.
function 함수 () {
console.log('함수 내부의 코드입니다 ... 1')
console.log('함수 내부의 코드입니다 ... 2')
console.log('함수 내부의 코드입니다 ... 3')
console.log('')
}
// 함수를 호출합니다.
함수()
함수()
// 출력합니다.
console.log(typeof 함수)
console.log(함수)
</script>
실행결과)
익명 함수 결과와 달리 f 뒤에 "함수"라고 이름이 붙어있음
사용자 정의 함수의 매개 변수와 리턴값
function 함수 (매개변수, 매개변수, 매개변수) {
문장
문장
return 리턴값
}
함수에 넣는 input = 매개변수
결과로 나오는 output = 리턴값
<script>
// 함수를 선언합니다.
function f(x) {
return x * x
}
// 함수를 호출합니다.
console.log(f(3))
</script>
실행결과)
윤년을 확인하는 함수 만들기
윤년 - 몇년에 한 번 2월이 29일까지 있는데 이런 해를 윤년이라고 함
조건
- 4로 나누어 떨어지는 해는 윤년
- 100으로 나누어 떨어지는 해는 윤년x
- 400으로 나누어 떨어지는 해는 윤년
처음에 내가 짠 코드 (개얼탱업네 ,,, 함수 만들라는데 조건문을 왜하고 앉아잇음)
정답 코드
진짜 창피하지만 뭐 어째 원래 못하는 걸 인정하고 나아가는 것으로부터 시작
오키오키 이제 함수 어떻게 하는지 좀 알앗음
A부터 B까지 더하는 함수 만들기
처음 짠 코드
ㅋㅋㅋ,,
정답 코드
후,,, 컴퓨터는 멍청해서,,, 일일이 지정해줘야한다고 ,, 하 나는 왜 생각이 안나냐 그릏게 배웟어도 짱날게
일반적으로 숫자를 계산해서 출력할 때 이런 형태의 함수를 사용
| function 함수(매개변수) { let output = 초깃값 처리한다 return output } |
최솟값을 구하는 함수
<script>
function min(array){
let output = array[0];
for(const item of array){
if (output > item) {
output = item
}
}
return output
}
const testArray = [55, 102, 60, 40, 78];
console.log(min(testArray));
</script>
실행결과)
최댓값 구하기
(내가 함)
나머지 매개변수
가변 매개변수 함수 - 호출할 때 매개변수의 개수가 고정적이지 않은 함수
이러한 함수를 구현할 때 나머지 매개변수라는 형태의 문법을 사용
| function 함수 이름 (...나머지 매개변수) { } |
함수의 매개변수 앞에 마침표 3개(...)를 입력하면 매개변수들이 배열로 들어옴
최솟값구하기를 배열을 사용하지 않는 형태로 만들기
<script>
// 나머지 매개변수를 사용한 함수 만들기
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)}`)
</script>
나머지 매개변수와 일반 매개변수 조합하기
나머지 매개변수는 이름 그대로 나머지임. 일반적인 매개변수와 조합해서 사용 가능
| function 함수 이름(매개변수, 매개변수, ...나머지 매개변수) { } |
<script>
function sample(a,b, ...c) {
console.log(a, b, c)
}
sample(1, 2)
sample(1, 2, 3)
sample(1, 2, 3, 4)
</script>
실행결과)
매개변수 a,b가 먼저 들어가고 남은 것들은 모두 c에 배열형태로 들어감
min (배열) 형태로 매개 변수에 배열을 넣으면 배열 내부에서 최솟값을 찾아주는 함수
min (숫자,숫자,...)형태로 매개변수를 넣으면 숫자들 중에서 최솟값을 찾아주는 함수
매개변수의 자료형에 따라 다르게 작동하는 min()함수
<body>
<script>
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 array) {
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])}`)
</script>
</body>혼자 코드 못 침 ,,,, 보고 쳣다 그래도 참고해서 어케 해볼라고 했는데 안 됨 ,,,
type of 연산자 - 일반적으로 Javascript에서 데이터의 타입을 확인하기 위해 사용
그러나, typeof를 사용하여 배열을 검사하면, typeof는 'object'를 리턴 (array를 리턴해야함)
배열은 'object'의 특수한 한 형태이기 때문
따라서, typeof만으로는 객체가 배열인지 확인할 수 없다. → Array.isArray() 사용
Array.isArray() - 객체가 배열인지 확인하는 함수
전개연산자
매개변수로 배열을 입력할 수 없고 숫자를 입력해야 하는 함수가 있다면 배열 요소를 하나하나 전개해서 입력하는 방법밖에 없음 min(array[0], array[1], array[2], array[3])
이런 상황에 대비하고자 자바스크립트는 배열을 전개해서 함수의 매개변수로 전달해주는 전개 연산자를 제공
사용방법
| 함수 이름(...배열) |
전개연산자의 활용
<script>
// 단순하게 매개변수를 모두 출력하는 함수
function sample(...items) {
console.log(items)
}
// 전개 연산자 사용 여부 비교하기
const array = [1, 2, 3, 4]
console.log('# 전개 연산자를 사용하지 않은 경우')
sample(array)
console.log('# 전개 연산자를 사용한 경우')
sample(...array)
</script>
실행결과)
전개연산자를 사용하지 않은 경우엔 4개의 요소가 있는 배열이 들어옴 (배열이 매개변수로 들어옴)
전개연산자를 사용한 경우엔 숫자가 하나하나 들어옴 (숫자 하나하나가 전개되어 매개변수로 들어옴)
기본매개변수
함수의 매개변수로 항상 비슷한 값을 입력하는 경우가 있음. 항상 같은 매개변수를 여러 번 반복해서 입력하는 것이 귀찮게 느껴질 수 있음. 이러한 경우 매개변수에 기본값을 지정하는 기본매개변수를 사용
| 함수 이름(매개변수, 매개변수=기본값, 매개변수=기본값) |
매개변수는 왼쪽부터 입력. 따라서 기본매개변수는 오른쪽에 사용
function sample(a=기본값, b) { } → 잘못된 예시
기본매개변수의 활용
<script>
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)
</script>매개변수로 시간과 시급을 입력받아 급여를 계산
함수의 역할 : 이름, 시급, 시간을 출력하고, 시급과 시간을 곱한 최종 급여 출력
매개변수 : name(이름), wage(시급), hours(시간)
실행결과
기본매개변수는 무엇이든 넣을 수 있음
기본매개변수를 추가한 윤년함수
(매개변수를 입력하지 않은 경우 자동으로 올해가 윤년인지 확인하는 함수)
실행결과)
위에꺼랑 비교하려고 놔둠
전개 연산자가 없던 시절에는 apply () 함수 사용
// 단순하게 매개변수를 모두 출력하는 함수
function sample(...items) {
console.log(items)
}
// 전개 연산자 사용 여부 비교하기
const array = [1, 2, 3, 4]
console.log(sample.apply(null, array))
</script>실행결과
[1 ,2 ,3 ,4]
05-2 함수 고급
콜백함수
- 함수도 하나의 자료형이므로 매개변수로 전달가능. 이렇게 매개변수로 전달하는 함수를 콜백함수라고 함
매개변수를 함수로 받고, 그 함수를 통해 결과값을 호출
콜백함수(1): 선언적 함수 사용하기 ? ? ?
<script>
// 함수를 선언합니다.
function callThreeTimes (callback) {
for (let i = 0; i < 3; i++) {
callback(i)
}
}
function print (i) {
console.log(`${i}번째 함수 호출`)
}
// 함수를 호출합니다.
callThreeTimes(print)
</script>callThreeTimes() 함수는 함수를 매개변수로 받아 해당함수를 3번 호출
callThreeTimes() 함수의 callback 매개변수에 print()함수를 전달 그리고 callThreeTimes() 함수 내부에서는 callback(i) 형태로 함수를 호출. 따라서 매개변수로 전달했던 print()함수가 print(0), print(1), print(2)로 차례차례 호출됨.
실행결과
콜백함수(2): 익명 함수 사용하기
<script>
// 함수를 선언합니다.
function callThreeTimes (callback) {
for (let i = 0; i < 3; i++) {
callback(i)
}
}
// 함수를 호출합니다. 익명함수 사용
callThreeTimes(function (i) {
console.log(`${i}번째 함수 호출`)
})
</script>
실행결과
콜백함수를 활용하는 함수: forEach()
콜백함수를 활용하는 가장 기본적인 함수forEach() 메소드는 배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출.
| function (value, index, array) { } |
배열의 forEach() 메소드
<script>
const numbers = [273, 52, 103, 32, 57]
numbers.forEach(function (value, index, array) {
console.log(`${index}번째 요소 : ${value}`)
})
</script>
실행결과
콜백함수를 활용하는 함수: map()
map()메소드도 배열이 갖고 있는 함수. map() 메소드는 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수
배열의 map() 메소드
<script>
// 배열을 선언합니다.
let numbers = [273, 52, 103, 32, 57]
// 배열의 모든 값을 제곱합니다.
numbers = numbers.map(function (value, index, array) {
return value * value
})
// 출력합니다.
numbers.forEach(console.log)
</script>
실행결과
콜백함수를 활용하는 함수: filter()
배열이 갖고있는 함수 filter()메소드는 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수
배열의 filter() 메소드
<script>
const numbers = [0, 1, 2, 3, 4, 5]
const evenNumbers = numbers.filter(function (value) {
return value % 2 === 0
})
console.log(`원래 배열: ${numbers}`)
console.log(`짝수만 추출: ${evenNumbers}`)
</script>실행결과
원래배열 : 0,1,2,3,4,5
짝수만 추출: 0,2,4
화살표 함수
function 키워드 대신 화살표(=>)를 사용
| (매개변수) => { } |
이렇게도 사용
| (매개변수) => 리턴값 |
메소드체이닝
- 어떤 메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것
배열의 메소드와 화살표 함수
<script>
// 배열을 선언합니다.
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)
})
</script>
실행 결과
타이머 함수
| 함수 이름 | 설명 |
| setTimeout(함수, 시간) | 특정 시간 후에 함수를 한 번 호출 |
| setInterval(함수, 시간) | 특정 시간마다 함수를 호출 |
타이머 걸기
<script>
setTimeout(() => {
console.log(`1초 후에 실행됩니다.`)
}, 1 * 1000)
let count = 0
setInterval(() => {
console.log(`1초마다 실행됩니다.(${count}번째)`)
count++
}, 1 * 1000)
</script>
실행 결과
1초 후에 setTimeout() 함수의 콜백 함수가 실행, 1초마다 setInterval()함수의 콜백 함수 실행
강제종료해야함
타이며 종료하고 싶을 때
| 함수 이름 | 설명 |
| clearTimeout(타이머_ID) | setTimeout() 함수로 설정한 타이머를 제거 |
| clearInterval(타이머_ID) | setInterval() 함수로 설정한 타이머를 제거 |
이 함수들의 매개변수에는 타이머ID라는 것을 넣음
타이머 ID는 setTimeout() 함수와 setInterval() 함수를 호출할 때 리턴값으로 나오는 숫자
타이머 취소하기
<script>
let id
let count = 0
id = setInterval(() => {
console.log(`1초마다 실행됩니다(${count}번째)`)
count++
}, 1 * 1000)
setTimeout(() => {
console.log('타이머를 종료합니다.')
clearInterval(id)
}, 5 * 1000)
</script>
실행 결과
setInterval()함수를 사용해서 1초마다 메세지 출력, setTimeout() 함수를 사용해서 5초 후에 타이머를 종료
즉시호출함수
| (function () { }) () |
script를 여러 개 사용하면 변수 이름이 충돌할 가능성 많아짐 → 실행 안되는 경우 생김
변수가 존재하는 범위를 스코프라고 함. 이 스코프는 같은 단계에 있을 경우 무조건 충돌 일어남 이러한 스코프 단계를 변경하는 방법 1. 중괄호 사용 2. 함수 생성 = 블록을 만드는 방법
'Javascript > 혼공자스' 카테고리의 다른 글
| 08 예외처리 (0) | 2024.02.06 |
|---|---|
| 혼공자스 7 Chapter 객체 (0) | 2022.12.16 |
| 혼공자스 6 Chapter 객체 (0) | 2022.12.02 |
| 혼공자스 Chapter 4 반복문 (0) | 2022.11.13 |
