[혼공JS] 함수 chapter 5
함수의 기본 형태
익명함수
fuction( ){ }함수는 코드의 집합을 나타내는 자료형입니다.
사용하면 좋은점 :
- 반복되는 코드를 한번만 정의하고 필요할 때 마다 호출하여 반복 작업을 피할 수 있음
- 긴 프로그램을 기능별로 나누어 여러 함수로 제작하면 모듈화로 가독성이 좋아짐
- 기능별로 수정이 가능하므로 유지보수가 쉽습니다.
예제
<script>
//변수를 생성합니다.
const 함수 = function(){
console.log("함수 내부 코드입니다....!")
console.log("함수 내부 코드입니다....!")
console.log("함수 내부 코드입니다....!")
console.log("")
}
함수()
함수()
console.log(typeof(함수))
console.log(함수)
</script>결과
f(){} 형태처럼 이름이 붙지않는 함수를 익명함수라고 함
선언적 함수
이름이 있는 함수를 선언적 함수라고 합니다.
fuction 함수(){}
let 함수 = fuction(){ };예제
<script>
function 함수() {
console.log("함수 내부 코드입니다....!")
console.log("함수 내부 코드입니다....!")
console.log("함수 내부 코드입니다....!")
console.log("")
}
함수()
함수()
console.log(typeof(함수))
console.log(함수)
</script>
이전과 달리 f 함수() { } 로 이름이 선언 된것을 확인 할 수 있습니다.
매개변수와 리턴값
함수를 호출 할떄 괄호 안에 적는 것을 매개변수 prompt()함수 안에 적는 것을 매개변수
최종 결과값을 리턴값이라 함
fuction 함수(매개변수,매개변수){
문장
문장
return 리턴값
}input = 매개변수 , output = 리턴값
function f(x)
{
return x*x
}
console.log(f(3))
기본적인 함수 예제
윤년을 확인하는 함수 만들기
1. 4로 나누어 떨어지는 해는 윤년인다.
2. 100으로 나누어 떨어지는 해는 윤년이 아니다. ( 즉 100년 이 아니면 윤년)
3. 400으로 나누어 떨어지는 해는 윤년이다.
조건 구현 ? ->
1 번 (year %4 ==0)
2 번 (year %100 !==0)
3 번 (year %400 ==0)
말이 이상한데 4년일때 윤년 거기서 100년주기가 아니고 400년 주기인 년도.
조건 (year %4 ==0) && (year %100 ==0) || (year %400 ==0)
function f(x)
{
return x*x
}
console.log(f(3))
function 윤년(year)
{
return (year %4 ==0) && (year %100 !==0) || (year %400 ==0)
}
console.log(`2020년은 윤년일까? === ${윤년(2020)}`)
console.log(`2021년은 윤년일까? === ${윤년(2021)}`)
console.log(`2022년은 윤년일까? === ${윤년(2022)}`)
console.log(`2023년은 윤년일까? === ${윤년(2023)}`)
console.log(`2024년은 윤년일까? === ${윤년(2024)}`)
※함수 이름 : 일반적으로 true or false를 반환하는 함수는 isOOO이라는 함수명을 붙임
A부터 B까지 더하는 함수
<script>
function sumAll(a,b) {
let output =0
for(i=a;i<=b;i++)
{
output+=i
}
return output
}
console.log(`1부터 2023까지 합 === ${sumAll(1,2023)}`)
console.log(`1부터 500까지 합 === ${sumAll(1,500)}`)
</script>
최소값을 구하는 함수
<script>
function min(array) {
let output =array[0]
for(const item of array)
{
if(output>item){
output=item
}
}
return output
}
const testitem= [52,55,105,203,11,23,1]
console.log(`${testitem}중에`)
console.log(`최솟값 ${min(testitem)}`)
</script>배열내의 첫번째 값과 그다음값을 순서대로 비교하면서 (for문으로 반복해서) 더 작은값이면 output을 바꾼다!
나머지 매개변수 - 가변 매개변수 함수
fuction 함수 이름(...나머지 매개변수){ } function sample(...items) {
console.log(items)
}
sample(1,2)
sample(1,2,3)
sample(1,2,3,4)
매개변수 배열을 사용하지 않은 형태로 계산가능하다!
예제 : 최대값을 구하는 함수 - 배열없이
function max(...array)
{
let output =array[0]
for(const item of array)
{
if(output<item){
output=item
}
}
return output
}
console.log(`max(52,55,105,203,11,23,1)중에`)
console.log(`최댓값 ${max(52,55,105,203,11,23,1)}`)
나머지 매개변수와 일반 매개변수 조합하기
fuction 함수 이름(매개변수,매개변수, ...나머지 매개변수) { } function sample(a,b, ...c) {
console.log(a,b,c)
}
sample(1,2)
sample(1,2,3)
sample(1,2,3,4)
나머지 매개변수는 마지막에 배열로 표현되는 것을 확인 할 수 있다!
매개변수 자료형에 따라 다르게 동작하는 min함수
function max(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 items)
{
if(output<item){
output=item
}
}
return output
}
console.log(`max배열 ${max([52,55,105,203,11,23,1])}`)
console.log(`max숫자 ${max(52,55,105,203,11,23,1)}`)
전개연산자
함수이름(...배열)
function sample(...items) {
console.log(items)
}
const array = [1,2,3,4]
console.log('#전개연산자 사용않하는 경우')
sample(array)
console.log('#전개연산자 사용하는 경우')
sample(...array)
전개연산자를 사용해야지 풀어저서 사용가능하다!
기본 매개변수
함수이름(매개변수,매개변수=기본값,매개변수=기본값)
function earnings(name,wage=8590,hours=40) {
console.log(`${name}님의 급여정보`)
console.log(`-시급 : ${wage}원`)
console.log(`-근무시간 : ${hours}시간`)
console.log(`-총 급여 : ${wage*hours}원`)
console.log('')
}
earnings('별')
earnings('핫산',1000000)
earnings('냐옹',10000,52)
함수고급
콜백함수
function callThreeTimes(callback) {
for(let i=0; i<3;i++){
callback(i)
}
}
function print(i) {
console.log(`${i}번쨰 함수 호출`)
}
callThreeTimes(print)
callThreeTimes함수의 매개변수에 print함수를 전달?
function callThreeTimes(print)
{
for(let i=0; i<3;i++)
{
function print(i)
{
console.log(`${i}번쨰 함수 호출`)
}
}
}
callThreeTimes(print)이렇게 진행 되는거 같다!
익명함수사용 해보기 - 많이 사용되는 형태
function callThreeTimes(callback) {
for(let i=0; i<3;i++){
callback(i)
}
}
callThreeTimes(
function(i) {console.log(`${i}번쨰 함수 호출`)}
)
콜백 함수를 사용하는 함수 :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,index,araay)
{
return value*value
})
numbers.forEach(console.log)
콜백 함수를 사용하는 함수 :filter()
리턴하는 값이 true인것만 모아서 새로운 배열을 만듭니다.
const numbers = [273,52,103,32,57]
const evenNumbers = numbers.filter(function(value){
return value % 2 ===0
})
console.log(`원래배열 : ${numbers}`)
console.log(`짝수만 추출 : ${evenNumbers}`)
화살표 함수
단순한 콜백함수를 쉽게 입력하고자 화살표 함수를 생성함
function(매개변수) { } 을 쉽게
(매개변수) => {}
(매개변수 )=> 리턴값 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)
})
순서대로 - 필터로 짝수인 수들만 걸러내고 ( 0,2,4,6,8) - 맵으로 value제곱을 하고 (0,4,16,36,64) -> 이치로 value를 콘솔로 내보냄
타이머함수
| setTimeout(함수,시간) | 특정시간 후에 함수를 한번 호출합니다. |
| setInterval(함수,시간) | 특정 시간마다 함수를 호출합니다. |
setTimeout(() => {
console.log('1초 후에 실행됩니다.')
}, 1*1000);
let count = 0
setInterval(() => {
console.log(`1초 마다 실행됩니다.(${count}번째)`)
count++
}, 1*1000);
| clearTimeout(타이머_ID) | setTimeout()함수 타이머 제거 |
| clearInterval(타이머_ID) | setInterval()함수 타이머 제거 |
let id
let count = 0
id =setInterval(() => {
console.log(`1초 마다 실행됩니다.(${count}번째)`)
count++
}, 1*1000);
setTimeout(() => {
console.log(`타이머 종료합니다.`)
clearInterval(id)
}, 5*1000);
즉시 호출 함수를 왜 사용할까?
- 외부에서 호출한 스크립트 코드에서 식별자가 충돌할 수 있기 때문에 블록으로 막거나 함수로 막아서 중복 되지 않게 하는것입니다.
함수를 만들자 마자 사용해서 충돌 방지!
익명 함수 vs 선언 함수
익명 함수 - 코드 순서대로 호출됨
선언 함수 - 순차적인 코드 실행전에 생성됨 - 따라서 어디에서 호출해도 실행됨 - 어디에 함수명이 같은게 있을지 모르기에 문제가 많이 생길 수 도 있다