This

자바스크립트에는 this라는 키워드가 존재한다. 또한 이 this 키워드가 다른 언어와는 다르게 동작을 해서 잘 알아두어야 한다. node.js와 브라우저의 js는 서로 다른 의미의 this를 가지며, 여기선 브라우저의 this를 알아볼 것이다. 가장 포괄적인 설명은 this는 호출한 객체를 의미한다는 것이다. 1. 전역 객체 브라우저에서 window객체는 브라우저에서 시행되는 가장 큰 객체로 존재한다. 따라서 달리 참고할 대상이 없는 this는 모두 window를 의미한다. // 전역에서 사용되는 this는 전역(global)과 같다. var a = 27; console.log(this.a); // OUTPUT: 27 function sum() { console.log(this.a + this.b + ..

Hoisting

JavaScript는 호이스팅이란 아주 유명한 특징이 있다. 특히 변수 var의 호이스팅은 장점도 있겠으나 여러 문제를 일으켰고, 이를 방지하기 위해 let과 const라는 새로운 변수가 생겼다. 그 후로는 let과 const를 사용하면서 호이스팅의 문제가 줄어들었지만, JS의 특별한 작동 방법을 알기 위해서라도 호이스팅을 알아볼 필요가 있다. 변수의 Hoisting 변수의 호이스팅은 변수의 선언이 발생한 스코프 최상단으로 이동하는 듯한 현상이다. 이는 자바스크립트를 실행하면 제일 먼저 코드 안의 모든 변수를 선언하는 과정을 거치기 때문이다. 변수는 결국 메모리 주소를 의미한다. var a = 10; 의 뜻은 a에 해당하는 메모리 주소에 10이라는 숫자를 넣어놓는다는 의미이다. 메모리 주소는 외우기가 극..

DOM API 란?

DOM은 Document Object Model의 약자이다. 프론트엔드에서 이는 HTML에 있는 요소들을 트리 구조로 다루는 모델을 의미한다. HTML 요소들을 DOM으로 접근하면, javascript를 이용해 동적으로 HTML의 내용, 구조, 스타일을 변형시킬 수 있다. DOM에 접근하는 여러 메소드가 있으나 가장 많이 사용되는 것은 querySelector일 것이다. querySelector는 태그, 클래스, 아이디 모두 사용 가능하며 querySelectorAll을 이용해 여러 요소를 한 번에 불러 오는 기능까지 있기 때문에 아주 유용하다. 아래와 같은 HTML이 있다고 해보자. 1 2 3 4 만약 우리가 1번 째 div를 호출하고 텍스트를 바꾸고 싶다면 아래와 같이 할 수 있다. // 호출 let..