함수는 코드의 집합을 나타내는 자료형입니다.
함수를 쓰게 되면 반복 작업을 피할 수 있고, 가독성이 높아지고, 유지보수가 쉬워진다는 장점이 있습니다.
이름이 붙어있지 않은 익명 함수는 아래와 같이 활용합니다.
function(){}이름이 있는 선언적 함수는 아래와 같이 활용합니다.
function 함수(){}
함수에는 매개변수와 리턴값을 넣어줄 수 있습니다. 매개변수는 함수에 넣는 input을, 리턴값은 결과로 나오는 output으로 생각할 수 있습니다.
function 함수(매개변수, 매개변수1, 매개변수2 •••) {
return 리턴값
}
윤년 예제
<body>
<script>
function leapyear(year){
return (year%4 == 0) && (year%100 != 0) || (year%400 == 0)
}
console.log(`2020년은 윤년일까? ${leapyear(2020)}`);
console.log(`2010년은 윤년일까? ${leapyear(2010)}`);
</script>
</body>
숫자 더하기 예제
<body>
<script>
function sumNum(a, b){
let output = 0;
for(let i = a; i<=b; i++) output += i;
return output;
}
</script>
</body>
최솟값 예제
<body>
<script>
function min(array){
let output = array[0];
for(let i = 0; i<array.length; i++){
output = Math.min(array[i], output);
}
return output;
}
</script>
</body>
나머지 매개변수(...)를 사용하면 배열이 아니라 숫자들만 입력해도 배열로 들어오게 됩니다.
만약 매개변수와 나머지 매개변수를 같이 쓰게 된다면 기본 매개변수의 개수만큼 숫자들이 들어가고 남은 숫자들이 배열이 됩니다.
또한 매개변수에 기본값을 입력할 수 있습니다.
| Chapter 5-1 마무리 |
| 1. A부터 B까지 범위를 지정했을 떄 범위 안의 숫자를 모두 곱하는 함수를 만들어보세요. |
|
<script>
function mul(A, B){
let output = 1;
for(let i = A; i<=B; i++) output *= i;
return output;
}
console.log(mul(1, 2))
console.log(mul(1, 3))
</script>
|
| 2. 다음 과정에 따라 최대값을 찾는 max() 함수를 만들어보세요. |
|
<script>
const max = function max(array, ...nums){
let output, items
if(Array.isArray(array)){
output = array[0]
items = array
}
else if(typeof(array) === 'number'){
output = array
items = nums
}
for(const item of items){
if(output < item) output = item
}
return output
}
console.log(max([1, 2, 3, 4]))
console.log(max(1, 2, 3, 4))
</script>
|
콜백함수는 매개변수로 전달하는 함수입니다. 무슨 말이지? 싶을 수 있습니다. 쉽게 생각하면 함수가 함수를 실행시키는 것? 정도로 이해하면 될 것 같습니다...
function callThreeTimes(callback) {
for(let i = 0; i<3; i++) callback(i)
}
function print(i) {
console.log(`${i}번째 함수 호출`)
}
callThreeTimes(print)
> 0번째 함수 호출
> 1번째 함수 호출
> 2번째 함수 호출
callThreeTimes라는 함수에 print라는 함수를 매개변수로 주면서 0부터 2가 print 함수의 매개변수로 들어가면서 실행이 됩니다.
뭔지 잘 모르겠어도 예제를 계속하다보면 이해가 갈 것!!
콜백함수를 활용하는 함수로는 forEach(), map(), filter() 등이 있습니다.
- forEach(value, index, array)
- map(value, index, array)
- filter(value, index, array)
콜백함수를 더 간단하게 사용할 수 있는 방법이 있는데 바로 화살표함수(=>)를 사용하면 됩니다!
var numbers = [1, 2, 3, 4, 5]
numbers.map(function(i){
return i*i
})var numbers = [1, 2, 3, 4, 5]
numbers.map((i) => i * i)
기존의 익명 함수를 화살표 함수로 변경해 사용할 수 있습니다!
| Chapter 5-2 마무리 |
| 1. filter 함수의 콜백 함수 부분을 채워서 홀수만 추출, 100 이하의 수만 추출, 5로 나눈 나머지가 0인 수만 추출해주세요. |
|
<script>
let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]
numbers = numbers.filter(i => i%2 == 1)
numbers = numbers.filter(i => i<=100)
numbers = numbers.filter(i => i%5 == 0)
console.log(numbers)
</script>
|
| 2. 이전에 반복문 부분에서 살펴보았던 다음과 같은 코드를 배열의 forEach 메소드를 사용하는 형태로 변경해주세요. |
|
<script>
const array = ['사과', '배', '귤', '바나나']
array.forEach(function(value, index) {
console.log(index)
})
array.forEach(function(value, index) {
console.log(value)
})
</script>
|
이번주도 마무리 완료! *^____^*
'혼공스' 카테고리의 다른 글
| 혼공단 11기 회고록 (1) | 2024.02.05 |
|---|---|
| 혼공스 - 5주차 👍 (1) | 2024.01.29 |
| 혼공스 - 3주차!! (1) | 2024.01.15 |
| 혼공스 - 2주차 (｡･∀･)ﾉﾞ (1) | 2024.01.08 |
| 혼공스 - 1주차! 🤓 (1) | 2024.01.02 |