개발일지 4일차

함수

함수의정의

- 함수는 코드의 집합을 나타내는 자료형이다

기본형태

function (){}

- 반복되는 코드를 한번만 정의 해놓고 필요시마다 호출하며 반복작업을 피한다.

- 전체코드의 가독성이 좋아진다.

- 유지보수가 쉽다.

 

익명함수

- 이름이 붙어있지 않은 함수를 익명함수 라고 한다.

const 함수이름 = function (매개변수){

}

함수이름() //함수호출


console.log(typeof 함수이름) //함수의 자료형을 확인
console.log(함수이름)		//함수 출력

선언적 함수

- 이름 있는 함수

function 함수이름(매개변수){

}

위의 코드와 아래코드는 같은 기능을 수행한다.

let 함수이름 = function () { };

매개변수와 리턴값

- 함수를 호출할 떄 괄호 안에 적는것을 매개변수(parameter) 라고 한다.

- 함수의 최종결과를 리턴값이라고 한다.

function 함수이름(매개변수1, 매개변수2 ,매개변수3){
	실행문장
	실행문장
    return 리턴값
}

- 함수에 넣는 input이 매개변수이다.

- 결과로 나오는 output이 return이다.

function x(x){
	return x*x
}
console.log(x(3)) //9

 

함수예제

- 윤년 확인하기

function isLeapYear(year){
    return (year % 4 === 0) &&(year % 100 !==0 || year % 400 ===0)
}

console.log(`2020년은 윤년일까? === ${isLeapYear(2020)}`) //true
console.log(`2010년은 윤년일까? === ${isLeapYear(2010)}`) //false
console.log(`2000년은 윤년일까? === ${isLeapYear(2000)}`) //true
console.log(`1900년은 윤년일까? === ${isLeapYear(1900)}`) //false

*자바스크립트에서 true 또는 false (불린)을 리턴하는 함수는 "is함수이름()" 이라는 이름으로 만드는 편이다.

 

- a부터 b까지 더하는 함수

//숫자 계산시 가장많이 사용하는 형태
function sumAll(a,b){
    let output = 0  //초기값 설정
    for (let i = a; i<= b; i++){  a 부터 b까지 1씩 증가
        output +=i
    }
    return output
}

console.log(`1부터 100까지의 합:${sumAll(1,100)}`)
console.log(`1부터 500까지의 합:${sumAll(1,500)}`)

 

- 최소값을 구하는 함수

//최솟값을 구하는 함수
function min(array){
    let output = array[0]
    for (const item of array){  //현재 output 보다 더 작은 item이 있다면
        if (output > item){ // output 의 값을 item으로 변경
            output = item
        }
    }
    return output
}
const testArray = [52,273,32,103,275,24,57]
console.log(`${testArray}중에서`)
console.log(`최소값 = ${min(testArray)}`)

나머지 매개변수

- 매개변수가 여러개 일때 나머지 매개변수라는 문법을 사용

function .함수이름(...나머지 매개변수){}

함수의 매개변수 앞에 마침표 3개(...매개변수)를 입력하면 매개변수들이 배열로 들어온다.

function maegae(...items){
	console.log(items)
}

maegae(1,2)  //(2) [1, 2]
maegae(1,2,3)  //(3) [1, 2, 3]
maegae(1,2,3,4)  //(4) [1, 2, 3, 4]

나머지 매개변수와 일반 매개변수 조합하기

function maegae(a,b,...c){
	console.log(a,b,...c)
}

maegae(1,2)  //(2) 1, 2 []
maegae(1,2,3)  //(3) 1, 2, [3]
maegae(1,2,3,4)  //(4) 1, 2, [3, 4]

함수를 호출할떄 매개변수 a,b가 먼저 들어가고 남은 요소들은 모두 c에 배열형태로 들어간다.

전개연산자

- 배열을 전개해서 함수의 매개변수로 전달해주는 전개연산자를 사용한다.

함수 이름(...배열)

전개연산자의 활용

function sample(...items){
	console.log(items)
}

const array = [1,2,3,4]

console.log('#전개 연산자를 사용하지 않은경우')
sample(array) //[Array(4)]
console.log('#전개 연산자를 사용한 경우')
sample(...array) // [1,2,3,4]

함수고급

콜백함수

-함수도 하나의 자료형이므로 매개변수로 전달할 수 있다. 이러한 함수를 콜백(call back) 함수라고 한다.

function callThreeTimes(callback){
	for(let i = 0; i < 3; i++){
    	callback(i) //callback 이라는 매개변수는 함수이므로 호출가능
    }
}

function print (i){
	console.log(`${i}번째 호출`)
}

//함수호출
callThreeTimes(print)

callThreeTimes() 함수는 함수를 매개변수로 받아 해당 함수를 3번호출한다.

콜백함수를 활용하는 함수:forEach()

- 콜백함수를 활용하는 가장기본적인 함수이다.

function (value, index, array) {}

기본형태

const numbers = [273, 52 ,103, 32,57]

numbers.forEach(function(value,index,array){
	console.log(`${index}번째 요소${value} `)
} )

//0번째 요소273 
//1번째 요소52 
//2번째 요소103 
//3번째 요소32 
//4번째 요소57

콜백함수를 활용하는 함수:map()

- map() 메소드도 배열이 갖고있는 함수이다. 리턴한 값을들 기반으로 새로운 배열을 만드는 함수이다.

let numbers = [1,2,3,3]
numbers = numbers.map(function(value,index,array){
	return value * value
} )

numbers.forEach(console.log)

콜백함수를 활용하는 함수:filter()

const numbers = [0,1,2,3,4,5]
const evenNumbers = numbers.filter(function(value,index,array){
	return value % 2 ===0
})


console.log(`${numers}원래 배열`)  //0,1,2,3,4,5원래 배열
console.log(`${evneNumbers} 짝수배열`)  //0,2,4 짝수배열

화살표함수

- function 키워드 대신 화살표 (=>) 를 사용한다

(매개변수) => 리턴값

콜백함수에 사용하는 function () {} 의 간단한 사용형태

const array = [0,1,2,3,4,5,6,7,8,9]

array.map(value) => value * value

 

타이머함수

- 특정시간이후 호출할 수 있는 함수

setTimeout(함수,시간) : 특정 시간 후에 함수를 한번 호출

setInterval(함수,시간) : 특정 시간마다 함수호출

setTimeout

setTimeout(() => {
	console.log('1초 후에 실행됩니다.')
},1000) //1초

setInterval

setTimeout(() => {
	console.log('1초 후에 실행됩니다.')
},1000) //1초

let count = 1
setInterval(()=>{
	console.log(`1초마다 실행됩니다. ${count}번째`)
    count++
}, 1000)

 

스코프

- 변수가 존재하는 범위, 스코프 단계를 변경하는 방법은 중괄호를 사용하거나, 함수를 생성해서 블록을 만든다.

- 같은 단계에 있을때 충돌이 일어난다.

<script>
let pi = 3.14
console('파이값은 ${pi}')
</script>

//충돌
<script>
let pi = 3.141592
console('파이값은 ${pi}')
</script>

섀도잉

- 내부 변수가 외부변수를 가리는 현상

<script>
let pi = 3.14
console.log(`파이값은 ${pi}`) //3.14

//블록을 사용한 스코프생성
    {
    let pi = 3.141592
    console.log(`파이값은 ${pi}`) //3.141592
    }
console.log(`파이값은 ${pi}`) //3.14

//함수블록을 사용한 스코프생성

function sample(){
	let pi = 3.141592
    console.log(`파이값은 ${pi}`) //3.141592
}

sample()
console.log(`파이값은 ${pi}`) //3.14

위와 같은 방법으로 섀도잉을 해결하여 변수끼리 충돌이 일어나지 않게한다.

 

함수또한 조건문,반복문과 같이 코드한줄마다 이해해야 하는 부분들이 있어서 조금 이해하기 어려웠지만

전체적인 개념이나 코드의 흐름을 이해하는데는 크게 어렵지 않았다 전체적으로다 이해하려는 욕심을 버리고

하나씩 차근차근 이해하면 될 것 같다.