- 어제에 이어서 오늘은 리터럴, 데이터 타입, 객체, 함수를 다뤘다.
- 어느 정도 자바스크립트에는 자신이 있다고 생각했는데, 생소한 내용이 많았다.
- 기본 타입과 레퍼런스 타입의 차이
- 기본 타입의 변수는 바인딩된 공간에 실제 해당 값이 바로 들어간다.
- 레퍼런스 타입 변수에 바인딩된 공간에는 객체 내용, 함수 바디 등이 위치한 메모리 공간의 주소 값이 들어간다.
- 콜백함수에 대한 이해
- 이전에는 단순히 비동기처리, 이벤트처리에 넣어줘야 하는 함수라고 생각했다.
- 다만 ‘다른 함수의 인수로서 넘겨주는 함수’라는 일반적인 정의에서 시작하여 콜백함수를 적용할 수 있는 사례를 접해보니 기존의 이해가 좁았음을 알 수 있었다.
- 예컨대 숫자 하나를 입력받아, 0부터 해당 숫자까지 콘솔에 출력하는 프로그램을 작성해보자.
//// 숫자 하나를 입력받아, 0부터 해당 숫자까지 콘솔에 출력하는 프로그램 function repeat(n) { for(let i=0; i<n; i++) { console.log(i); } } repeat(3); // 0 1 2 - 이후 고객의 요청으로 홀수만 출력하는 기능을 추가로 구현해야한다면 어떻게 해야할까? 기존 코드는 유지해야하므로, 새로운 함수를 만드는 방법을 생각해볼 수 있다.
function repeat_odd(n) { for(let i=0; i<n; i++) { if (i%2 == 1) { console.log(i); } } } repeat_odd(10); // 0 1 2 - 작동에는 문제가 없지만, 비슷한 코드가 중복되고, 확장성이 제한된다. 짝수만 표시하는 기능을 구현하라고 하면 비슷한 코드의 함수를 하나 더 만들어야 한다.
- 이때 메인 로직을 유지하면서, 홀수/짝수 여부에 따라 값의 출력 여부를 결정하는 함수를 만들어 콜백함수로 넘기는 방법을 생각해볼 수 있다.
function repeat_enhanced(n, f) { // 함수 f를 인자로 받는다 for(let i =0; i<n; i++) { f(i); } } let printAll = function(i) { console.log(i); } let printOdd = function(i) { if (i%2 == 1) { console.log(i); } } let printEven = function(i) { if (i%2 == 0) { console.log(i); } } repeat_enhanced(10, printAll); console.log(); repeat_enhanced(10, printOdd); console.log(); repeat_enhanced(10, printEven); - 이렇게 자바스크립트의 함수는 일급객체이기 때문에 콜백 함수로 활용하는 것이 가능/간편하다.
- 기본 타입과 레퍼런스 타입의 차이