자바스크립트로 웹 페이지를 자유롭게 다루기 위해서는 DOM에 대한 이해가 필요하다   DOM(Document Object Model) DOM은 말 그대로 웹 페이지의 모든 콘텐츠들을 객체로 나타내 주는 것이다. 그래서 간단히 생각하면 웹 페이지를 document라 부르고 이러한 document를 자유롭게 다루기 위해 객체화 하고자 구현된 개념이 결국 DOM이라고 생각할 수 있겠다. cf) HTML 태그와 텍스트, 속성 등 document에 담겨 있는 모든 요소 하나하나를 객체화 한 단위를 Node라고 부른다. 결국 DOM은 웹 페이지를 객체화 한 개념이고 이 웹 페이지의 가장 상단 진입점이 document 객체이다. document 객체는 DOM 트리의 최상위 객체. document 객체는 window ..

undefined과 null   여기 두 개의 휴지걸이가 있다. 휴지 자체가 아예 없는 휴지걸이와 휴지심만 있고 휴지는 없는 휴지걸이. 둘 다 '휴지가 없다'고는 말할 만한 상황이긴 하지만 분명 다르다고 할 수 있다. Javascript에도 '없음'을 나타내는 값이 두 개 있다. undefined과 null. 이 둘은 언뜻 비슷한 것 같지만 사실 의미도 목적도 용도도 엄연히 다르다.  결론부터 말하자면 undefined는 변수에 값이 할당되지 않았다는 의미로 자바스크립트 엔진이 자동으로 할당하는 초깃값이며, null은 변수에 값이 명시적으로나 의도적으로 없음을 나타내는 값이다. undefined는 '할당된 값 자체가 없다'는 뜻으로 null과는 차이가 있다. cf) undeclared는 변수 선언조차 된..

현재는 다양한 사용처와 플랫폼을 지원하고 있지만, 자바스크립트는 본래 웹 브라우저에서만 사용하기 위해 만들어진 언어다. 그만큼 웹 분야에서의 자바스크립트란 독보적인 존재라고 할 수 있는데, 자바스크립트로 웹 브라우저를 다루기 위해서는 window 객체와 document 객체, BOM과 DOM에 대한 이해가 필요하다. 인터넷 브라우저를 보면 주소창, 즐겨찾기, 툴바, 탭 등이 보이고 그 다음부터 웹 사이트가 표시된다. 여기서 브라우저 전체를 담당하는 게 window 객체이고 웹 사이트만 담당하는 게 document 객체다(document 객체도 window 객체 안에 들어 있음).    window window 객체는 두 가지 역할로 나눠 생각해 볼 수 있는데, 1) 브라우저 안의 모든 요소들이 소속된 최..

nullish 병합 연산자 '??'를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어 있는' 변수를 찾을 수 있다. a ?? b의 평과 결과는 다음과 같다. 1) a가 null도 아니고 undefined도 아니면 a 2) 그 외의 경우 b ?? 없이 이와 동일한 동작을 코드를 작성하면 아래와 같다.// x = a ?? b x = (a !== null && a !== undefined) ? a : b; 이럴 때 ?? 연산자를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있다. ??와 ||의 차이 nullish 병합 연산자는 언뜻 or 연산자 ||와 비슷해 보인다. 그러나 두 연산자 사이에는 중요한 차이점이 있다. 1) ||는 첫 번째 truthy 값을 반환 2) ??는 첫 번째 정의된 값을..

console.log() Console은 브라우저의 내장 디버거로서 웹 개발 시 수도 없이 많이 사용된다.그중에서도 console.log()는 일반적으로 가장 많이 사용하는 함수로 자바스크립트 객체, 문자열 등의 데이터를 콘솔창에 출력시키는 데 사용된다. console.log()를 출력하거나 그 기능을 사용하기 위해서는 개발자 도구를 이용해야 한다.아래 예시는 콘솔창을 통해 실행한 것으로 마지막 라인에 '가 출력되는 이유는 콘솔창에서 특정 함수를 실행하면 그 함수의 return 값을 출력하도록 만들었기 때문. console.log()는 return 값이 없다.      console.log()의 객체 참조  console.log()가 다른 값을 찍어 준다? console.log()를 통해 로깅을 할 때 ..

버블링(bubbling)의 원리는 간단하다. 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작한다. 이러한 과정이 가장 최상단의 조상 요소를 만날 때까지 반복되면서 각 요소에 할당된 핸들러가 동작하는 것이다.   3개의 요소가 grand-div > parent-div > child-div 형태로 중첩된 구조.가장 안쪽에 위치한 child-div를 클릭하면 다음과 같은 순서로 이벤트가 발생한다.  1) child-div에 할당된 onclick 핸들러가 동작한다.2) parent-div에 할당된 onclick 핸들러가 동작한다.3) grand-div에 할당된 onclick 핸들러가 동작한다.4) 위와 같은 과정으로 document 객체를 만날 때까지 각 요소에..