안녕하세요.
이 공간은 제가 프론트엔드를 처음 접하며 배운 것을 주저리주저리 쓰는 공간입니다.
이번 내용은 javascript 4편입니다.
요즘은 책으로 공부를 하고 있는데요.
공부했던 내용 중 어려웠던 내용 위주로 작성해볼까 해요.
콜백 함수
자바스크립트에서 가장 특이한 개념입니다.
함수를 함수의 매개변수로 전달하는 거죠.
예시를 볼게요.
function callThreeTimes (callback) {
for (let i = 0; i < 3; i++) {
callback(i)
}
}
function print(i) {
console.log(`${i}번째 함수 호출`)
}
callThreeTimes(print)callThreeTimes 함수는 함수를 매개변수로 받아 함수를 3번 호출합니다.
callback 매개변수 부분에 print라는 함수가 전달되고,
위 함수를 실행하면
0번째 함수 호출
1번째 함수 호출
2번째 함수 호출
이라는 결과가 나옵니다.
이제 이 신기한놈을 어떻게 활용하는지 알아볼게요.
forEach()
콜백 함수를 활용하는 기본적 메소드입니다.
단순히 배열 내부요소를 사용해 호출합니다.
형태는 아래와 같습니다.
function (value, index, array) {}이제 이 기본 내용을 활용한 예제를 볼게요.
const numbers = [273, 12, 34, 1, 74]
numbers.forEach(function (value, index, array) {
console.log(`${index}번째 요소 : ${value}`)
})예제를 실행하면 그 결과는??
map()
map 메소드는 콜백 함수에서 리턴한 값을 기반으로 새로운 배열을 창조합니다.
예시를 확인해볼까요?
let numbers = [273, 12, 34, 1, 74]
numbers = numbers.map(function (value, index, array) {
return value * value
})
numbers.forEach(console.log)역시 value, index, array를 매개변수로 갖는 콜백함수를 사용하고,
return값은 value의 제곱값이네요.
그리고 출력할 때 매개변수를 console.log 자체를 넘겼습니다.
결과는?!
배열의 데이터들이 전부 제곱된 값이 등장합니다.
아, 물론 콜백 함수의 매개변수는 꼭 3개일 필요는 없습니다!!
일반적으로는 value, 혹은 value와 index 이렇게 주로 사용된다 해요.
filter()
이 메소드 역시 배열이 가지고 있는 함수입니다.
콜백 함수에서 리턴하는 boolean 데이터가 true인 값을 모으고,
그 데이터를 다시 배열로 빚어냅니다.
예시를 보겠습니다.
const numbers = [11, 1613, 30, 44, 86, 245, 1, 23]
const oddNumbers = numbers.filter(function (value) {
return value % 1 === 0
})
const evenNumbers = numbers.filter(function (value) {
return value % 2 === 0
})
console.log(`원본 배열데이터 : ${numbers}`)
console.log(`홀수 데이터 : ${oddNumbers}`)
console.log(`짝수 데이터 : ${evenNumbers}`)원본에서 fliter 메소드를 활용해 나머지 연산자가 1은 홀수,
2는 짝수로 분류하는 함수입니다.
실행시켜볼까요?
화살표 함수
콜백함수를 쉽게 입력하기 위한 함수 생성방법입니다.
function을 대신해서 화살표(=>)를 사용합니다.
기존 함수 작성방법부터 볼게요.
const fe = function () {
console.log('기존 함수');
}
.
.
.
(매개변수) {
블라블라블라
}위의 함수를 화살표 함수로 변환한다면?
const fe = () => console.log('화살표 함수');
.
.
.
(매개변수) => 리턴값이렇게 바꿔주는거죠.
그리고, 화살표 함수는 내부에서 this 키워드가 지칭되는 대상이 다릅니다!!!!!!!!!
즉, function으로 선언한 일반 함수는
메소드 / 함수 자체
어떤 방식으로 호출이 되는지에 따라 this가 바인딩됩니다.
반면, 화살표함수는
선언될 시점의 상위 스코프가 this로 바인딩됩니다.
음...
'화살표 함수는 this가 내가 의도한대로 바인딩 된다.'
라고 생각해보려 합니다.
그리고 화살표 함수를 쓰면 안되는 조건이 있는데요.
1) 메소드
2) 생성자 함수
3) addEventListener()의 콜백함수
이 점은 주의해야 할 거 같습니다.
그럼 지금까지 공부한 내용을 바탕으로 예제를 살펴볼게요.
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
numbers
.filter((value) => value % 2 === 0)
.map((value) => value * value)
.forEach((value) => {
console.log(calue)
})함수 해석을 해보기 전에,
html과 css에서나 보던
.블라블라
이게 등장한 점이 눈에 띄어요.
filter 메소드는 배열을 리턴
map 메소드도 배열을 리턴
forEach 메소드 역시 배열을 리턴
즉, 어떠한 메소드들이 리턴하는 값을 기반으로 굴비엮듯 다 엮어서 사용할 수 있습니다.
이를 메소드 체이닝이라고 합니다.
어쨋던, 위 함수는
나머지 연산자를 이용해 짝수를 발라내고,
그 짝수의 제곱을 한 후,
출력하겠죠?
결과를 볼까요?
타이머 함수
특정 시간 이후에 콜백 함수를 호출하는 함수입니다.
setTimeout(함수, 시간)setTimeout 함수는 특정 시간 후에 함수를 한 번 호출해줍니다.
setInterval(함수, 시간)setInterval 함수는 특정 시간마다 함수를 호출합니다.
예시를 바로 볼게요.
setTimeout(() => {
console.log('1초 후에 실행됩니다!')
}, 1000)
let count = 0
setInterval (() => {
console.log(`1초마다 실행됩니다!(${count}번째 반복 중)`)
count++
}, 1000)참고로, 시간은 ms단위이므로 1000은 1초라는 의미입니다.
그런데...
뭔가 이상해요.
시작은 있는데 끝이 없어요.
찜찜하지만 이걸 실행시키면 어떻게 될까요?
바로 무간지옥에 빠지게 됩니다.
타이머를 종료하고 싶을 때는 아래 함수를 씁니다.
clearTimeout(타이머_ID)clearInterval(타이머_ID)위 두개의 함수에서 매개변수를 보시면 타이머 ID가 들어가있는데요.
타이머 ID는 setTimeout 함수와 setInterval 함수를 호출할 때 리턴값으로 나오는 숫자입니다.
예시를 보는게 빠르겠네요.
let id
let count = 0
id = setInterval(() => {
console.log(`1초마다 실행됩니다!(${count}번째 반복중..)`)
count++
}, 1000)
setTimeout(() => {
console.log('타이머를 종료합니다.')
clearInterval(id)
}, 5 * 1000)1초마다 메세지를 출력하다가,
5초가 지나면 타이머를 종료한다는 메세지와 함께 종료되겠죠?
