for ... offor (변수선언문 of 이터러블) { ... } - 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다.- 내부적으로 Iterator의 next 메서드를 호출해 이터러블을 순회하며 next 메서드가 반환한 리절트 객체의 value 프로퍼티 값을 for ... of문의 변수에 할당한다. for ... infor (변수선언문 in 객체) { ... } - 객체의 모든 프로퍼티를 순회하며 열거한다.- 순회 대상 객체의 프로퍼티뿐만 아니라 상속받은 프로토타입의 프로퍼티까지 열거한다.- Symbol을 키로한 프로퍼티는 열거하지 않는다.- 객체의 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중에서 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며..
ES6 문법 중 정말 많이 사용하는 문법들 위주로 정리했다. let, const keywordlet, const, var 키워드에 대해서는 따로 자세하게 정리할 예정이다.간단하게 살펴만 보자 var : 재정의와 재선언이 모두 가능하다.let : 재정의는 가능하나, 재선언은 불가능하다.const : 재정의와 재선언 모두 불가능하다.// varvar a = 2;a = 5;var a = 7;console.log(a); // 7// letlet x = 1;// let x = 2; // SyntaxError: Identifier 'x' has already been declared{ let x = 4; console.log(x); // 4}console.log(x); // 1// const{ const y ..
문서 객체 모델 문서 객체 모델(DOM)은 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법으로, Document Object Model의 약자이다. 즉, 웹 문서의 텍스트, 이미지, 표 등 모든 요소는 모두 객체이다. DOM 트리 DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다. h1태그입니다. p태그입니다. DOM은 body는 h1, p의 부모요소이고 h1, p는 body의 자식 요소로 구조화한다. 이 구조화된 그림을 DOM트리라고 부른다. 위의 그림에는 HTML 요소만 표현되어 있지만, DOM트리는 웹 문서의 HTML 요소만 표현하지는 않는다. HTML의 요소가 가지고 있는 텍스트, 이미지도 자식으로 간주하여 DOM트리에 표현한다. 위의..
querySelectordocument.querySelector(selectors);document.querySelector는 'selectors'와 일치하는 문서 내의 첫 번째 element를 반환한다. 일치하는 요소가 없다면 null 반환. getElementByIddocument.getElementById(id);document.getElementById는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾아 이를 나타내는 element 객체를 반환한다. 일치하는 요소가 없다면 null 반환.id가 없는 요소에 접근하려면 querySelector를 사용한다. 차이점querySelector보다 getElementById가 더 빠르다.querySelector는 다양한 선택자를 사용할 수 있다. (ge..
