14 :: 바인딩, this 조작 삼총사, Closure

엘리스 SW 엔지니어 트랙 14일차

온라인 강의날

 

 

자바스크립트 심화의 날

 

보니까

실시간 강의 다음날 온라인 강의는

실시간 강의에서 배운 내용을

복습하고 살을 붙이고 튼튼하게 만드는 내용을 담고 있는구나

 

계획적이었어..

온라인 강의를 좀 더 성실히 들어야겠다

 

 

아무튼

이번 온라인 강의에서는

자바스크립트 함수가 실행되는 과정으로 시작되었다

 

 

이제는 알 때가 됐다 바인딩(binding)

우선 bind()는 언제 사용할까?

• this를 가지고 있는 객체(object)에 사용하는 것처럼 보인다
• this를 자유자재로 사용하기 위해서처럼 보인다
• this가 작동하지않는/사라지는 경우가 있다 예) setTimeOut()

 

bind에 관한 좋은 설명

링크 => https://ko.javascript.info/bind

 

 

바인드 사용예시

const user = {
  name: "산타",
  changeMyName: function (name) { this.name = name },
}

const user2 = {
  name: "엘프",
}

user.changeMyName.bind(user2)("마징가")
console.log(user2.name) // 마징가

 

 

this 조작 삼총사

bind, apply, call

이들은 this가 가리키는 것을 조작한다

 

 

함수 호출 방식 

• 함수 호출
• 메서드 호출
• 생성자 호출
• 간접 호출 - call, apply, bind 등
• 콜백 함수의 호출 - setTimeOut()도 콜백 함수를 사용한다네

생성자 호출, 간접 호출이 익숙치 않네

차차 배우자!

 

 

this

this의 세계는 아직 탐험할게 많은 상태

 

밑의 예시를 보면

화살표 함수, 일반 함수가

서로 다른 this를 가리키는 것을 확인

let users = {
  name: "산타",
  f1: () => {
    console.log(this)
  },
  f2: function() {
    console.log(this)
  }
}

users.f1() // global
users.f2() // users

setTimeout(users.f1, 10) // global
setTimeout(users.f2, 10) // global

 

위 코드 하단의 setTimeout을 보면

둘 모두의 this가

o가 아닌 global을 가리키고 있다

 

이럴 때 o를 가리키게 하고 싶다면???????

여기서는 this 조작 삼총사 중 하나인

bind가 나선다

 

다음 코드처럼 바인딩을 해주면

global이 아닌 users를 가리킨다

let users = {
    na: "산타",
    f1: () => {
        console.log("f1: " + this)
    },
    f2: function () {
        console.log("f2: " + this)
    }
}

setTimeout(users.f1.bind(users), 10) // global
setTimeout(users.f2.bind(users), 10) // users

그럼에도

화살표 함수에는 안먹는걸 확인했다

뭔가 흑막이 있는 느낌

 

그럼 도대체 무슨 흑막이 있길래

화살표 함수는 일반 함수랑 다른걸까

 

우선 그냥 정의

• 일반 함수의 this: 새롭게 생성된 컨텍스트를 가리킨다
• 화살표 함수의 this: 호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다

 

화살표 함수의 this

• 함수 컨텍스트가 생성될 때
  this는 그 함수를 호출한 환경을 가리킨다
• 정해지면 바꿀 수가 없다(강력하네..)
• call, bind, apply 사용해도 안바뀐다
• setTimeout 등 this가 바뀌는 상황에 유용한다

 

우선 이렇게만 알아두고

또 차차 알아봐야겠다

번아웃 방지

 

 

Closure

함수는 일급 객체(first-class object)

• 일급 객체: 다른 변수처럼 다룰 수 있는 것

 

클로저는

함수의 일급 객체 성질을 이용한다

함수안에 선언된 변수, 함수들을 클로저라고 부르는 것 같다

 

함수의 안쪽에 저장되서 사용하기 때문에

메모리에 간섭이 없다

 

클로저 이고잉님 강의 링크 => https://opentutorials.org/course/743/6544

 

 

... Rest Operator

인자나 배열 외에도

객체에도 사용 가능하구나~

 

 

... Spread Operator

생긴건 같은데 반대로 행동한다

 

 

오늘 문제는 상당히 어려웠다

목검으로 보스방 간 느낌

 

보스방 갔다오고 알았다

오늘 나온 클로저

그리고 오브젝트에서 약하다

 

ES6 문법, Destructuring Assignment와 함께 오브젝트 부분 강화가 필요

 

Desturcturing Assignment 링크

=>https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

 

 

dungeon by Dario Morandotti #unsplash