2023-05-19 TIL

• JavaScript

콜백함수 ( Call-back Function )

불변성 ( Immutablity )

---

 

✨ 콜백함수

 

한마디로 표현하자면, '나중에 호출할 함수' 정도가 될 것 같다. 먼저 밑의 코드블럭을 이해해보자

 

const iterate = ( maxNum , action ) => {
	for(let i = 1; i <= maxNum ; i++ ){
    	action(i);
    }
};

const double = ( num ) => console.log(num * 2);

const log = ( num ) => console.log(num);


// 3개의 함수가 정의 됌. ( iterate, double, log )

iterate(4, log); // 1, 2, 3, 4 출력

iterate(4, double); // 2, 4, 6, 8 출력

 

iterate 라는 함수는 인자로 숫자와 함수를 받는다. 어제 확인해 보았던 일급 객체 혹은 일급 함수 언어로서

action 이라는 함수를 인자로 받아올수 있는것.

 

double 과 log 는 단순 출력의 함수 역할을 하는것이지만, iterate 라는 함수 안에 인자로서 주입이 되면서 추후 호출이 이루어지게 되는것인데 이것을 콜백함수 라고 한다.

 

위 함수들을 다르게 표현도 가능한데, 굳이 double과 log를 정의해주지 않더라도, 이미 iterate라는 함수내에 기능이 정의되어 있기에

이와 같이도 가능하다.

 

const iterate = ( maxNum , action ) => {
	for ( let i = 1; i <= maxNum; i++ ){
    	action(i);
    }
};

iterate( 4 , (num) => console.log(num) ) // log 함수

iterate ( 4, (num) => console.log(num*2) ) // double 함수

 

이러한 콜백함수로 얻을수 있는 이점들은 무엇일까를 고민해보니 얻은 나의 대답은 '가독성, 재사용성' 이었다.

 

인자로 줄수있는 값이 보다 넓은 JS에서는 함수를 인자로 제공해줌으로써 얻는 이점이 많다고 느껴졌다.

---

✨ 불변성

 

불변성의 중요성은 정말 정말 중요한 부분이다. 

 

때에 따라 변수에 값을 재할당 해주는 것에 대해 매우 위험하단걸 인지해야 한다. 예를 들어 함수에 넘겨주는 인자의 값을 임의로 변경하는걸 얘기한다. 

 

코드 예시를 보자

 

const fruits = [
    {name:'lemon', display:'🍋'},
    {name:'apple', display:'🍎'}];
    
// 과일의 값을 할당하는 함수    
// #1
const setThePrice = (fruit, price) => {
	fruit.price = price
};										  



// 만약 함수 내부에서 name의 값을 재할당을 한다면?
// #2
const setThePrice = (fruit, price) => {
	fruit = {name:'cherry', display:'🍒'};
    fruit.price = price;
};

여기서의 문제점은 무엇일까?

 

바로 함수 내부에서 변수의 값을 변경시키고 있다는 점이다. 객체타입은 힙 메모리 주소값을 저장하고 있고 그 주소값을 찾아가 데이터들을 불러온다고 했다. 그래서 아무리 상수변수(const)라 할지라도 데이터 재할당이 가능하다고 했다.

 

저렇게 해줌으로써 내부의 값이 일관되게 변하게 되고 또 저 값을 참조하는 다른 코드에서도 모두 다 오류를 일으키게 되는것이다.

 

그럼 이것에 대한 해결책은 무엇일지를 생각해보자.

 

받아온 인자 값을 꼭 사용해야만 한다면, 객체타입을 할당하는것이 아니라 사용해야 할 값을 새로이 변수를 생성해 할당시켜준뒤 사용을 해야 할것이다.