ES2015에서 Iterable Protocol이 추가되었습니다. Iterable Protocol에는 2가지 형태가 존재하는데, iterable과 iterator가 있습니다. Iterable iterable은 객체의 멤버를 반복할 수 있는 객체입니다. iterable은 자바스크립트 객체의 요소들에 대해 반복되는 행동(예를 들어, for .. of 구문에서 어떤 값들이 루프를 돌고 있는가)을 정의할 수 있도록 해줍니다. JavaScript에서 객체가 iterable하기 위해서는, object에는 [@@iterator] 메서드가 구현되어 있어야 합니다. 따라서 임의로 우리가 객체를 만들고 iterable하게 만들고 싶다면, object 프로퍼티에 Symbol.iterator를 추가해야 합니다. 객체는 반드시..

HTML / XML 문서는 브라우저 안에서 DOM 트리로 표현됩니다. 태그는 요소 노드가 되고 트리 구조를 형성합니다. 문자는 텍스트 노드가 됩니다. 이 외에 HTML 내의 모든 것은 DOM을 구성합니다. 심지어 주석까지도 말입니다. HTML 안의 모든 것들은 (심지어 그것은 주석이더라도) 노드이고, 이 노드들이 모이고 서로 연결되어 DOM을 구성하고 있습니다. 노드의 종류 노드 타입은 총 12가지인데, 실무에서 주로 다음 네 가지 노드를 다룹니다. DOM의 '진입점'이 되는 문서(document) 노드 HTML 태그에서 만들어지며, DOM 트리를 구성하는 블록인 요소 노드(element node) 텍스트를 포함하는 텍스트 노드(text node) 화면에 보이지는 않지만, 정보를 기록하고 자바스크립트를 ..

문서 객체 모델(DOM) 문서 객체 모델(Document Object Model, DOM)은 자바스크립트 Node 객체들의 계층화된 트리입니다. HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 객체들의 트리 구조로 변환된다는 것입니다. 이 객체는 수정 가능합니다. document 객체는 페이지의 기본 '진입점' 역할을 합니다. document 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있습니다. DOM의 목적은 자바스크립트를 사용해서 페이지 내 모든 요소들을 쉽게 조작(삭제, 추가, 바꾸기, 이벤트 처리, 수정)할 수 있도록 프로그래밍 인터페이스를 제공하는 것입니다. CSS 객체 모델(CSSOM) CSS 객체 모델(CSS Object Model, C..

모듈(Module) 이란? 자바스크립트 코드의 크기가 갈수록 커지고 기능도 복잡해지면서 자바스크립트 커뮤니티는 코드 전체를 기능 단위의 코드 뭉치로 분해하고 필요에 따라 결합할 수 있도록 하는 시스템의 도입을 고민하였습니다. 그 결과 도입된 것이 바로 모듈 시스템(Module System)입니다. 이 때 사용되는 코드 뭉치 각각을 모듈(Module)이라고 합니다. 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 모듈 시스템은 2015년에 표준으로 등재되었습니다. 이 이후로 관련 문법은 진화를 거듭해 이제는 대부분의 주요 브라우저와 Node.js가 모듈 시스템을 지원하고 있습니다. 모듈 활용법 모듈에 특수한 지시자 export와 import를 적용하면 ..

arrayObj.sort(sortFunction) arrayObj는 임의의 Array 객체이며 sortFunction은 요소 순서를 결정하는 데 사용되는 함수이다. sort 함수를 이용하면 문자, 숫자, Object 정렬 등을 수행할 수 있다. 참고로 sort 함수는 원본 배열을 조작하여 정렬시킨다. 정렬된 새로운 배열을 새로 생성하지 않는다. 1. 문자 정렬 const arr = ["fff", "hhh", "aaa", "ccc"]; arr.sort(); console.log(arr); 일반적인 정렬 방식이며, 아스키코드 문자 순서로 정렬된다. 2. 숫자 정렬 위의 문자 정렬과 동일한 방법으로 숫자를 정렬하게 되면 아스키코드 순으로 정렬되므로 우리가 원하는 대로 숫자를 정렬되지 않는다. 그러므로, 숫자를..