자바스크립트 (3) 썸네일형 리스트형 [JS] this 바인딩과 화살표 함수 자바스크립트에서 this는 다른 객체지향 프로그래밍 언어들과는 많이 다르다. 저번 주에 팀원들과 딥 다이브 스터디를 하면서, 인스턴스 객체의 메서드들은 화살표함수로 정의하는 것이 좋다고 설명을 했지만, 준비성 부족으로 인해 예시를 들고오지 못했었다... 그런데 오늘 바닐라JS 컴포넌트 구현을 연습하면서 예시를 발견했음. 이 밖에도 this를 잃어버리는 경우가 많겠지만 (1)어떤 경우에 this를 잃어버리는지, 그리고 (2)이때 this는 무엇을 가리키는지, 그리고 (3)왜 화살표 함수를 사용해야 하는지에 대해서 간단한 예시와 함께 정리해보았다. 예시) 누르면 숫자가 1씩 커지는 버튼 html body html body에는 id가 'root'인 빈 div 태그 하나만 있습니다. 여기에 버튼엘리먼트를 추상화.. [JS] 자바스크립트 모듈 시스템 이해하기 💡 알게 된 것들 1. NodeJS에서 import문을 사용했을 때 SyntaxError: Cannot use import statement outside a module 에러를 내뱉은 이유 2. NodeJS에서 import 문이 아닌 require 문을 사용하는 이유 3. 클라이언트 사이드 자바스크립트에서 type = "module" 설정을 했던 이유 추가) 모듈은 독자적인 모듈(파일) 스코프를 갖는다. 키워드 1. CommonJS와 require 2. NodeJS와 브라우저의 모듈 시스템 3. import ~ export 들어가며 바닐라 자바스크립트로 한창 클라이언트 사이드 토이 프로젝트를 진행하면서 index.html 파일에 자바스크립트 파일을 연결할 때 습관처럼 붙인 키워드가 있었다. 바로 typ.. [JS] var를 지양해야 하는 이유 (feat. 호이스팅, 스코프, 실행 컨텍스트) ⚠️ var 대신 let 또는 const 를 사용하세요. 자바스크립트를 처음 공부할 때 많이 듣는 말이다. 그리고 이 이유에 대해서 의구심을 품고 조금이라도 공부해봤다면 아래의 이유로 사용하지 말아야 겠구나 하고 넘어갔을 것이다. 1. var는 중복으로 선언이 된다. 2. 스코프의 범위가 모호하다. 3. 호이스팅이 된다. 처음에 공부할 때는 지식의 깊이가 너무 얕아서 깊게 파려 하면 오히려 역효과가 날 수 있기 때문에 이 정도만 이해하고 넘어갔었다. 하지만 지금 자바스크립트에 대해서 깊게 공부할수록 꼬리를 물고 연결되는 개념들이 정말 많았는데, 차근차근 정리해보려 한다. 컴파일 언어와 스크립트 언어 우선 컴파일 언어와 스크립트 언어에 대해 알고 넘어가자. 만약 C언어를 배워봤다면, “C는 컴파일 언어이다.. 이전 1 다음
