[JavaScript] bind() 개념 및 예제

bind()

함수의 인자를 사전 구성하려는 상황에서 함수를 직접 호출하지 않을 때 사용한다.

• bind() 메소드가 호출되면 새로운 함수를 생성한다. 받게되는 첫 인자의 value는 this 키워드를 설정하고, 이어지는 인자들은 바인드 된 함수의 인수에 제공된다.

예제 코드

const combine = (resultHandler, operation, ...numbers) => {
  const validateNumber = (number) => {
    return isNaN(number) ? 0 : number;
  };

  let sum = 0;
  for (const num of numbers) {
    if (operation === 'ADD') {
      sum += validateNumber(num);
    } else {
      sum -= validateNumber(num);
    }
  }
  resultHandler(sum);
};

const showResult = (messageText, result) => {
  alert(messageText + ' ' + result);
};

combine(showResult.bind(this, 'The result after adding all numbers is:'),'ADD',1,2);

1. combine 함수가 호출된다.
2. combine 함수의 인수는 바인딩 함수(this, 바인딩 함수의 인수), 'ADD',1,2 이다.
3. 바인딩 함수의 인수는 this와 바인딩 함수의 인수이다.
   • this 키워드는 해당 함수를 호출한 모든 항목을 참조한다. (=showResult 참조)
   • 바인딩 함수의 인수는 바인딩 함수가 호출될 때 인수로 사용되는 값들이다.('The result after adding all numbers is:')
4. combine 함수의 매개변수를 풀어서 설명하면 resultHandler(=showResult), operation(='ADD'), ...number(=1, 2)는 Rest 연산자로 나머지 항목을 나타낸다.
5. resultHandler를 호출하는 곳은 combine 함수의 내부이기 때문에 resultHandler를 호출하여 보내는 값(=sum)은 showResult의 마지막 인자에 붙는다. bind하고 고유 인자를 설정하면 항상 설정한 값이 먼저 오고 이 함수를 호출하는 곳에서 보내지는 인자는 뒤로 오기 때문이다.
6. showResult 함수가 호출되고 'The result after adding all numbers is:계산된 값(=sum)'이 표시된 alert 창이 발생한다.

계산기 예제

bind 함수를 사용하기 전, 후 코드를 비교해보자!

Before

const defaultResult = 0;
let currentResult = defaultResult;
let logEntries = [];

// Gets input from input field
function getUserNumberInput() {
  return parseInt(usrInput.value);
}

// Generates and writes calculation log
function createAndWriteOutput(operator, resultBeforeCalc, calcNumber) {
  const calcDescription = `${resultBeforeCalc} ${operator} ${calcNumber}`;
  outputResult(currentResult, calcDescription); // from vendor file
}

function writeToLog(
  operationIdentifier,
  prevResult,
  operationNumber,
  newResult
) {
  const logEntry = {
    operation: operationIdentifier,
    prevResult: prevResult,
    number: operationNumber,
    result: newResult
  };
  logEntries.push(logEntry);
  console.log(logEntries);
}

function add() {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult += enteredNumber;
  createAndWriteOutput('+', initialResult, enteredNumber);
  writeToLog('ADD', initialResult, enteredNumber, currentResult);
}

function subtract() {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult -= enteredNumber;
  createAndWriteOutput('-', initialResult, enteredNumber);
  writeToLog('SUBTRACT', initialResult, enteredNumber, currentResult);
}

function multiply() {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult *= enteredNumber;
  createAndWriteOutput('*', initialResult, enteredNumber);
  writeToLog('MULTIPLY', initialResult, enteredNumber, currentResult);
}

function divide() {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult /= enteredNumber;
  createAndWriteOutput('/', initialResult, enteredNumber);
  writeToLog('DIVIDE', initialResult, enteredNumber, currentResult);
}

addBtn.addEventListener('click', add);
subtractBtn.addEventListener('click', subtract);
multiplyBtn.addEventListener('click', multiply);
divideBtn.addEventListener('click', divide);

After

const defaultResult = 0;
let currentResult = defaultResult;
let logEntries = [];

// Gets input from input field
function getUserNumberInput() {
  return parseInt(usrInput.value);
}

// Generates and writes calculation log
function createAndWriteOutput(operator, resultBeforeCalc, calcNumber) {
  const calcDescription = `${resultBeforeCalc} ${operator} ${calcNumber}`;
  outputResult(currentResult, calcDescription); // from vendor file
}

function writeToLog(
  operationIdentifier,
  prevResult,
  operationNumber,
  newResult
) {
  const logEntry = {
    operation: operationIdentifier,
    prevResult: prevResult,
    number: operationNumber,
    result: newResult
  };
  logEntries.push(logEntry);
  console.log(logEntries);
}

function calculate(operation) {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  let operator;
  if (operation === 'ADD') {
    currentResult += enteredNumber;
    operator = '+';
  } else if (operation === 'SUBTRACT') {
    currentResult -= enteredNumber;
    operator = '-';
  } else if (operation === 'MULTIPLY') {
    currentResult *= enteredNumber;
    operator = '*';
  } else {
    currentResult /= enteredNumber;
    operator = '/';
  }
  createAndWriteOutput(operator, initialResult, enteredNumber);
  writeToLog(operation, initialResult, enteredNumber, currentResult);
}

addBtn.addEventListener('click', calculate.bind(this, 'ADD'));
subtractBtn.addEventListener('click', calculate.bind(this, 'SUBTRACT'));
multiplyBtn.addEventListener('click', calculate.bind(this, 'MULTIPLY'));
divideBtn.addEventListener('click', calculate.bind(this, 'DIVIDE'));

참고

[MDN]Function.prototype.bind()
【한글자막】 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정