javascript17 [인간JS되기] this를 분석할 수 없는 케이스 제로초님 강의 보고 정리중 addEventListener의 this는 무엇일까 const obj = { addEventListener : function(eventName, callback){ callback(obj); // this가 window -> 땡 }, }; header.addEventListner('click',function(){ console.log(this); //this가 header }); - 결론 : 위의 코드만 봐서는 this를 알 수 없다! 왜냐? this는 호출할 때 정해지는데, addEventListner 함수호출은 어디서 되는지 알 수 없음. - 공식문서를 보면 일반적으로 addEventListener의 this는 앞에 붙은 객체,태그로 되어있다고 명시되어 있다 따라서, 공.. 2023. 3. 28. [인간JS되기] 자바스크립트의 this 제로초님 인간JS되기 강의 보고 정리 자바스크립트의 this는 다른 언어에서의 this와 다르다 콘솔 로그로 this를 찍어보면 윈도우가 나온다 자바스크립트에서 this는 기본적으로 window라고 생각하면 된다 js(브라우저) - window(전역객체) node - global(전역객체) 이었는데, 최근에는 둘 다 globalThis라는 것으로 합쳐졌다고 한다 (if문으로 분기처리를 하지 않기 위해 통합 되었다고 함) const obj = { name : 'soyoung', sayName(){ console.log(this.name); } }; obj.sayName(); // soyoung 이 때 this는 window를 가리키는 것이 아니라, obj객체를 가리킨다 하지만 항상 이렇게 적용 되는 것은 .. 2023. 3. 23. [인간JS되기] 호이스팅 제로초님 강의 듣고 정리 중 [인간 JS 엔진 되기 1-5] 호이스팅이란? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 var - 호이스팅 시 변수를 초기화 (undefined) let/ const - 호이스팅 시 변수 초기화X function a(){ console.log('a'); b(); console.log(x); // TDZ const x = 'x2'; } TDZ (Temporal Dead Zone) 스코프의 시작 지점부터 초기화 시작 지점까지의 구간 호이스팅을 염두에 두고 코드 분석해보기 예시 코드 const x = 'x1'; console.log(z); var y = 'here'; const z = () => {}; function c(){ const y = 'y';.. 2023. 3. 13. [인간JS되기] 스코프 체인 제로초님 강의 보고 정리 중 [인간 JS 엔진 되기 1-4] 스코프 체인 정의: 식별자의 유효 범위 일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것 스코프 체인을 간단히 설명하면 '함수에서 어떤 값에 접근이 가능한가 불가능한가' ES2015 기준으로 그 이전까지는 함수가 기준이었지만, 그 후로는 { } 블록이 기준이 되었다 함수가 아닌 블록들 if() {} for() {} while() {} 등등.... 그 외에도 { } 그냥 이렇게만 있는 블록도 있는데 객체가 아니므로 주의! => 이걸 객체로 만들고 싶으면 ({ }) 이렇게 소괄호로 감싸서 사용 //객체를 리턴하는 함수가 아니라, 블럭이다 c.. 2023. 3. 6. [인간JS되기] 자바스크립트 호출 스택 제로초님 강의 보고 정리한 것 [인간 JS 엔진 되기] const x = 'x'; function c(){ const y = 'y'; console.log('c'); } function a(){ const x = 'x'; console.log('a'); function b(){ const z = 'z'; console.log('b'); c(); } b(); } a(); c(); 함수가 여러개 얽혀있는 코드가 있다 실행을 돌려보지 않아도 결과가 어떻게 나오는지, 어떤 함수에서 어떤 변수에 접근이 가능한지 코드를 보고 미리 예측을 할 수 있어야 한다 결과는 a(); // a, b, c c(); // c 자바스크립트 코드, 프로그래밍 코드들을 볼 때 주의할 점이 있다 일반적으로 코드는 위에서 아래, 왼쪽에서 .. 2023. 3. 3. [인간JS되기] 함수와 함수의 호출, 고차함수 제로초님 유튜브 보고 공부 함수와 함수의 호출 const add = (a,b) => a+b; //함수의 기본 형태(여기선 화살표함수로 표현) function calculator(func, a, b){ return func(a,b); } 함수 두 개를 만들어 준다 함수 add 함수 calculator const add = (a,b) => a+b; /* //위의 코드는 리턴이 생략되어 있다 풀어 쓰면 아래 코드 const add = (a,b) => { retun a+b; }; */ /* 객체 리턴 할 때 const add = (a,b) => ({a+b}); //이렇게 해야 함 const add = (a,b) => {a+b}; // 소괄호로 감싸주지 않으면 다른 결과가 나옴 */ 이 때 add함수에는 retu.. 2023. 2. 26. JavaScript :: 객체 메서드 Object methods 계산 된 프로퍼티 Computed property 객체 메서드 Object methods 객체 복제 Object.assign() // Object.assign(): 객체 복제 const user = { name: 'Mike', age:30 } const cloneUser = user; //이렇게 하면 클론이 될까? 안된다 왜냐하면 //user 변수에는 객체 자체가 들어가있는게 아니라 객체가 저장되어 있는 메모리주소인 객체에 대한 참조값이 저장 됨 //따라서 클론유저를 만들어 유저를 담아도 그 참조값만 저장된다 const newUser = Object.assign({}, user); // 여기서 빈 객체 {} 는 초기값 두번째 매개변수로 들어온 객체들이 초기값에 병합 된다 {} + {name: 'Mike'.. 2022. 7. 3. 이전 1 2 다음
'javascript' 태그의 글 목록 (2 Page)
