가수면

JavaScript 함수 (1) 본문

웹 개발/웹 개발

JavaScript 함수 (1)

니비앙 2022. 11. 11. 17:39

함수의 기본 작동 원리

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
Comments