개발자 면접 단골질문 자바스크립트 this

[@BillionaireAzalea]

const ageTest= { unit: "살", ageList: [10,20,30], getAgeList: function (){ const result = this.ageList.map((age)=>{ return age.toString()+ this.unit; }); console.log(result); } } ageTest.getAgeList(); 처음 쓰인 this가 ageTest를가리키니까, 화살표 함수를 사용해서 this를 계승시켜주면, unit을 받아오게 하고, Not a number를 피하기 위해서 age에 toString()으로 변화시켜주고 다시 unit을 더해줘봤습니다.

[@바클리-p4g]

어찌 나이가 들수록 점점 더 웃음이 많아지셔서 좋네요 전 나이가 들수록 몇년전보다 웃음이 없어진거 같다는 생각이 드는데

[@시즈닝텐더]

JS Array의 map 메소드의 콜백 함수는 기본적으로 this가 바인딩되어 사용됩니다. map 메소드의 두번째 매개변수에 원하는 값을 this로 바인드 할 수 있습니다.

[@user-jc6ti9xu7u]

진짜 이 분은 대박이네...맨날 그렇게 인터넷으로 this 찾아보고도 완전히 내 게 안됐는데...

[@d2341a]

이 분->이분

[@llIIlIlIIlI]

@@d2341a 이 분이 맞는데 ㅋㅋ🤣

[@d2341a]

@@llIIlIlIIlI 모르면서 아는 척하는 이유가?

[@torutomaktu]

이 누나는 .bind한 매력이 넘쳐

[@terry-f9w]

찢었다.... 많이 본 것은 디스 부분에서 아니지만 최고라 생각함

[@Jinseo1905]

화살표함수를 포함한 함수표현식이 호이스팅이 안 되는 것처럼 형태는 함수이지만 자바스크립트는 절반만 함수로 인정해주는 느낌이네요 뭔가

[@richardjung9875]

헷갈리기만 하고 당장에는 굳이 안 써도 업무에 큰 무리가 없는듯 해서 아웃 오브 안중이었는데 알고보니 생각보다 더 야속한 문법이었네요… 친절한 설명 감사합니다. 언젠가 다른 프로젝트를 할때 이 야속함을 이용해야만 해야 할 날이 올 수도 있겠지요.

[@userpark]

어쩌다가 지나가다 강의를 보게되었네요. Javascript가 많이 복잡해져가네요. 다른 언어에서는 this는 Instance화 된 자기 자신을 지칭하는데, Javascript는 그때, 그때 다른 Case By Case네요... 순수언어가 중요하다고 다시 느낍니다. 그래야 거기에 대입할수 있겠죠. 일단, Windows Form 프로그램의 this가 sender와 비슷한 하고, bind는 실제 윈도우 이벤트 메소드에 파라메터 값으로 전달 됩니다. '=>' 이건 람다식을 이용할때 사용하며, 실제 윈도우 이벤트에 bind 개념이 포함되어져 있습니다. 웹개발 안한지 15년이 지난, C#/Delphi개발자의 의견이었습니다. ^^ 시간이 지난 강의였지만 지금봐도 너무너무 좋은 명강의 잘 봤습니다.

[@calebj8428]

1) const result = this.ageList.map(function(age){ return age + ageTest.unit; }); 2) const result = this.ageList.map((age)=>{ return age + this.unit; });

[@코딩알려주는누나]

2번조아!

[@인-k5k]

정말 감사합니다..화살표함수까지 설명흐름 개쩔어여ㅜ

[@BoemJinKim]

들어본 this 강좌 중 최고

[@코딩알려주는누나]

키아 내가 들어본 칭찬 중 최고의 칭찬 🙏

[@어쩌다보니ENTJ]

와.... 안 그래도 지금 자바스크립트에서 this 이거 하는중인데 이해가 안 갔는데 알고리즘 무슨일이에요 ㅠㅠ 누나 감사합니다 !!

[@mensol3270]

const result = this.ageList.map(function(age){ return age+this.unit; },ageTest); console.log(result);

[@itsmylife-nowOrNever]

쿠라닮은 귀여운 누나의 실버버튼 언박싱 하는 날을 보름달을 보며 기원할게요 ㅎㅎㅎ

[@코딩알려주는누나]

예ㅔㅔㅔ 감사합니다!

[@모두까리]

누나~~ 날씨가 추워요~~ 감기 조심하세요

[@Hong-Mu]

유익 그 자체

[@rlehxmrrhdeo]

와...방금 이거 고민하고 있었는데ㅋㅋㅋ영상 감사합니다!

[@jeffrey0208]

화살표함수의 놀라운 차이를 깨닳았다.. ㄴ ㅁ ㄱ 15:00

[@Gil_1122]

ㅋㅋㅋㅋ재밌고 유용한 영상 그잡채, 잘 보고갑니다 :)

[@yoonseog10jotgga]

3:41 바이브레이션 중독 반복

[@ZondyYT]

손이 진짜 예쁘다...

[@김용민-u2o]

마지막 부분에 NaN, NaN, NaN이 출력되는 이유를 한번만 설명을 해주실 수 있을까요? 제가 이해한 것은 ageTest.getAgeList();로 호출되었기에 getAgeList 내부에서 사용하는 this는 ageTest를 this로 가리키고, return의 this.unit 같은경우는 getAgeList처럼 따로 호출해주는 것이 없기에, 이때의 this는 window 객체를 가리켜 NaN이 출력되는 것이 맞나요? 이를 해결하기 위해 arrowfunction을 활용하여 함수가 속해있는 곳 상위의 this 즉, ageTest의 unit을 this로 받아 10살, 20살, 30살 이렇게 출력이 되도록 코드를 바꾸는게 맞나요?? 설명을 잘해주셨는데 제가 미숙하여 조금 헷갈리네요 ㅠㅠㅠ

[@ju2734]

map이 일반함수이기 때문에 this가 window객체를 가리킨다고 알고있습니다. 아마도 map을 호출하는 객체가 window 객체인 것 같습니다.

[@yeorinim2sida]

코딩은 모르겠고 이뻐서 봅니다 😍😍😍😍🤩

[@want-you-kr]

진짜 유익합니다..

[@minhyunglee6550]

좋은 강의 감사합니다😊

[@dalfst]

18:30 부터 화면이 잘리네요~

[@KienNguyen-ku1jt]

언제나처럼 훌륭한 비디오. 더 풀어주세요

[@devenvbok6153]

.apply(this) or .bind(this).😀 one of the starangest programming languages out there.

[@도리도스도]

흠 .. map()안의 함수가 메서드가 아닌 일반함수이기 때문에 그 속의 this가 전역객체를 가리켜 NaN이 나온걸까요? 추측을 해봅니다

[@roof102]

아아 잘 이해하다가 마지막에 result에서 이해가 안가네... 화살표함수쓰면 상위디스를 계승해서 작동하는건알겠는데 일반함수일때는 왜 낫어넘버가 나오는걸까요? ageTest.getAgeList()로 잘 호출해서 this가 ageTest를 바라보고있는건 맞고 맵 안에서의 this는 어딜보고있는걸까요? 스피드웨건 부탁해요~!

[@HMSW]

Map안에 파라미터로 들어가는 함수는 일반함수로써 호출되는 콜백함수로 일반함수의 경우 this가 window객체(전역객체)를 바라봅니다.

[@d2341a]

웨건->왜건

[@d2341a]

@@HMSW 로써->로서

[@iil3.378]

@@HMSW 마지막 살 문제에서 THIS 가 Wiindw 인 이유가 this.unit 이 참조하는 객체가 없어서 라고 생각하면 될까요 ???

[@d5br5]

안녕하세요. 좋은 영상 감사합니다. 혹시 react의 함수형 컴포넌트 안에서 this 를 console 찍었을 때 undefined가 나오는 이유도 설명해주실 수 있나요? global(window) 아니면 객체라 생각했는데 undefined가 나올줄은 상상도 못했어서요,, 관련하여 검색해봐도 나오지 않아서 ㅜ 혹시 아시는 분 답글 달아주실 수 있나요??

[@Jwuice]

아마 웹팩의 도움을 받고 계실텐데 그렇다면 자동으로 use strict가 활성화 되어 그렇습니다. use strict에 대해 알아보시면 좋을 것 같아요.

[@d5br5]

@@Jwuice 와 머리가 띵하네요... 감사합니다!

[@devenvbok6153]

👍 In React, when you log "this" you may get undefined. Here is a great example that you can run function f2() { 'use strict'; // see strict mode return this; } console.log(f2() === undefined); // true In the functional React class, when you log this, "this" is bound to the functional react class and not bound to the inheritance object.

[@hjkim1121]

안그래도 면접때 질문 받았는데ㅎㅎㅎ

[@black_model_x]

쉽게 말하면 현재 실행 컨텍스트 기준 가장 가까운 상위 object 타입 레퍼런스 임

[@jeffrey0208]

감사 :) 쉽게 말하면 현재 실행 컨텍스트 기준 가장 가까운 상위 object 타입 레퍼런스 설명 깔끔!!

[@blackat9052]

혹시 map 괄호 안에서 바로 function 입력 되는 건, 어떤 extension 덕분인가요?

[@Bluetooth46726]

ㅋㅎㅋㅎ 살려줘 ㅋㅎㅋㅎㅋ넘재밋다

[@1average314]

getAgeList : function() { const sal = this.unit const result = this.ageList.map(function (age) { return age + sal 화살표 함수를 안 쓴다면 이전 영역(scope?)에 선언하고 할당하면 되지 않을까요?

[@HMSW]

Map함수안에 파라미터로 콜백함수를 넣어주면 콜백함수는 map함수 내부에서 일반함수로 호출되기때문에 콜백함수안의 this는 전역객체를 참조하게됩니다. 밖에서 정의를 했어도 콜백함수를 파라미터로 넣는 순간 this는 전역객체가 됩니다. 넣어줄때 콜백함수에 this바인딩을 해줘서 this정보를 같이 넘겨줘야합니다.

[@adrianchoi546]

재밌네요. ㅎㅎ. 재능기부같은 건가.

[@왕방빵-q6z]

와 유익해!

[@dbdbdbdiv]

React 를 안쓰고 바닐라 js 만으로 개발해야할 시에 리액트처럼 모든 함수를 arrow function 으로 통일해서 사용하는게 좋을까요? 몇번 써보니 가독성도 좋고 this 같은 경우에 scope 고민할 필요도 줄어들 것 같은데 혹시 단점이 있을런지..

[@ucandoitkkk]

우선 전부 써보고 퍼포먼스나 다른 기능문제가 이상이 있으면 그때는 일반함수로 바꿔도 될 것 같아용

[@devjun2050]

This를 사용하지 않다면 화살표함수로!

[@d2341a]

있을런지->있을는지

[@정은철-o7t]

위의 내용을 완전히 숙지해야.. 화살표 함수로 심플함을 유지할수 있을것 같은데.. 그러라고 화살표 함수가 생긴거고.. 근데.. 다른 언어를 먼저 배웠던 사람으로서.. 자바스크립트는 입문 단계에서 정말 어려운 언어라고 생각..

[@홍태준-s7m]

따봉추

[@hyblidblackbox8847]

눈나 넘 이뻐요

[@김사랑-e2f]

순수 자바스크립트로 프로그램 하지 않은 이상 개념만 알아두시고 솔직이 실무에서는 거의 쓸일없음

[@mensol3270]

이직 시기인데 굿 정보

[@iil3.378]

구독 씨게눌렀습니다 누님 감사합니다

[@_JEh]

빨리 구독자 10만되세요~!!

[@iil3.378]

마지막 살 문제에서 THIS 가 Wiindw 인 이유가 this.unit 이 참조하는 객체가 없어서 라고 생각하면 될까요 ???

[@leva2285]

자세히아는건 아니지만 프론트 백엔드 기타등등 그런것들을 다 할줄 아시는건가요? 코딩에 코자도모르는상태로 영상 알고리즘떠서 보고있는데 가르치는분이시면 그냥 다할줄아시는건지 궁금해서 댓글남겨봅니다

[@hyunsookang8782]

this = self

[@BIG_TRAIN]

예쁘시내요

[@오혜성학부졸업바이오]

👍

[@zxy-v1i]

디스 쓰긴 하나요?

[@코딩알려주는누나]

저는 노드제이에스하면서 썻어요!

[@FCArseral]

진짜많이쓰는데…

[@HMSW]

엄청나게 씁니다

[@bloodychoco]

거시기하네요;) This는

[@k0su442002]

아우 복잡하다... 실무에서 this 거의 써본적 없는데 머리 꺠지겠네..

[@minsu07311]

그니깐 뭐냐 화살표 함수를 쓰도록하자!! 라는 말이신거지

[@코딩알려주는누나]

어 아닌데!무조건 화살표를 쓰면 앙댄다 라는건데

[@bart2865]

이래서 저수준 언어가 아직 있는건가 포인터를 이렇게 길게 설명해야하다니

[@spongeb2798]

😊😊😊😊😊😊😊😊😊😊

[@김제하-q6w]

누나까지 다나카한테 빠지다니...

[@zuny25]

this is not this

[@geegee306]

this는 생성된 객체 자기 자신의 주소값을 저장해둔 포인터 변수입니다. 포인터가 없는 javascript에서는 어려운 개념이겠네요.

[@무명-u4q]

컨텍스트에 따라 가리키는 타겟이 달라지는 포인터이기 때문에 생성된 객체라고 정해놓을 수가 없습니다 본인 스스로 혼동하고 계시네요 아마 C/C++이나 이와 유사한 정적 타이핑 언어에 기반을 두고 this를 이해하고 계신거 같은데 JS의 this는 런타임에 바인딩이 됩니다

[@geegee306]

@@무명-u4q 해당 멤버함수가 호출될때 대입되요. c++에서도 똑같이 멤버함수를 c에서 직접구현해보는 예제가 제일 이해가 빠르겠어요. 간략하게 댓글로 써둔것입니다 ㅎㅎ 추가적으로 디스에 디해 이야기하면 뭐 한도 끝오 없겠네요

[@d2341a]

@@geegee306 되요->돼요

[@fistakr]

스파게티 소스 만들어 놓은 놈들한테 디스는 많이 했는데..

[@코딩알려주는누나]

뿌뿌뿌뿌😎 라임 머야

[@meal-skipping-worker]

this 는 머다 버튼이다......... 아

[@99snipper]

이런분이 대학교 교수 하셔야됨

[@HENRY-pu9ix]

미모를 보는 것이 더 즐거워요.

[@이재홍-c7f]

겸둥이 왔는가?

[@iparken]

다나카 알고리즘 탓네 ㅋㅋㅋㅋㅋㅋㅋㅋ

[@todayisthebestdayofmylife]

너무이뻐서 강의가 잘 안들어옴...

[@Hyuchan1002]

디스 ? 담배 아닙니까?ㅋ

[@bea-dv5gp]

코딩알려주는누나가 아니고 코딩알려주는누나또는언니라고 해야되는거 아닌가요 ㅋㅋ

[@hydropascal]

차잘못인 사람들 특히 여성분들이 좋아하는 차 뺀츠가 드림카라니 ㅎㅎ

[@hgu7339]

음....근데 궁금한 게 하나 있네요. 이전 예제에서는 const globalCar = car.getName; 이렇게 할당하고 호출하니까 this 는 window 가 맞다고 생각했는데, 마지막 예제는 map 을 호출하는 this.ageList 가 실행된 후 그 결과값이 result 에 담기는 거라서 실행 시점에는 this 가 this.ageList 라고 생각했는데 이런 경우에도 window 가 찍히는게 이해가 잘 안되네요...왜 그런 걸까요?

[@cuihao777]

// this 가 window 인 경우 Array.map1 = function (callback) { var result = []; for (var i = 0; i < this.data.length; i++) { result.push(callback(this.data[i])); } return result; }; // this 가 array 그 자체인 경우 Array.map2 = function (callback) { this.callback = callback; var result = []; for (var i = 0; i < this.data.length; i++) { result.push(this.callback(this.data[i])); } return result; };

[@정은철-o7t]

콜백함수는 그것을 호출하는 메서드가 어떻게 구현 되었는지에 따라 다 다릅니다.. 이전 버튼 예제에서 addEventlistener()는 자신의 this를 콜백 함수 this에 바인딩 시키죠.. map()는 바인딩 없이 콜백함수를 호출한겁니다.. 그럼 그 콜백함수는.. 호출되는 순간.. window에 this를 바인딩 시키죠..

[@jyoh9581]

const ageTest = { unit:"살", ageList:[10,20,30], getAgeList1 : function(){ const THIS = this; const result = this.ageList.map(function(age){ return age + THIS.unit}); console.log('getAgeList1 : ',result); }, getAgeList2(){ const result = this.ageList.map(age=>age+this.unit); console.log('getAgeList2 : ',result); } };

[@SL-lz4ij]

현대에서 제대로 이해가 되네요...호출하는놈이 결정하는거구나...