「웹해킹을 위한 자바스크립트(Javascript) 훑어보기」- 5. 콜백(callback)

본 글은 Udemy(유데미)에서 제공하는 Colt Steele님의 「The Web Developer 부트캠프 2023」 강의를 수강하며 배운 내용을 바탕으로 작성했습니다. 

웹 해킹 및 보안에 쓰이는 자바스크립트 코드를 보고 이해할 수 있는 수준에 다다르기 위해 전반적인 내용을 가볍게 훑어보는 기획입니다.

 

콜백 함수(callback function)

콜백 함수는 다른 함수의 인자로 이용되는 함수입니다.

콜백 함수를 이용하는 메서드를 살펴보며 이해해 봅시다.

---

forEach

forEach는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

const numbers = [1,2,3,4,5]

/*
function print(element) {
	consloe.log(element)
}
numbers.forEach(print)
*/
//일반적으로 미리 정의된 함수를 사용하지는 않음

numbers.forEach(function (el) {
	console.log(el)
})

위의 코드에서 주석 처리한 부분은 print()라는 함수를 미리 정의해 두고 forEach의 인자로 넘겨주고 있습니다.

일반적으로 콜백 함수를 사용할 때, 즉 인자로 함수를 넘겨줄 때는 미리 정의된 함수를 사용하지는 않습니다.

 

대신 아래처럼 인자로 넘겨줄 때 바로 함수를 정의하여 사용합니다.

 

실행하면 numbers에 저장된 원소에 각각에 대해 console.log()가 실행되어 1, 2, 3, 4, 5가 출력됩니다.

---

map

map은 콜백 함수의 반환값을 이용해서 새로운 배열을 생성해 줍니다.

const numbers = [1,2,3,4,5]
const evenNumbers = numbers.map(function(num){
	return num * 2;
})

//evenNumbers는 [2, 4, 6, 8, 10]

 

위의 예시에서 콜백 함수는 num 배열의 값을 두 배로 늘려 반환합니다. map 메서드는 이 반환값을 받아 새로운 배열인 evenNumbers에 저장합니다.

---

화살표 함수(arrow function)

메서드도 이미 함수인데, 콜백함수를 추가하려니 함수에 함수를 넣는 형태가 되어 문법이 조금 복잡합니다.

화살표 함수를 사용하면 조금 더 간결하게 표현할 수 있습니다. 콜백 함수를 포함하지 않는 단순한 함수를 정의할 때도 사용할 수 있습니다.

 

function이란 키워드를 함수로 대체한다고 볼 수 있습니다.

 

콜백 함수를 사용할 때 딱히 함수의 이름을 정하지 않았습니다.

하지만 이렇게 독립적인 상태로 함수를 둘 때는 이름을 꼭 정해야 합니다. 아래의 예시처럼요.

//함수를 독립적인 상태로 둘 수 없음
/*
function (x, y) {
	return x + y;
}
*/
//변수에 지정하거나
const add = function(x, y) {
	return x + y;
}
//함수 이름을 준다
functino add(x, y) {
	return x + y;
}

 

화살표 함수도 마찬가지입니다.

//화살표 함수도 마찬가지
const add2 = (x, y) => {
	return x = y;
}

---

implicit return(묵시적 반환)

화살표 함수는 '묵시적 반환'이라는 특별한 방법을 적용할 수 있습니다.

특정 상황에서 return 구문을 생략할 수 있습니다. return을 명시적으로 적지 않아도 반환된다는 점에서 implicit return이라는 이름이 붙었습니다.

const rollDie = () => (
	Math.floor(Math.random() * 6) + 1
)

const add = (a, b) => a + b

rollDie()와 add() 함수에는 return 키워드가 없지만, 묵시적 반환이 이루어져 함수 수행 결과가 잘 반환되어 정상적으로 동작합니다.

 

함수 내부 실행문을 괄호로 감싸거나 그냥 두어도 됩니다. 다만 반환값이 명확해야 하므로 함수 내부에 표현식이 하나만 존재해야 합니다.

---

화살표 함수의 사용

화살표 함수를 사용해서 아까 살펴봤던 map 예제를 다시 작성해 보겠습니다.

const numbers = [1,2,3,4,5]
const evenNumbers = numbers.map((num) => {
	return num * 2;
})

---

setTimeout, setInterval, clearInterval

setTimeout, setInterval, clearInterval은 동작을 지연시킬 수 있는 함수입니다. 이들을 이용하면 '3초 후에 console.log()를 실행해라'와 같은 명령이 가능합니다.

 

setTimeout

함수와 지연시간을 인자로 주어 지연시간 후에 함수를 실행합니다.

setTimeout(() => {
	console.log("Hello")
}, 3000);

 

setInterval

함수와 지연시간을 인자로 주어 지연시간이 지날 때마다 함수를 반복 실행합니다.

setInterval(() => {
	console.log("Hello")
}, 3000);

 

clearInterval

setInterval로 반복 실행 중인 함수를 정지합니다.

const id = setInterval(() => {
	console.log("Hello")
}, 3000);

clearInterval(id)

---

화살표 함수와 'this'

const person = {
	firsName: 'Smith',
	lastName: 'Jack',
	fullName: () => {
		return `${this.firstName} ${this.lastName}`
	}
}

//undefined undefined

fullName 속성은 값으로 화살표 함수를 가집니다. 성과 이름을 모두 표현하기 위해 this를 이용해 반환했는데,

막상 fullName을 출력하면 undefined undefined라는 결과가 출력됩니다.

 

화살표 함수는 function 키워드를 사용한 일반 함수와 조금 다르게 동작합니다.

 

화살표 함수는 자신의 this를 사용하지 않고 외부 스코프의 this 값을 사용합니다.

따라서 person.fullName() 함수 내부의 this는 person 객체가 아닌 전역 객체를 가리킵니다. 즉 window 객체를 가리키게 됩니다.

 

간단하게, "this는 일반 함수와 화살표 함수에서 다르게 동작한다"라고만 알고 있어도 좋습니다.