나의 개발일지/javascript5 javascript class this bind 문제 - this가 왜 undefined로 나오지? typescript로 express api 기본 세팅의 보일러 플레이트를 만들다가 이론으로만 접하던 this 문제를 제대로 겪었다. controller-service-repository의 3계층 구조(3 layer pattern)로 분리하고 있는데 this가 undefined로 뜬는 게 아닌가.. gpt에 물어보니 bind 키워드를 알려줘서 아차!했다. 문제가 된 코드는 아래와 같다. // users.route.ts import { Router } from "express"; import { UserController } from "./users.controller"; import wrapAsyncMiddleware from "../middlewares/wrapAsyncMiddleware"; const.. 2024. 2. 25. [javascript | JS] 화살표 함수와 this binding javascript 호출 스택부터 다시 공부하다가 사고회로의 정지를 안겨준 this 먼저 정리하기 일반적으로 this는 가장 가까이 있는 객체를 바인딩한다 하지만 화살표 함수는 자신만의 this를 가지지 않고, 선언된 위치에서 this를 상속한다 (자신의 바깥쪽 스코프에서 this 값을 참조) 호출 시점에 사용된 객체로 this를 바인딩하는 일반 함수와는 달리, 화살표 함수 내에서 사용되는 this는 처음부터 전역객체를 가리키게 된다 const obj1 = { count: 1, increase() { this.count++; } }; obj1.increase(); console.log(obj1.count); // 2 const obj2 = { count: 1, increase: () => { this.c.. 2023. 7. 12. [javascript | JS] 자바스크립트의 자료형과 특성 ▼ 느슨한 타입(loosely typed)의 동적(dynamic) 언어 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. 따라서 변수는 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있다. → JS는 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어이다. → 문제점과 보완 1 == '1'이 True가 되는 마법.. 문자열 "1e22"는 숫자 1의 22승이 되는 마법.. 타입을 지정해주는 타입스크립트(typescript)를 사용하자...! ▼ Javascript의 형변환 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환되며, 이런 과정을 "형 변환(type conversion)"이라고 한다. 암시적 변환 alert가 전달받은 값의 자료.. 2022. 7. 21. [javascript | JS] var, let, const 변수의 생성과정, 호이스팅, TDZ, 스코프, 클로저와 은닉화(캡슐화) ▼ var, let, const if (true) { var x = 3; } console.log(x);// 3 if (ture) { const y = 3; } console.log(y);// Uncaught ReferenceError: y is not defined x는 정상적으로 출력 되는데 y는 에러가 발생하는 이유는? var name = 'Mike'; console.log(name);// Mike var name = 'Jane'; console.log(name);// Jane let name = 'Mike'; console.log(name);// Mike let name = 'Jane';// error! console.log(name);// Uncaught SyntaxError: Identifie.. 2022. 7. 19. [javascript | JS] setTimeout()을 통해 호출 스택, 이벤트 루프 알아보기 자바스크립트는 싱글 스레드이면서 어떻게 비동기 동작을 할까? JS 비동기의 핵심, 이벤트 루프에 대해 알아보자. 1. 메모리 힙 (Memory Heap) : 객체(object) 등 참조타입 데이터가 저장 되는 곳, 변수나 상수에 사용되는 메모리를 저장하는 곳. 2. 호출 스택 (콜 스택, Call Stack) 함수의 '호출', 자료구조의 '스택' 함수 호출 순서대로 쌓이고, 역순으로 실행됨. 함수 실행이 완료되면 스택에서 빠짐 LIFO 구조라서 스택이라고 불림 (후입선출, Last-In First-Out) JS는 싱글 스레드이므로 하나의 호출 스택을 가짐 (한가지 일task만 처리 가능) 파일이 실행되면 기본적으로 Anonymous라는 가상의 전역 컨텍스트가 생김, 실행이 끝나면 같이 사라짐 3. 백그라.. 2022. 6. 29. 이전 1 다음
