What do the three dots (…) mean in JavaScript?

Adrian Oprea

Aug 28, 2018·3 min read

Originally published athttps://oprea.rocks/blog/what-do-the-three-dots-mean-in-javascript/
　
The title of the article is froma question I was asked to answer on Quora. Below, is my attempt to explain what do the three dots do in JavaScript. Hopefully, this removes the fog around the concept, for people who will find this article in the future and have the same question.

Array/Object spread operator

Assume you have the following object:

const adrian = { 
    fullName: 'Adrian Oprea', 
    occupation: 'Software developer', 
    age: 31, 
    website: 'https://oprea.rocks'
};

　
Let’s assume you want to create a new object(person) with a different name and website, but the same occupation and age.
　
You could do this byspecifying only the properties you want and use the spread operator for the rest, like below: 　

const bill = { 
    ...adrian,
    fullName: 'Bill Gates', 
    website: 'https://microsoft.com'
};

　
What the code above does, is to spread over theadrianobject and get all its properties, then overwrite the existing properties with the ones we're passing. Think of this spread thing as extracting all the individual properties one by one and transferring them to the new object.
　
In this case, since we specified thefullNameandwebsiteproperties after the spread operator kicked in, the JavaScript engine is smart enough to know that we want to overwrite the original values of those properties that are coming from the original object.
　
Simply saying, three dots operator is deep-cloning object. Let's compare shallow cloning and deep-cloning
　

const numbers1 = [1, 2, 3, 4, 5];
const numbers2 = [ ...numbers1, 1, 2, 6,7,8]; // this will be [1, 2, 3, 4, 5, 1, 2, 6, 7, 8]

　
Think of it as a replacement forArray.prototype.concat.

Rest operator

When used within the signature of a function, where the function’s arguments should be, either replacing the arguments completely or alongside the function’s arguments, the three dots are also called the rest operator.
　
When it is used like that, the rest operator enables the developer to create functions that can take an indefinite number of arguments, also called functions of variable arity or variadic functions.
　
Here’s the simplest example of such a function. Let’s assume you want to create a function that calculates the sum of all its arguments. Note that it’s not the sum of two, three or four numbers but the sum of all the numbers the function would receive as arguments.
　
Here is a naive implementation, using the rest operator 　

function sum(...numbers) { 
    return numbers.reduce((accumulator, current) => { 
        return accumulator += current });
    };

sum(1, 2) // 3
sum(1, 2, 3, 4, 5) // 15

　
The simplest explanation would be that the rest operator takes the arguments that a function receives and dumps them into a real array that you could later use.
　
You might argue that you can do this by requesting the user to pass an array of numbers. That’s technically doable but poor UX for your API, since users expect to call a sum function with plain numbers, not a list of numbers.
　
You might also argue that you could use theargumentsarray. That’s also true but be careful,argumentsis not a real array but an array-like object(an object with a length property). It actually looks like this, for the first call of our sum function, in the previous example: 　

{ '0': 1, '1': 2, 'length': 2}

　
To manipulate this object and use array methods on it such as reduce, from my previous example, you’d have to do theArray.prototype.slice.call(arguments, 0)thing. That doesn’t perform well, in terms of speed and memory usage and is not elegant. It’s just smartass code that’s prone to confuse your junior colleagues.
　
This should be everything you need to know to be productive with the rest/spread operator in JavaScript.
　
If you have any advice on how to improve the article, or you need some help wrapping your head around the concept, leave a comment, below.
　
Keep an open mind!
　
Adrian.

https://www.robinwieruch.de/javascript-variable-question-mark

JavaScript Variable with Question Mark

const isBlack = false;
 
const text = isBlack ? 'Yes, black!' : 'No, something else.';
 
console.log(text);
// "No, something else."

const isBlack = false;
 
let text;
if (isBlack) {
  text = 'Yes, black!';
} else {
  text = 'No, something else.';
}
 
console.log(text);
// "No, something else."

const person = {
  name: 'Robin Wieruch',
  pet: {
    name: 'Trixi',
  },
};
 
const petName = person.pet?.name;
console.log(petName);
// "Trixi"

const person = {
  name: 'Robin Wieruch',
};
 
const petName = person.pet?.name;
console.log(petName);
// undefined

const person = {
  name: 'Robin Wieruch',
};
 
let petName = person.pet && person.pet.name;
console.log(petName);
// undefined
 
petName = person.pet ? person.pet.name : undefined;
console.log(petName);
// undefined

https://ko.javascript.info/try-catch

try {

  // 코드...

} catch (err) {

  // 에러 핸들링

}

try {
  {{{{{{{{{{{{
} catch(e) {
  alert("유효하지 않은 코드이기 때문에, 자바스크립트 엔진은 이 코드를 이해할 수 없습니다.");
}

try {
  setTimeout(function() {
    noSuchVariable; // 스크립트는 여기서 죽습니다.
  }, 1000);
} catch (e) {
  alert( "작동 멈춤" );
}

setTimeout(function() {
  try {
    noSuchVariable; // 이제 try..catch에서 에러를 핸들링 할 수 있습니다!
  } catch {
    alert( "에러를 잡았습니다!" );
  }
}, 1000);

try {
  // ...
} catch(err) { // <-- '에러 객체', err 대신 다른 이름으로도 쓸 수 있음
  // ...
}

try {
  lalala; // 에러, 변수가 정의되지 않음!
} catch(err) {
  alert(err.name); // ReferenceError
  alert(err.message); // lalala is not defined
  alert(err.stack); // ReferenceError: lalala is not defined at (호출 스택)

  // 에러 전체를 보여줄 수도 있습니다.
  // 이때, 에러 객체는 "name: message" 형태의 문자열로 변환됩니다.
  alert(err); // ReferenceError: lalala is not defined
}

try {
  // ...
} catch { // <-- (err) 없이 쓰임
  // ...
}

let json = '{"name":"John", "age": 30}'; // 서버로부터 전달받은 데이터

let user = JSON.parse(json); // 전달받은 문자열을 자바스크립트 객체로 변환

// 문자열 형태로 전달받은 user가 프로퍼티를 가진 객체가 됨
alert( user.name ); // John
alert( user.age );  // 30

let json = "{ bad json }";

try {

  let user = JSON.parse(json); // <-- 여기서 에러가 발생하므로
  alert( user.name ); // 이 코드는 동작하지 않습니다.

} catch (e) {
  // 에러가 발생하면 제어 흐름이 catch 문으로 넘어옵니다.
  alert( "데이터에 에러가 있어 재요청을 시도합니다." );
  alert( e.name );
  alert( e.message );
}

let json = '{ "age": 30 }'; // 불완전한 데이터

try {

  let user = JSON.parse(json); // <-- 에러 없음
  alert( user.name ); // 이름이 없습니다!

} catch (e) {
  alert( "실행되지 않습니다." );
}

throw <error object>

let error = new Error(message);
// or
let error = new SyntaxError(message);
let error = new ReferenceError(message);
// ...

let error = new Error("이상한 일이 발생했습니다. o_O");

alert(error.name); // Error
alert(error.message); // 이상한 일이 발생했습니다. o_O

try {
  JSON.parse("{ 잘못된 형식의 json o_O }");
} catch(e) {
  alert(e.name); // SyntaxError
  alert(e.message); // Unexpected token b in JSON at position 2
}

let json = '{ "age": 30 }'; // 불완전한 데이터

try {

  let user = JSON.parse(json); // <-- 에러 없음

  if (!user.name) {
    throw new SyntaxError("불완전한 데이터: 이름 없음"); // (*)
  }

  alert( user.name );

} catch(e) {
  alert( "JSON Error: " + e.message ); // JSON Error: 불완전한 데이터: 이름 없음
}

let json = '{ "age": 30 }'; // 불완전한 데이터

try {
  user = JSON.parse(json); // <-- user 앞에 let을 쓰지 않음

  // ...
} catch(err) {
  alert("JSON Error: " + err); // JSON Error: ReferenceError: user is not defined
  // (실제론 JSON Error가 아닙니다.)
}

try {
  user = { /*...*/ };
} catch(e) {
  alert(e.name); // 존재하지 않는 변수에 접근하려 했으므로 "ReferenceError"가 발생
}

let json = '{ "age": 30 }'; // 불완전한 데이터
try {

  let user = JSON.parse(json);

  if (!user.name) {
    throw new SyntaxError("불완전한 데이터: 이름 없음");
  }

  blabla(); // 예상치 못한 에러

  alert( user.name );

} catch(e) {

  if (e.name == "SyntaxError") {
    alert( "JSON Error: " + e.message );
  } else {
    throw e; // 에러 다시 던지기 (*)
  }

}

function readData() {
  let json = '{ "age": 30 }';

  try {
    // ...
    blabla(); // 에러!
  } catch (e) {
    // ...
    if (e.name != 'SyntaxError') {
      throw e; // 알 수 없는 에러 다시 던지기
    }
  }
}

try {
  readData();
} catch (e) {
  alert( "External catch got: " + e ); // 에러를 잡음
}

         

          try {
   ... 코드를 실행 ...
} catch(e) {
   ... 에러 핸들링 ...
} finally {
   ... 항상 실행 ...
}

try {
  alert( 'try' );
  if (confirm('에러를 만드시겠습니까?')) 이상한_코드();
} catch (e) {
  alert( 'catch' );
} finally {
  alert( 'finally' );
}

let num = +prompt("양의 정수를 입력해주세요.", 35)

let diff, result;

function fib(n) {
  if (n < 0 || Math.trunc(n) != n) {
    throw new Error("음수나 정수가 아닌 값은 처리할 수 없습니다.");
  }
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}

let start = Date.now();

try {
  result = fib(num);
} catch (e) {
  result = 0;
} finally {
  diff = Date.now() - start;
}

alert(result || "에러 발생");

alert( `연산 시간: ${diff}ms` );

function func() {

  try {
    return 1;

  } catch (e) {
    /* ... */
  } finally {
    alert( 'finally' );
  }
}

alert( func() ); // finally 안의 alert가 실행되고 난 후, 실행됨

function func() {
  // 무언가를 측정하는 경우와 같이 끝맺음이 있어야 하는 프로세스
  try {
    // ...
  } finally {
    // 스크립트가 죽더라도 완료됨
  }
}

window.onerror = function(message, url, line, col, error) {
  // ...
};

<script>
  window.onerror = function(message, url, line, col, error) {
    alert(`${message}\n At ${line}:${col} of ${url}`);
  };

  function readData() {
    badFunc(); // 에러가 발생한 장소
  }

  readData();
</script>

try {
  // 이곳의 코드를 실행
} catch(err) {
  // 에러가 발생하면, 여기부터 실행됨
  // err는 에러 객체
} finally {
  // 에러 발생 여부와 상관없이 try/catch 이후에 실행됨
}

Arrow function

사용법

//기존의 function sample
var double = function(x){
    return x*2;
}
//arrow function sample
const double = (x) => {
    return x*2;
}
//매개변수가 1개인 경우 소괄호 생략 가능
const double = x => {return x*2}
//함수가 한줄로 표현가능하면 중괄호 생략 가능하고 자동으로 return됨
const double = x => x * 2
//매개변수가 두 개 이상일 때
const add = (x,y) => x + y
//매개변수가 없을 때
() => {    ... }
//객체변환할 때 중괄호 사용
() => {return {a:1};}
//return 바로할땐 소괄호 사용
() => ({a:1})

function 키워드 대신 화살표(=>)를 사용하여 함수를 선언할 수 있다.

• 미리 말하자면 arrow function이 기존의 function을 완전히 대신할 수 없다.
• 콜백 함수에서 사용하면 아주 간결하게 표현이 가능한 장점이 있다.

함수 호출

//const pow = (x) => {return x * x;}
const pow = x => x * x;
console.log(pow(10)); // 100

//콜백에 arrow function 사용해서 간략화 시키기
const arr = [1,2,3];
const pow = arr.map(x => x * x);
console.log(pow);

변경점

1. 매개변수에 default 값 적용 가능

const f1 = (msg ='jeongpro') => {
    alert(msg);
}
f1(); // 'jeongpro'

기존에는 매개변수를 전달하지 않으면 undefined가 나오지만 ES6에서는 실수로 매개변수를 전달하지 않았을 때 처리를 할 수 있다.

2. arguments 대신 args 사용

var foo = function(){
    console.log(arguments);
}
foo(1,2); // { '0':1, '1':2 }

매개변수를 지정하지 않아도 arguments 라는 프로퍼티가 함수에 자동으로 생성되어 사용가능 했었으나 화살표 함수에는 arguments가 없어짐. 대신 args가 생겼다.

// ES5
function sum(){
  var arr = Array.prototype.slice.call(arguments);
  return arr.reduce(function(pre, cur){
    return pre + cur;
  });
}
console.log(sum(1,2,3,4));

// ES6
const sum1 = (...args) => {
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum1(1,2,3,4));

매개변수부분에 rest 파라미터(...)를 사용하여 가변인자 함수 내부에 배열로 전달할 수 있음.

3. this 변경점 (핵심)

• arrow function은 자신을 포함하는 외부 scope에서 this를 계승받는다.
  즉, arrow function은 자신만의 this를 생성하지 않는다. (Lexical this)

function Prefixer(prefix) {
  this.prefix = prefix;
}

Prefixer.prototype.prefixArray = function (arr) {
  console.log(this.prefix);// (A)
  return arr.map(function (x) {
    return this.prefix + ' ' + x; // (B)
  });
};

var pre = new Prefixer('Hi');
console.log(pre.prefixArray(['Lee', 'Kim']));

this.prefix가 (A)에서는 'Hi' 를 나타내지만 (B)에서는 undefined가 찍힌다.
지난 포스트에서 자바스크립트의 this에서 봤듯이 내부 함수호출에서는 this가 window객체였다.

function Prefixer(prefix) {
  this.prefix = prefix;
}

Prefixer.prototype.prefixArray = function (arr) {
  return arr.map(x => `${this.prefix}  ${x}`);
};

const pre = new Prefixer('Hi');
console.log(pre.prefixArray(['Lee', 'Kim']));

arrow function에서는 내부 함수여도 this가 arrow function이 선언된 곳에서 상위의 context를 가리키므로 Prefixer객체 pre를 가리키므로 this.prefix가 Hi를 가리켜 개발자가 예상한대로 작동한다.

arrow function을 사용하면 안되는 경우1

const obj1 = {
  name : 'Lee',
  sayName : () => {console.log(`hi + ${this.name}`);}
};
obj1.sayName();
Colored by Color Scripter

위와 같이하면 객체의 this를 바인딩하지 않고 전역 객체가 바인딩된다.

즉, 객체의 메소드를 정의할 때는 사용하면 안된다.

const obj = {
  name: 'Lee',
  sayHi() { // === sayHi: function() {
    console.log(`Hi ${this.name}`);
  }
};

obj.sayHi(); // Hi Lee

위 처럼 ES6에서 사용하는 객체의 메소드 정의방법으로 정의하는 것이 옳다. 마찬가지로 prototype에 메소드를 할당할 때도 똑같이 화살표함수를 사용하면 안된다.

일반 함수 function(){ } 을 이용하도록 한다.

arrow function을 사용하면 안되는 경우2

arrow function을 생성자 함수로 사용할 수 없음.

arrow function을 사용하면 안되는 경우3

addEventListener 함수의 콜백 함수에서 사용하면 this가 상위 컨텍스트를 가리킴

var button = document.getElementById('myButton');  
button.addEventListener('click', () => {  
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

var button = document.getElementById('myButton');  
button.addEventListener('click', function() {  
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});
Colored by Color Scripter

• 출처 : 기본기를 쌓는 정아마추어 코딩블로그

https://medium.com/@jooyunghan/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-fab4e960d263

(번역) 함수형 프로그래밍이란 무엇인가?

Jooyung Han (한주영)

Follow

Jan 6, 2016 · 11 min read

이 글은 Kris Jenkins(@krisjenkins)의 “What is Functional Programming?”을 허락을 구해 번역한 것입니다.

Update 2016–01–18 이 글의 2부에 해당하는 “Which Programming Languages Are Functional?”을 번역(“어떤 프로그래밍 언어가 함수형인가?”)하였습니다.

public int square(int x) {
    return x * x;
}
// NOTE: 어떤 언어인가는 중요하지 않다. 여기서는
// 강조하기 위해 입출력 타입이 명확한 언어를 골랐을 뿐이다.

public void processNext() {
    Message message = InboxQueue.popMessage();

    if (message != null) {
        process(message);
    }
}

public boolean processMessage(Channel channel) {...}

public Program getCurrentProgram(TVGuide guide, int channel) {
  Schedule schedule = guide.getSchedule(channel);

  Program current = schedule.programAt(new Date());

  return current;
}

public Program getProgramAt(TVGuide guide, int channel, Date when) {
  Schedule schedule = guide.getSchedule(channel);

  Program program = schedule.programAt(when);

  return program;
}

Function Programming 을 공부 하다보면 1급 객체란 말을 많이 언급됩니다. 그래서 1급 객체 (First-class citizen)란 무엇인가를 공부도하고 정리해 공유 하고자 합니다.

1급 객체란?

아래 3 가지조건을 충족한다면 1급 객체라고 할수 있습니다. 　

1. 변수나 데이타에 할당 할 수 있어야 한다.
2. 객체의 인자로 넘길 수 있어야 한다.
3. 객체의 리턴값으로 리턴 할수 있어야 한다.
   　
   Java와 Kotlin의 비교를 통해 Kotlin 의 함수는 왜 1급 객체고 Java의 함수는 1급 객체가 아닌지 알아보겠습니다.

변수나 데이타에 할당 할 수 있어야 한다.

object Main {
    @JvmStatic
    fun main(args: Array<String>) {
        val a = test
    }

    val test: () -> Unit = { println("kotlin") }
}

public class java {

    public static void test(){
        System.out.println("java");
    }

    public static void main(String[] args) {
        System.out.println("java");
//        Object a = test;
    }
}

kotlin은 a 에 type이 () -> Unit 인 test 함수 할당이 가능하지만, Java는 불가능 합니다.

객체의 인자로 넘길 수 있어야 한다.

object Main {
    @JvmStatic
    fun main(args: Array<String>) {
        function(test)
    }

    fun function(f: () -> Unit) {
       f.invoke()
    }

    val test: () -> Unit = { println("kotlin") }
}

kotlin 은 function 함수의 인자로 함수타입을 전달 할 수 있습니다. 하지만 Java에서는 불가능 합니다.

객체의 리턴값으로 리턴 할 수 있어야 한다.

object Main {
    @JvmStatic
    fun main(args: Array<String>) {
        function()
    }

    fun function(): () -> Unit {
        return { println("kotlin") }
    }

}

function함수는 { println(“kotlin”) }, 즉 함수타입을 반환 합니다.
kotlin에서 함수는 변수나 data에 할당이 가능하며, 함수의 인자로 전달가능 하고, 함수의 리턴값으로도 사용 할 수 있습니다. 그렇기 때문에 kotlin의 함수는 1급 객체라고 할 수 있습니다. 반면 Java의 함수는 위 조건들을 만족하지 못하기 때문에 1급 객체라고 할수 없습니다.

• ref : https://medium.com/@lazysoul/functional-programming-%EC%97%90%EC%84%9C-1%EA%B8%89-%EA%B0%9D%EC%B2%B4%EB%9E%80-ba1aeb048059

javascript : call, apply, bind 차이 - this의 사용

자바스크립트에서는 일반적인 방법 외에도, 함수를 어디서 어떻게 호출했느냐와 관계없이 this가 무엇인지 지정할 수 있다.

call

call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정 값으로 지정할 수 있다.

<script type="text/javascript">  
const bruce = {  
     name : 'Bruce'  
};  

const madeline = {  
    name : 'Madeline'  
};  

//이 함수는 어떤 객체에도 연결되지 않았지만 this를 사용함.  
function greet(){  
    return `Hello, I'm ${this.name}`;  
};  

greet(); // 'Hello, I'm undefined' - this는 어디에도 묶이지 않음  
greet.call(bruce) // 'Hello, I'm Bruce' - this는 bruce  
greet.call(madeline) // 'Hello, I'm Madeline' - this는 madeline  
</script>

함수를 호출하면서 call을 사용하고 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것처럼 사용할 수 있다. call의 첫 번째 매개변수는 this로 사용할 값이고, 매개변수가 더 있으면 그 매개변수는 호출하는 함수로 전달된다.

<script type="text/javascript"\>  
function update(birthYear, occupation){  
    this.birthYear = birthYear;  
    this.occupation = occupation;  
};  

update.call(bruce, 1949, 'singer'); // bruce 변경  
/*  
bruce는 이제  
{  
name : 'Bruce',  
birthYear : 1949,  
occupation : 'singer'  
}  
로 변경됨  
*/  

update.call(madeline, 1942, 'actress'); // madeline 변경  
/*  
madeline은 이제  
{  
name : 'Madeline',  
birthYear : 1942,  
occupation : 'actress'  
}  
로 변경됨  
*/  
</script>

apply

apply는 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같다. call은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만, apply는 매개변수를 배열로 받는다.

<script type="text/javascript">  
update.apply(bruce, [1955, 'actor']);  
/*  
bruce는 이제  
{  
name : 'Bruce',  
birthYear : 1955,  
occupation : 'actor'  
}  
로 변경됨  
*/

update.apply(madeline, [1918, 'writer']);  
/*
madeline은 이제  
{  
name : 'Madeline',  
birthYear : 1918,  
occupation : 'writer'  
}  
로 변경됨  
*/  
</script>

apply는 배열 요소를 함수 매개변수로 사용해야 할 때 유용하다. apply를 설명할 때 흔히 사용하는 예제는 배열의 최소값과 최대값을 구하는 것이다. 자바스크립트의 내장 함수인 Math.min 과 Math.max 는 매개변수를 받아 그중 최소값과 최대값을 각각 반환한다. apply를 사용하면 기존 배열을 이들 함수에 바로 넘길 수 있다.

<script type="text/javascript">  
const arr = [2,3,-5,15,7];  

Math.min.apply(null, arr); // -5  
Math.max.apply(null, arr); // 15  
</script>

this의 값에 null을 쓴 이유는 Math.min과 Math.max가 this와 관계 없이 동작하기 때문이다. 즉, 무엇을 넘기든 관계없다.

ES6의 확산 연산자(...)를 사용해도 apply와 같은 결과를 얻을 수 있다. update 메서드는 this 값이 중요하므로 call을 사용해야 하지만, Math.min과 Math.max는 this 값이 무엇이든 관계없으므로 확산 연산자를 그대로 사용할 수 있다.

<script type="text/javascript">  
const newBruce = [1940, "martial artist"];  

update.call(bruce, ...newBruce); // apply(bruce, newBruce)와 같음  
Math.min(...arr); // -5  
Math.max(...arr); // 15  
</script>

bind

this의 값을 바꿀 수 있는 마지막 함수는 bind이다. bind를 사용하면 함수의 this 값을 영구히 바꿀 수 있다. update 메서드를 이리저리 옮기면서 호출할 때 this 값은 항상 bruce가 되게끔, call이나 apply, 다른 bind와 함께 호출하더라도 this 값이 bruce가 되도록 하려면 bind를 사용한다.

<script type="text/javascript">  
const updateBruce = update.bind(bruce);  

updateBruce(1904, "actor");  
// bruce 는 이제 { name: "Bruce", birthYear: 1904, occupation: "actor" }  

updateBruce.call(madeline, 1274, "king");  
// bruce 는 이제 { name: "Bruce", birthYear: 1274, occupation: "king" };  
// madeline은 변하지 않음  
</script>

bind는 함수의 동작을 영구적으로 바꾸므로 찾기 어려운 버그의 원인이 될 수 있다. bind를 사용한 함수는 call이나 apply, 다른 bind와 함께 사용할 수 없는 거나 마찬가지다. 함수를 여기저기서 call이나 apply로 호출해야 하는데, this 값이 그에 맞춰 바뀌어야 하는 경우를 상상해보라. 이럴 때 bind를 사용하면 문제가 생긴다. bind를 쓰지 말라고 권하는 것은 아니다. bind는 매우 유용하지만, 함수의 this가 어디에 묶이는지 정확히 파악하고 사용해야 한다.

bind에 매개변수를 넘기면 항상 그 매개변수를 받으면서 호출되는 새 함수를 만드는 효과가 있다. 예를 들어 bruce가 태어난 해를 항상 1949로 고정하지만, 직업은 자유롭게 바꿀 수 있는 업데이트 함수를 만들고 싶다면 다음과 같이 하면 된다.

<script type="text/javascript"\>  
const updateBruce1949 = update.bind(bruce, 1949); updateBruce1949("singer, songwriter");  
/*  
bruce 는 이제 {  
name: "Bruce",  
birthYear: 1949,  
occupation: "singer, songwriter"  
}  
*/  
</script>

출처:https://ibrahimovic.tistory.com/29[Web Standard]