1. 호출스케일링함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용하면 된다. 자바스크립트는 타이머를 생성할 수 있는 함수와 제거할 수 있는 함수를 제공한다.  타이머 함수는 호스트 객체다 !호스트 객체라는 것은 타이머 함수가 JavaScript 자체에서 제공하는 것이 아니라, JavaScript가 실행되는 환경(브라우저 또는 Node.js)이 제공하는 기능이라는 의미이다.  2. 타이머 함수2-1. setTimeout 두번째 인수로 전달받은 시간으로 단 한 번 동작하는 타이머를 생성-이후 타이머가 만료되면 첫 번째 인수로 전달받은 콜백 함수 호출-생성된 타이머를 식별할 수 있는 고유한 타이머 Id 반환한다. setTimeout 함수가 반환한 ..

1. 이벤트이벤트 (event) : 웹 페이지에서 특정 동작이나 상호작용이 발생했을 때 실행되는 작업을 의미 브라우저는 처리해야할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 예를들어 버튼을 클릭했을 때 함수를 호출하여 처리를 하고 싶다고 가정해보자!이때 브라우저가 버튼 클릭을 감지하여 클릭 이벤트를 발생시킬 수 있다. 특정 버튼 요소에서 클릭 이벤트가 발생하면 특정 함수를 호출하도록 브라우저에게 위임할 수 있다.  Click me!   window.Document.HTMLElment 타입의 객체는 onclick 같이 특정 이벤트에 대응하는 다양한이벤트 핸들러 프로퍼티를 가지고 있다. 해당 이벤트가 발생했을 때 할당한 함수가 브라우저에 의해 호출된다. 2. 이벤트타입2-1. 마우스 이벤..

1. 요소 노드의 텍스트 조작nodeValue : setter, getter 모두 존재하는 접근자 프로퍼티이다. 따라서 nodeValue 프로퍼티는 참조와 할당 모두 가능함 노드 객체의 nodeValue 프로퍼티를 참조하면 노드 객체의 값을 반환함노드 객체의 값 이란 텍스트 노드의 텍스트이다. 따라서 텍스트 노드가 아닌 노드, 즉 문서 노드나 요소 노드의 nodeValue 프로퍼티를 참조하면 null 반환한다.  텍스트 노드의 nodeValue 프로퍼티를 참조할 때만 텍스트 노드의 값, 즉 텍스트를 반환한다.  2. textContentNode.prototype.textContent 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로서 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모..

1. 노드 탐색 요소 노드를 취득한 다음 취득한 요소노드를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모 형제 자식 노드 등을 탐색해야할 때가 있다. 이처럼 DOM 트리상의 노드를 탐색할 수 있게 Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다.  노드 탐색 프로퍼티는 모두 접근자 프로퍼티이다. 단 노드 탐색 프로퍼티는 setter 없이 getter 만 존재하여 참조만 가능한 읽기 전용 접근자 프로퍼티이다. 읽기전용 접근자 프로퍼티에 값을 할당하면 아무런 에러없이 무시된다.   2. 공백 텍스트 노드HTML 요소 사이의 공백(스페이스 키, 탭 키, 엔터 키 등)  은 텍스트 노드를 생성한다.   3. 자식  노드 탐색 Node.prototype.hasChildNodes 메서드를 사용..

1. DOMDOM 브라우저가 이해할 수 있는 자료구조인 노드 객체들로 구성된 트리 자료구조HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리자료구조브라우저 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM 생성함 2. 요소HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다.HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다.이때 HTHML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다.HTML 문서는 HTML 요소들의 집합으로 이루어지며 HTML 요소는 중첩관계를 가지기 때문에 시작 태그와 종료태그(콘텐츠 영역..

1. 스프레드 문법이란? spread 흩뿌리다, 펼치다... 말 그대로 하나로 뭉쳐있는 여러 값들을 펼쳐서 개별적인 값들의 목록으로 만든다는 것이다.스프레드 문법을 사용할 수 있는 대상은 for-of 문으로 순회할 수 있는 이터러블에 한정된다. 즉 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다.  스프레드 문법의 결과는 값이 아니라서 변수에 할당할 수 없다. 따라서 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. (함수 호출문의 인수목록, 배열 리터럴의 요소 목록, 객체 리터럴의 프로퍼티 목록)즉! 이티러블한 객체를 나열하는 것일 뿐, 새로운 값을 생성하는 연산자가 아니다. 1. 함수 호출문의 인수목록에서 사용하는 경우 요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록..

1. 이터레이션 프로토콜-순회 가능한 데이터 컬렉션(자료구조) 를 만들기 위해 ECMASCript 사양에 정의하여 미리 약속한 규칙이다. 순회 가능한 데이터 컬렉션을 통일하여 for - of 문, 스프레드 문법, 배열 할당의 대상으로 사용할 수 있게 일원화했다.  (1) 이터러블 프로토콜for- of 문으로 순회할 수 있으며 스프레드 문법과 배열할당의 대상으로 사용할 수 있다.  (2) 이터레이터 프로토콜이터러블의 Symbol, iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터 반환함next 메서드를 소유하며 value done 프로터리를 갖는 이터레이터 리절트 객체 반환 2. 이터러블이란 ?이터러블 프로토콜을 준수한 객체-Symbol.iterator 을 프로퍼티 키로 사용한 메서..

1. 심벌이란? 일반적으로 심볼 타입은 객체의 프로퍼티 키를 고유하게 설정함으로써 프로퍼티 키의 충돌을 방지하기 위해 사용된다.ES6에서 도입된 7번째 데이터타입-변경 불가능한 원시 타입의 값-다른 값과 중복되지 않은 유일무이한 값이다-주로 이름의 충돌 위험이 없는 유일한 프로퍼티 값을 만들기 위해 사용한다.2. 생성은 어떻게 하지? -> Symbol 함수를 호출하여 생성한다. 이때 매번 고유한 객체가 생성이 된다. const sym1 = Symbol('test');const sym2 = Symbol('test');console.log(sym1 === sym2); // false 이렇게만 보면... 생성자 함수로 객체를 생성하는 것처럼 보이지만 다른 생성자 함수와 달리 new 연산자와 함께 호출하지 않는..

1. Date 생성자 함수자바스트립트에서 날짜를 생성하는 방법은 두가지다. 첫 번째는 Date() 함수만 호출하는 방법, 두 번째는 new Date() 로 호출하는 방법이다.Date() 로 생성한 날짜는 문자열을 반환하고, new Date()로 생성한 경우 새로운 Date 객체를 반환한다.즉 Date()함수로 호출한 값은 String이라 replace, length 같은 String 메서드만 사용할 수 있다. new Date() 생성자로 호출한 경우 새로운 getDate(), getDay() 와 같은 메서드를 사용할 수있다.  생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 가진다. 기본적으로는 현재 날짜와 시간을 나타내는 정수값을 가지는데 현재 날짜와 시간이 아닌 다른 ..

Math 는 생성자 함수가 아니기 때문에 정적 프로퍼티와 정적 메서드만 제공한다. Math 객체는 생성자 함수가 아니기 때문에 new 키워드를 통해 인스턴스를 생성할 수 없는 객체이며, 인스턴스를 통해 접근하는 메서드나 속성 없이 클래스 자체에 속하는 정적(static) 프로퍼티와 메서드만 가진다⏭️ Math의 함수와 값들은 Math 자체에서만 접근할 수 있다. 1. Math 프로퍼티Math.PI : 원주율 값을 반환Math.PI; //3.145.. 2. Math.메서드 Math.abs : 절대값 반환 Math.ceil : 소수점 이하를 올림한 정수 반환 Math.floor: 소수점 이하를 내림한 정수 반환Math.sqrt : 인수로 전달된 숫자의 제곱근 반환Math.max: 전달받은 인수 중 가장 큰..