자바스크립트 - 함수에 대한 기초 정리

혼공스를  참고한 함수 핵심 포인트 5강 1,2

 

• 익명함수 와 선언적함수

 

익명함수

익명함수의 경우 순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성된다.

const f = function () {}

f()  // 함수호출

선언적함수

선언적 함수의 경우 순차적 코드 실행이 일어나기도 전에 생성된다.

선억적 함수를 생성하기 전에 함수를 먼저 호출해도 아무런 문제가 없다.

function 함수() {}

f()  // 함수호출

 

익명함수를 선언적함수보다 선호하는 편이라고 한다. 그 이유는 두 함수를 동시에 사용할 경우 결과를 예측하기 어려워 익명함수를 선호한다고 한다. 그래도 선언적함수를 읽는 방법을 간단하게라도 알아 두는 것이 좋다고 한다.

 

---

• 매개변수 와 리턴값

함수예제

const f = function (매개변수, 매개변수) {

	return 리턴값
}

(위 함수는 익명함수이다. )

 

매개변수는 함수의 괄호안에 넣는 변수를 매개변수라고 한다.매개변수를 통해 함수는 외부의 정보를 입력 받을 수 있다.

리턴값은 함수의 최종적인 결과를 리턴값이라고 한다. 함수 내부에 return 키워드를 입력하고 뒤에 값을 넣어서 생성한다.

 

---

 

 

• 나머지 매개변수

function f(a, b, ...theArgs) {

}

f()         //  undefined undefined [] 
f(1)        //  1 undefined []
f(1,2)      //  1 2 []
f(1,2,3)    //  1 2 [3]
f(1,2,3,4)  //  1 2 [3,4]

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

 

 

---

 

 

• 전개연산자

나머지 매개변수와 마찬가지로 ... 마침표 3개를 이용하지만 함수를 호출할때 사용한다.

배열 복사, 객체 복사에도 쓰인다.

 

const f = function (a, b, c){
	console.log(a, b, c)
}

const a = [1, 2, 3]
f(...a)  // 1 2 3

 

 

---

 

 

문제 풀이

 

문제 

max([1, 2, 3, 4]) 형태와 max(1, 2, 3, 4) 형태 모두 입력할 수 있는 max() 함수를 만들기

const max =                {
	let output = array[0]
    let items
    
    
    
    
    
    return output
}
 
 console.log(`max(배열): ${max([1, 2, 3, 4])}`)
 console.log(`max(배열): ${max(1, 2, 3, 4)}`)

답

const max = function(first, ...rests) {
    let output = array[0]
    let items
    if (Array.isArray(first)){
        output = first[0]
        items = first
    } else if (typeof(first) === 'number') {
        output = first
        items = rests
    }
    for (const result of items){
        if (output < result) {
        output = result
        }
    }
    return output
}
 
 console.log(`max(배열): ${max([1, 2, 3, 4])}`)
 console.log(`max(숫자, ...): ${max(1, 2, 3, 4)}`)

const max = function(first, ...rests) {
	if (Array.isArray(first)) {
    	let output = first[0]
        for (const result of first){
            if (output < result){
            output = result
            } 
        } 
        return output
    } else {
      let output = first
      for (const result of rests){
            if (output < result){
            output = result
            } 
    
    }
    return output
}
 
 console.log(`max(배열): ${max([1, 2, 3, 4])}`)
 console.log(`max(숫자, ...): ${max(1, 2, 3, 4)}`)

---

---

• 콜백함수

 

자바스크립트에서는 함수도 하나의 자료형으로 매개변수로 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 콜백 함수라고 한다.

const 테스트 = function (콜백함수) {
	for(let i = 0; i < 5; i++){
    	콜백함수(i)
    }
}

const 함수 = function (콜백함수의_매개변수) {
	console.log(`${콜백함수의_매개변수}번째 안녕하세요`)
}
테스트(함수)

// 결과

0번째 안녕하세요
1번째 안녕하세요
2번째 안녕하세요
3번째 안녕하세요
4번째 안녕하세요


// i가 5번보다 작은 수 만큼 돌기때문에 0부터 4까지 총 5 번 돈다.

 

콜백함수를 활용하는 함수

 

forEach() : 매개변수로 value, index, array를 가진다.  

const 배열 = [273, 52, 100, 43]
배열.forEach(function (value, index) {
	console.log(`${index}번째의 값은 ${value}`)
})
// 0번째 값은 273
// 1번째 값은 52

 

map() : 기본의 배열 요소를 기반으로 새로운 배열을 만들어서 리턴하는 함수

let 배열 = [273, 52, 100, 47]
배열 = 배열.map(function (value, index) {
	return value + "!!"
})
console.log(배열)
// ["273!!", "52!!", "100!!", "47!!"]
// 이렇게 새로운 배열을 만들 수 있다.

 

filter() : 매개변수로 forEach와 같은 value, index, array를 가진다.  true 또는 false를 리턴하는 함수가 올것을 예상한다. 그래서 ture 또는 false를 모두 리턴할 수 있다. 비파괴적 함수이다. forEach()와 다른점은 const를 letd으로 변경했다는 점이다.

let 배열 = [273, 52, 100, 47]
배열 = 배열.filter(function (value, index) {
	return value % 2 === 0
})
console.log(배열)
// [52, 100]

 

forEach / map / filter 메소드는 많이쓰임으로 알아두면 좋다

 

 

• 화살표함수

let 배열 = [273, 52, 100, 47]
배열 = 배열.filter(function (value, index) => {
	return value % 2 === 0
})
배열 = 배열.filter((value, index) => value % 2 === 0)
console.log(배열)

let 배열 = [273, 52, 100, 47]
배열 = 배열.map(function (value, index) {
	return value + "!!"
})
배열 = 배열.map((value, index) => value + "!!")
console.log(배열)

화살표 함수의 경우 내부에 리턴값을 불러오는 게 하나라면 화살표를 통해 좀더 간결하게 표현할 수 있다.

( function / return  지워짐 )

 

 

• 타이머함수

setTimeout() : 특정한 시간 후에 한번 // setTimeout의 경우 좀더 특별한 사용방법이 있다고 한다. (배우지 않고 넘어감)

setInterval() : 특정한 시간마다

setTimeout(function() {
	console.log('setTimeout 함수입니다')
}, 1000) // 밀리초 단위로 숫치를 적어준다. 1000밀리초는 1초이다.
setInterval(function() {
	console.log('setInterval 함수입니다')
}, 2000)// 밀리초 단위로 숫치를 적어준다. 2000밀리초는 2초이다.

setInterval()의 경우 특정시간 마다 반복되기 때문에 위 코드대로면 2초마다 'setInterval 함수입니다.' 라는 문구가 반복된다.

 

 ▶️ 타이머 정지하는 방법

const a = setTimeout(function() {
	console.log('setTimeout 함수입니다')
}, 1000) // 밀리초 단위로 숫치를 적어준다. 1000밀리초는 1초이다.
const b = setInterval(function() {
	console.log('setInterval 함수입니다')
}, 2000)// 밀리초 단위로 숫치를 적어준다. 2000밀리초는 2초이다.

console.log(a,b)

clearTimeout(a)
clearInterval(b)

// 1초,2초마다 '~ 함수입니다'를 실행해야하지만 코드가 실행되는 시간은 순식간이기때문에
console.log(a,b)만 호출되고 '~ 함수입니다'는 호출 되지 않습니다.

 

• 즉시호출함수 : 여러사람들이 함께 작업을 하기때문에 변수의 이름이 충돌하는 것을 방지하기 위해 사용한다.

function() {

})()

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

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

위 코드처럼 맨 위에 let으로 파이값을 정의했어도, 아래에 함수 블록을 생성하여 작업한다면 변수 이름이 충돌하는 것을 막을 수 있습니다.

 

 

• 엄격모드 : 엄격모드는 let, const 등 키워드를 선언하지 않았다면 오류가 발생하도록 합니다.

(function () {
	'use strict'
    
}) ()

 

 

---

문제

 

filter함수의 콜백 함수 부분을 채워서 실행!

let numbers = [273, 25, 75, 52,103, 32, 57, 24,76]

// 홀수 만 추출 
// 100이하의 수만 추출
// 5로 나눈 나머지가 0인 수만 추출


console.log(numbers)

 

답

let numbers = [273, 25, 75, 52,103, 32, 57, 24,76]

numbers = numbers.filter((x) => x % 2 === 1)
numbers = numbers.filter((x) => x <= 100)
numbers = numbers.filter((x) => x % 5 === 0)

console.log(numbers)