• 혜성:

중요 - 함수/메서드로 인한 this의 차이 공유 - 진우님이 말하셨듯이 자바스크립트에서 객체가 프로퍼티로 작용하는 것이 나중에 면접같은 곳에서 사용될 수 있어 중요하다는 생각이 들어 기억에 남았음 call/apply 메서드를 다른 사람들이 쓰는 것을 보며 왜, 어떻게 쓰는지 몰랐는데 이번에 알 수 있었다 map 메서드로도 this를 받을 수 있다는 것 중요 / 나중에 사용될 수 있을 것 같고 신선했다

• 찬균:

몰랐던 점 - 다 처음이어서 어려웠고 전역 공간에서 this는 전역 객체를 참조 LE의 스코프 체인 흐름을 3장에서 이해할 수 있었음. 중요 - 장 전체

• 효중:

중요 - 호출 방법에 따라 this가 달라진다는 것이 중요하고 화살표 함수에서 this, 몰랐던 것 - 명시적으로 this를 바인딩하는 것을 처음봐서 신기 했다

• 진우:

중요 - this가 지정해주는 주체가 없으면 전역객체를 바라본다는 것이 중요. delete라는 함수를 쓰는 경우 내부에서 내부에서 변수로 할당하는 경우 못 쓰는 경우가 둘 다 사용가능한 것이 아닌가?하는 생각이 들었음 this 바인딩 부분에서 어떻게 호출되는지, 점으로 구분할 수 있다는 것을 처음 알았고 화살표 함수의 장점을 느낄 수 있었다

• 세희:

중요 - 함수 호출 시 앞에 주체가 '.'으로 명시되어 있으면 함수로서가 아닌 메서드로서 호출한 것이라는 것 '.'이 평소에 프로그래밍이나 공부를 하며 많이 봐와서 친숙 this의 대상을 바인딩하는 여러 방법을 알게 되었지만 정확히 이해하기 어려웠음.

• 은지:

중요 - 생성자 함수 내부에서의 this. 전에 자바 프로그래밍 수업의 과제를 할 때 이와 비슷한 내용을 다룬적이 있었는데 드디어 조금이나마 이해할 수 있었다 어려운 점: bind 메서드 - 이해가 잘되지 않아서 어려웠음

• 성은:

자바스크립트보다 자바가 익숙한데 자바와 조금 다른 점을 보며 많이 신기하고 알아갈 수 있었음 명시적으로 this 바인딩할 때 call/apply 메서드로 모든 배열 메서드에 활용가능하다는 점이 중요하다고 느낌

• 재훈:

궁금 - runtime 패키지 중 bun과 dino가 시간이 많이 단축된다는데 지금 단계에서 사용하는 것이 효율적이지 않을까하는데 혹시 적용 시 단점이 있을지 call/apply 메서드로 this 우회 가능하다는데 화살표 함수로 사용하면 효율적으로 코드 작성이 가능한데 알아야하는 이유가 이런 메서드로 작성된 프로그램들이 많고 이를 화살표 함수로 바꿀 수 있을 것 같음 중요 - bind 메서드 부분

• 유진:

중요 - 호출방식에 따른 차이: this를 함수로 호출 시 전역객체 참조 / 메서드로 호출 시 호출 주체의 정보 담김 명시적 this 바인딩 방법 중 bind 메서드로 함수에 this를 미리 적용하며 부분 적용 함수를 구현할 수 있다는 점 어려움 - 콜백 함수 호출 시 그 함수 내부에서의 this 예제 부분 새로움 - 생성자 함수에서 this는 생성될 인스턴스 참조 궁금 - call/apply 메서드가 this예측이 어려워 코드 해석을 방해한다는 단점이 있는데 ES5 이하 환경에서 대안이 없어 실무에서 광범위하게 사용 중이라는데 ES6나 그 이후 환경에서는 어떤지.

• 추가 개념

• deno/bun 등의 node.js의 단점을 보완한 환경도 있다
• bun이 zig라는 언어로 개발을 했는데 자바스크립트 실행을 하려면 엔진이 필요한데 bun이 애플에서 만든 webkit이라는 엔진을 사용하기 때문에 지원이 되지 않는 부분이 많음 / 사용해서 얻는 이득이 많지 않음
• webpack / babel : 예전 코드를 최신으로 바꿔줌
• swc : rust로 하는 웹 기반 도구 존재

링크

Deno: https://discordapp.com/channels/1021027413020385351/1067376863422455838/1072439589849018418 Bun: https://discordapp.com/channels/1021027413020385351/1067376863422455838/1072439610984124436

뭘까요?

const arrow = () => {
    console.log(this);
};

arrow(); // Window

const arrow = () => {
    console.log(this);
};

arrow.call({ x: 1 }); //  Window

→ arrow function은 call 메서드로 호출해도 this는 Window를 참조

const obj = {
    fun: () => {
        console.log(this);
    },
};

obj.fun(); // Window

function foo() {
    console.log(this)
;}

foo.bind({ x: 1})();
// var bar = foo.bind({ x: 1});
// bar();
// 커링!

→ 커링 개념 더 알아보기 링크 추천: https://velog.io/@hustle-dev/Javascript-%EC%BB%A4%EB%A7%81%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90