Javascript 콜백 함수

BooKi·2022년 2월 3일
0

Javascript

목록 보기
14/46
post-thumbnail

⭐Javascript 콜백 함수

📕콜백 함수

매개변수로 전달되는 함수

const f = function(콜백){
	콜백()
}

const hi = function(){
	console.log('Hi')
}
f(hi) -> Hi
----------------------------------------------------------------------------------
const f = function(콜백){
	콜백(10)
}

const num = function(a){
	console.log(`${a}이 매개변수로 들어왔다)
}
f(num) -> 10이 매개변수로 들어왔다
----------------------------------------------------------------------------------
const f = function(콜백){
	콜백(10)
}

f(function(a){
	console.log(`${a}이 매개변수로 들어왔다`)}) -> 10이 매개변수로 들어왔다
----------------------------------------------------------------------------------
const f = function(array, 콜백){
	for(const key of array){
    	콜백(key)
    }
}
const num = function(a){
	console.log(`${a}이 매개변수로 들어왔다`)
}

f([1, 0, 32, 567], num)
1이 매개변수로 들어왔다
0이 매개변수로 들어왔다
32이 매개변수로 들어왔다
567이 매개변수로 들어왔다

📗배열 메소드 내 콜백 함수

forEach
const a = [0, 1, 3, 10]
a.forEach(function (value, index) {
	console.log(`${index}번째의 값은 ${value} 입니다`)
})
0번째의 값은 0 입니다
1번째의 값은 1 입니다
2번째의 값은 3 입니다
3번째의 값은 10 입니다

filter
console.log(a.filter(function (value, index){
	return value % 2 === 0
}))
-> [0, 10]

console.log(a.filter(function (value, index){
	return value % 2 === 1
}))
-> [1, 3]

map
console.log(a.map(function (value, index) {
	return value + '^^'
}))
-> ['0^^', '1^^', '3^^', '10^^']

📘화살표 함수

위와 같은 짧은 함수들을 간단하게 쓰기위해 function 대신 => 를 쓴다

본문에 리턴코드 한줄만 있다면 리턴과 중괄호도 생략가능하다

(매개변수) => {본문}
a.forEach((value, index) => console.log(`${index}번째의 값은 ${value} 입니다`))

console.log(a.filter((value, index) => value % 2 === 0))

console.log(a.map((value, index) =>	value + '^^'))

profile
성장을 보여주는 기록

0개의 댓글