가수면
JavaScript 함수 (1) 본문
함수의 기본 작동 원리
const f = function (아무거나) {
# 점프
return 아무거나 + 5
}
consol.log(f(1))
# 6
1. 함수는 건너뛰고 consol.log를 인식한다.
2. 점프 구간으로 넘어가 내용물을 리턴값으로 리턴한다.
- 간단한 응용
const sum = function (limit) {
let output = 0
for (let i = 1; i <= limit; i++) {
output += i
}
return output
}
consol.log(`합은 ${sum(10)}입니다.)`
# 합은 55입니다.
consol.log(`합은 ${sum(20)}입니다.)`
# 합은 210입니다.
나머지 매개변수
함수 안에 '...매개변수'를 넣으면 함수는 배열 형식을 취하게 됨.
# b = 매개변수
const a = function (...b) {
console.log(b)
}
a(1)
#[1]
a(1, 2)
# [1, 2]
전개 연산자
함수를 호출할 때 사용 (배열을 벗겨줌)
const 함수 = function (a, b, c) {
console.log(a, b, c)
}
const a = [1, 2, 3]
함수(...a)
# 1, 2, 3
함수의 배열 a, b, c에 각각 1, 2, 3이라는 값이 들어가게 하려면 '함수(...배열)'을 사용
기본매개변수 (눈도장 정도만)
함수 이름만 사용했을 때, 기본값으로 0이라든가 현재 년도라든가를 넣어주는 안전망(?)
현재 예)
# 윤년 구하기 함수
const xYear = function (year = 기본매개변수) {
const xYear = function (year = new Date().getFullYear()) {
.
.
.
xYear()
# 원래는 오류가 나야할 것이 올해로 계산되어 출력
과거 예)
const xYear = function (year) {
if (typeof(year) === 'undefined') {
year = new Date().getFullYear()
}
# 혹은
year = typeof(year) === 'undefined' ? new Date().getFullYear() : year
# 혹은
year = year || new Date().getFullYear()
year = typeof(year) === 'undefined' ? new Date().getFullYear() : year
연도가 undefined라면 현재 년도를 넣고, undefined가 아니라면 연도를 넣어라
문제1. 윤년 구하기
- 4로 나누어 떨어지는 해는 윤년
- 하지만 100으로 나누어 떨어지는 해는 윤년 X
- 하지만 400으로 나누어 떨어지는 해는 윤년
-기본형-
const xYear = function (연도) {
const 윤년이면 =
(연도 % 4 === 0)
&& (연도 % 100 !== 0)
|| (연도 % 400 === 0)
if (윤년이면) {
return true
} else {
return false
}
}
-코드 정리-
const xYear = function (year) {
return (year % 4 === 0)
&& (year % 100 !== 0)
|| (year % 400 === 0)
}
console.log (`2020년은 윤년일까? === ${xYear(2020)}`)
# 2020년은 윤년일까? === true
문제2. 최솟값 구하기(1)
const min = function (배열) {
let output = 배열[0]
console.log(`처음 실행 때의 output = ${output}`)
for (const value of 배열) {
console.log(`현재 비교 대상 ${output}과 ${value} 중에 더 작은 것은?`)
if (output > value) {
output = value
}
console.log(`= ${output}`)
}
return output
}
console.log(min([52, 273, 32, 103, 275, 24, 57]))
# 처음 실행 때의 output = 52
# 현재 비교 대상 52과 52 중에 더 작은 것은?
# = 52
# 현재 비교 대상 52과 273 중에 더 작은 것은?
# = 52
# 현재 비교 대상 52과 32 중에 더 작은 것은?
# = 32
# 현재 비교 대상 32과 103 중에 더 작은 것은?
# = 32
# 현재 비교 대상 32과 275 중에 더 작은 것은?
# = 32
# 현재 비교 대상 32과 24 중에 더 작은 것은?
# = 24
# 현재 비교 대상 24과 57 중에 더 작은 것은?
# = 24
# 24
문제3. 최솟값 구하기(2)
min([1, 2, 3, 4]) 형태와 min(1, 2, 3, 4) 형태를 모두 입력할 수 있는 min()함수 만들기
const min = function (첫번째요소, ...나머지) {
if (Array.isArray(첫번째요소)) {
let output = 첫번째요소[0]
for (const t of 첫번째요소) {
if (output > t) {
output = t
}
}
return output
} else {
let output = 첫번째요소[0]
for (const t of 나머지) {
if (output > t) {
output = t
}
}
return output
}
}
console.log(min([1, 2, 3, 4, 5]))
console.log(min(1, 2, 3, 4, 5))
Array.isArray(배열): 배열 -> true / 배열X -> false
문제4.
console.log(multiplyAll(1, 2))
2
console.log(multiplyAll(1, 3))
6
인 함수를 만들기
const multiplyAll = function (a, b) {
let output = 1
for (let i = a; i <= b; i++) {
output *= i
}
return output
}
문제의 답이 되는 코드들을 보면 이 코드들이 어떤 기능을 하는지, 왜 이 코드가 왔고, 이런 식으로 풀어가야 하는구나 이해는 되는데 이걸 문제만 보고 풀어보라고 했을 땐 풀 수가 없었다. ㅜㅜ
하지만 좌절할 필요는 없다. 뭐든 숙달되면 익숙해지고 쉬워지는 법 아니겠는가!
※구버전 자바스크립트의 '가변 매개변수'와 '전개 연산자'의 경우 현 시점에서는 필요가 없는 것 같지만, 혹시나 후에 검색할 일이 있을 수도 있으니 키워드만 적어놓음.
'웹 개발 > 웹 개발' 카테고리의 다른 글
Javascript 기본 개념 추가 (2) (0) | 2022.11.18 |
---|---|
JavaScript 함수 (2) (0) | 2022.11.12 |
JavaScript 반복문 (0) | 2022.11.10 |
JavaScript 조건문 (0) | 2022.11.08 |
JavaScript 기본 용어 및 개념 / 자료와 변수 (0) | 2022.11.07 |