현재는 다양한 사용처와 플랫폼을 지원하고 있지만, 자바스크립트는 본래 웹 브라우저에서만 사용하기 위해 만들어진 언어다. 그만큼 웹 분야에서의 자바스크립트란 독보적인 존재라고 할 수 있는데, 자바스크립트로 웹 브라우저를 다루기 위해서는 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 객체를 만날 때까지 각 요소에..

Javascript는 동적 타입 언어로 변수의 타입을 미리 선언할 필요가 없다. Javascript는 컴파일 과정 없이 실행과 동시에 해석하는 인터프리터 언어다. 그런 원리에서 코드가 실행되는 과정에서 상황에 따라 값의 타입이 유연하게 바뀔 수 있는 것이다. 명시적 형변환 명시적 형변환은 말 그대로 명시적으로, 즉 의도적으로 형변환을 하는 경우에 해당한다. 명시적 형변환은 주로 String, number, boolean 타입으로 이루어진다. 어떤 값의 타입을 의도적으로 변경해서 사용하겠다는 의미기 때문이다. symbol은 자주 사용되지 않고 null과 undefined는 자료형인 동시에 값이므로 필요한 경우 그 값을 할당하면 된다. 따라서 이 세 종류의 명시적 형변환을 위해 각각 String(), Num..

Javascript는 꽤 오랫동안 호환성 이슈 없이 발전해 왔다. 기존의 기능을 변경하지 않으면서 새로운 기능들이 추가되었던 것이다. 덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있었다. 하지만 Javascript 창시자들이 했던 실수나 불완전한 결정이 언어 안에 그대로 박제되어 있다는 단점도 생길 수밖에 없었다. 이런 상황은 ECMAScript5(ES5)가 등장하기 전까지 지속되었다. 그러나 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 그리고 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생기게 되었다. 그리하여 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict m..