[JS] Function.bind()

Function.bind()

bind() 메소드는 바인드된 함수와 동일한 작업을 하는 새로운 함수를 생성하여 반환한다.
첫번째 인자로는 생성된 함수의 this 키워드를 설정하고, 이어지는 나머지 인자들은 그 함수의 인자로 전달된다.
인자가 생략되었거나 첫번째 인자가 null 또는 undefined 인 경우, 반환되는 함수의 this 값은 전역 객체로 설정된다.

사용법

function.bind(thisValue); // this 키워드만 전달
function.bind(thisValue, arg1, arg2, ... argN); // this 키워드 & 함수의 인자 N개 전달
function.bind(null, arg); // this 키워드는 전역 객체, 함수 인자는 arg

Promise Chaining 구문에서의 활용

파일 데이터를 받아서, 2초 후 콘솔창에 해당 데이터를 출력하는 코드를 작성해보았다.

기본 전제

fs.readFile 사용 가능

로컬에 존재하는 파일을 읽어오기 위해 Node.js 내장 모듈인 fs를 불러오는 코드를 .js 상단에 적어두었다.

const fs = require("fs");

선언된 함수들 존재

Promise Chaining 작성에 활용할 sleep 함수와 getDataFromFile 함수를 미리 선언해두었다.

// sleep 함수 선언
const sleep = (wait) => {
  return new Promise(function (resolve) {
    setTimeout(resolve, wait * 1000); // 단위가 ms이므로 1000을 곱해줌
  });
};

// 파일 데이터를 받아오는 promise 인스턴스 반환 함수
const getDataFromFile = (filePath) => {
  return new Promise(function (resolve, reject) {
    fs.readFile(filePath, "utf8", function (err, data) {
      if (data) resolve(data);
      reject(err);
    });
  });
};

Promise Chaining 작성하기

bind 를 사용하지 않은 경우

then() 메소드의 인자 자리에는 함수가 와야 하기 때문에,
전달 인자를 2 으로 해서 sleep 함수를 호출하는 것과 동일한 동작을 수행하는 익명 함수를 인자 자리에 적어주었다.

getDataFromFile("/test")
  .then(function () {
    sleep(2);
  })
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.error(err);
  });

bind 를 사용한 경우

bind() 메소드를 사용할 때도 마찬가지로, then() 메소드의 인자 자리에는 함수가 와야 한다.
따라서 sleep.bind(null, 2) 를 인자 자리에 적어줌으로써, 전달 인자 값으로 2 를 받은 sleep 함수와 같은 동작을 수행하는 새로운 전역 함수를 then() 메소드의 인자로 전달할 수 있었다.

// bind 구문 사용 O
getDataFromFile("/test")
  .then(sleep.bind(null, 2))
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.error(err);
  });

then() 메소드에 함수 호출값을 인자로 전달한다면?

전체 Promise Chain 실행에 따라, 시간 지연 없이 바로 undefined 가 콘솔에 출력된다.

// sleep 함수 선언
const sleep = (wait) => {
  return new Promise(function (resolve) {
    setTimeout(resolve, wait * 1000); // 단위가 ms이므로 1000을 곱해줌
  });
};

위의 sleep 함수의 리턴값인 Promise 인스턴스를 살펴보자.

이 Promise 인스턴스는 sleep 함수의 인자로 전달받은 wait 만큼의 시간(초)을 기다린 후 resolve 함수를 실행한다. 이 때, resolve 함수에는 어떤 인자도 전달되지 않는다. 따라서 Promise 인스턴스의 resolved 결과값은 undefined 가 된다.

then() 메소드의 인자로 sleep 함수의 호출값이 전달되었을 경우에도 마찬가지다.
sleep 함수가 반환하는 Promise 인스턴스의 resolved 결과값이 undefined 이기 때문에, 다음 Promise Chain 으로 전달되는 값 역시 undefined 가 된다.

시간 지연을 발생시키는 Promise 인스턴스가 아닌 undefined 값이 그 다음 Promise Chain 에 전달되었기 때문에, Promise Chain 은 시간 지연 없이 전달된 값(undefined)을 곧바로 콘솔에 출력한다.