💡 DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 01. 노드 1. HTML 요소와 노드 객체 HTML 요소(element)는 HTML 문서를 구성하는 개별적인 요소이며 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 Node 객체로 변환된다. HTML 문서는 HTML 요소들의 집합으로 이뤄지며, 요소와의 중첩 관계에 의해 계층적인 parent-child(부자) 관계가 형성된다. HTML 요소 간의 관계를 반영하여 HTML 요소를 개체화한 모든 노드 객체들을 트리 자료구조로 구성한다. 💡 노드 객체들로 구성된 트리 자료구조를 DOM 또는 DOM Tree 라고 한다. 2. ..
01. Set 🔹Set 객체는 중복되지 않는 유일한 값들의 집합이다. 🔹 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X ➡️ 수학적 집합의 특성과 일치한다. ➡️ Set은 수학적 집합을 구현하기 위한 자료구조다. (교집합, 합집합, 차집합, 여집합 구현 가능) 1. Set 객체의 생성 💡 Set 객체는 Set 생성자 함수로 생성한다. 🔹 Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set(); console.log(set); // Set(0) {} 💡 Set 생성자 함수는 이터러블을 인수로 전달받아 Set ..
💡 디스트럭처링 할당(구조 분해 할당) 은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 🔹 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 01. 배열 디스트럭처링 할당 💡 ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여, 1개 이상의 변수에 할당 🔹 배열 디스트럭처링 할당의 대상은 이터러블이어야 하고, 할당 기준은 배열의 인덱스다. // ES5 var arr = [1, 2, 3] var one = arr[0] var two = arr[1] var three = arr[2] // ES6 const [one, two, three] = a..
💡 ES6에서 도입된 스프레드 문법 ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(spread) 개별적인 값들의 목록으로 만든다. 🔹 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션, arguments 와 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다. 💡 스프레드 문법의 결과물은 값으로 사용할 수 X, 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용 가능 🔹 함수 호출문의 인수 목록 🔹 배열 리터럴의 요소 목록 🔹 객체 리터럴의 프로퍼티 목록 01. 함수 호출문의 인수 목록에서 사용하는 경우 예제 35-06 에는 apply 메소드를 활용하여 Max 값을 구한 경우이고, 예제 35-07 에는 스프레드 문법을 사용하여 구한 경..
01. 이터레이션 프로토콜 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다. 1. 이터러블 🔹 Symbol.iterator을 프로퍼티 키로 사용한 메서드를 직접 구현하거나, 프로토타입 체인을 통해 상속받은 객체를 말한다. 🔹 일반 객체는 이터러블 프로토콜을 준수한 이터러블이 아니다. 2. 이터레이터 🔹 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜..
01. 심벌이란? 💡 문자열, 숫자, 불리언, undefineds, null, 객체 타입의 6개의 타입을 잇는 ES6에 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 💡 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 02. 심벌 값의 생성 1. Symbol 함수 🔹 다른 타입과 다르게, Symbol 함수를 호출하여 생성해야 한다. 🔹 다른 값과 절대 중복되지 않으며, 암묵적으로 문자열이나 숫자 타입으로 변환되지 않는다. // Symbol 값에 대한 설명이 같더라도 유일무이한 값을 생성한다. const mySymbol1 = Symbol('mySymbol'); const mySymbol2 = Symbol('mySymbol'); console.log(mySymbol1..
01. String 생성자 함수 🔹 String 객체는 생성자 함수이므로, new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있음 🔹 String 생성자 함수에 인수를 전달하지 않고, new 연산자와 함께 호출하면 -> [[StringData]] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성 🔹String 생성자 함수의 인수로 문자열 전달하면서 new 연산자와 함께 호출하면 -> [[StringData]] 내부 슬롯에 인수로 전달받은 문자열을 할당한 String 래퍼 객체를 생성 🔹 String 래퍼 객체는 배열과 유사하게 인덱스를 사용하여 각 문자에 접근할 수 있다. 🔹 단, 문자열은 원시 값이므로 변경할 수 없다.(배열과의 차이점) 🔹 String 생성자 함수의 인수로 ..
01. 정규 표현식이란? 🔹 일정한 패턴을 가진 문자열의 집한을 표현하기 위해 사용하는 형식 언어 🔹 문자열을 대상으로 패턴 매칭 기능 제공(특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능) 🔹 반복분과 조건문 없이 패턴을 정의하고 테스트하는 것으로 체크할 수 있음 ⚠️ 주석이나 공백 허용하지 않고 여러가지 기호 혼합 -> 가독성 좋지 않음 02. 정규 표현식의 생성 정규 표현식 객체를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다. ➡️ 정규 표현식 리터럴은 패턴과 플래그로 구성된다. 🖥️ 예제 const target = 'Is this all there is?' // 패턴: is // 플래그: i => 대소분자 구별하지 않고 검색한다. co..
표준 빌트인 객체로, 날짜와 시간을 위한 메서드를 제공한다. 01. Date 생성자 함수 💡 Date 객체는 내부적으로 정수값을 갖는데, 1970년 1월 1일 00:00:00(UTC)을 기점으로 Date 객체가 나타내는 날짜와 시간까지의 밀리초를 나타낸다. 💡 다음은 Date 생성자 함수로 객체를 생성하는 방법 4가지 1. new Date() 🔹 인수 없이 new 연산자와 함께 호출 -> 현재 날짜와 시간을 가지는 Date 객체 반환 🔹 new 연산자 없이 호출 -> Date 객체를 반환하지 않고, 날짜와 시간 정보를 나타내는 문자열 반환 2. new Date(milliseconds) 🔹 밀리초를 인수로 전달 -> 기준 시점(1970년 1월 1일 00:00:00)으로부터 전달된 밀리초만큼 경과한 날짜와 ..
💡 수학적인 상수와 함수를 위한 프로퍼티와 메서드를 제공하는 표준 빌트인 객체 💡 생성자 함수가 아니며, 정적 프로퍼티 및 정적 메서드만 제공 01. Math 프로퍼티 1. Math.PI 🔹 원주율 PI 값 반환 02. Math 메서드 1. Math.abs 🔹 인수로 전달된 숫자의 절대값 반환 2. Math.round 🔹 인수로 전달된 숫자의 소수점 이하를 반올림한 정수 반환 3. Math.ceil 🔹 인수로 전달된 숫자의 소수점 이하를 올림한 정수 반환 4. Math.floor 🔹 인수로 전달된 숫자의 소수점 이하를 내림한 정수 반환 5. Math.sqrt 🔹 인수로 전달된 숫자의 제곱근 반환 6. Math.random 🔹 임의의 난수 반환 (0에서 1 미만의 실수) 7. Math.pow 🔹 첫 번째 ..
