HTML 실행 위치에 따른 오작동HTML 문서는 작성된 태그들을 위에서부터 아래로 차례차레 읽어들이는데, 이러한 특성으로 인해 가끔 스크립트의 작성 위치에 따라 오작동을 일으키기도 한다. Hello World! 예를 들어 위와 같이 window.onload그러므로 문서가 준비된 이후에 자바스크립트 코드가 실행되도록만 한다면 문서 앞에 선언해도 상관 없어질 텐데 이러한 역할을 해 주는 것이 바로 window.onload()이다. 웹 브라우저 자체를 담당하는 window 객체가 웹 문서를 불러올 때 문서가 사용되는 시점에 실행되는 onload라는 함수를 개발자가 다시 재정의한다는 개념. Hello World! window.onload에 대한 자세한 내용은 아래 글 참조. [HTML] Life Cycle(생명..

Rest parameter란 함수의 마지막 매개변수 앞에 점 세 개( ... )를 붙여서 정의한 매개변수로 나머지 매개변수라고도 한다. 여기서 '나머지'라는 용어는 영어로 rest에 대비되는데, 함수에 전달된 추가적인 인수들을 나타낸다. 따라서 Rest 파라미터부터는 사용자가 Rest 파라미터에 할당되는 인수를 계속 추가할 수 있다. function myFunc(a, b, ...numbers){ console.log('a: ', a); // a: 1 console.log('b: ', b); // b: 2 console.log('나머지: ', numbers); // 나머지: [3, 4, 5, 6, 7, 8, 9, 0] } myFunc(1, 2, 3, 4, 5, 6, 7, 8, 9, 0); 위는 자바스크립트..

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

버블링(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..

typeof 연산자는 인수의 자료형을 반환한다.   자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 용이하다.    typeof 연산자는 두 가지 형태의 문법을 지원한다. 1. 연산자  typeof x 2. 함수  typeof(x)   괄호가 있든 없든 결과는 동일하다.   typeof 연산자 사용 예시(1)typeof undefined // "undefined"typeof 0 // "number"typeof 10n // "bigint"typeof true // "boolean"typeof "foo" // "string"typeof Symbol("id") // "symbol"   위와 같이 typeof x를 호출하면 인수의 자료형을 나타내는 문자열을 반환한다.   ..