• 타이머 함수들은 모두 window의 메소드
• 모두 일정 시간이 경과된 이후 콜백 함수를 호출하는 타이머를 설정
• 비동기적 (asynchronous)으로 동작한다. ( 싱글 스레드로 동작하기 때문)
• ECMAScript 표준사양은 아니나 브라우저, Node,js환경에서 모두 제공한다.

setTimeout / clearTimeout

setTimeout 함수는 두번째 인수로 전달한 시간이 경과한 이후에 첫번째 인수로 전달한 콜백 함수를 단 한번 호출한다.

1
2
3
4
5
6
7
8
9
10
11

// 1초 후에 첫번째 인수로 전달한 함수 호출
setTImeout(() => console.log('Hi'), 1000);
// 1초 후에 첫번째 인수로 전달한 함수에 인수를 전달하면서 호출
setTImeout(name => console.log(`Hi ${name}.`) 1000, 'jung');
// 지연 시간을 생략하면 기본값이 0 지정
setTImeout(() => console.log('Hi'));


const Timeout = setTimeout(() => console.log('Hi'), 1000);
clearTimeout(Timeout);
// 타이머 취소

setInterval / clearInterval

setInterval 함수는 두번째 인수로 전달한 시간이 경과할 때 마다 첫번째 인수로 전달한 콜백 함수를 타이머가 취소될 때까지 호출한다.

1
2
3
4
5
6

let count = 1;
const timeOutId = setInterval(() => {
  console.log(count);   

  if (count++ === 5) clerarInterval(timeOutId);
}, 1000);

Id로 요소 노드 취득

• Document.prototype.getElementById 메소드는 인수로 전달한 id어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환한다.
• getElementByid 메소드는 Document.prototype의 프로퍼티이다.
• 반드시 문서 노드 document를 통해 호출해야 한다.
• 문서 내에 중복된 id 값이 있을 경우, 첫번째 하나의 요소 노드만을 반환한다.
• 인수로 전달된 id 값을 갖는 요소가 존재하지 않으면, null을 반환한다.
• id 값과 동일한 이름의 전역 변수가 선언되어 있으면 노드 객체가 재할당되지 않는다.

태그 이름으로 요소 노트 취득

Document.prototype/Element.prototype.getElementsByTagName 메소드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다.

• getElementsByTagName 메소드는 여러개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
• 인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우, getElementsByTagName 메소드는 빈 HTMLCollection 객체를 반환한다.

class로 요소 노드 취득

• Document.prototype/Element.prototype.getElementsByClassName 메소드는 인수로 전달한 class 어트리뷰트 값을 갖는 모든 요소 노드들을 탐색하여 반환한다.
• 인수로 전달할 class 값은 공백으로 구분하여 여러 개의 class를 지정할 수 있다.
• 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
• 인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우, getElementsByClassName 메소드는 빈 HTMLCollection 객체를 반환한다.

CSS 선택자로 요소 노드 취득

스타일을 적용하고자 하는 HTML 요소를 특정할 때 사용하는 문법이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

* { ... }                   /* 전체 선택자: 모든 요소를 선택 */
p { ... }                   /* 태그 선택자: 모든 p 태그 요소를 모두 선택 */
#foo { ... }                /* id 선택자: id 값이 foo인 요소 모두*/    
.foo { ... }                /* class선택자: class값이 foo인 요소 모두*/

input[type=text] { ... }    
/* 어트리뷰트 선택자: input 요소중에 type 어트리뷰트 값이 text 요소 모두 */
div p { ... }
/* 후손 선택자: div 요소의 후손 요소 중 p 요소 모두*/
div > p { ... }
/* 자식 선택자: div 요소의 자식 요소 중 p 요소 모두*/
p + ul { ... }
/* 인접 형제 선택자: p 요소의 형제 요소중에 p 요소 바로 뒤에 위치하는 ul 요소*/
p ~ ul { ... }
/* 일반 형제 선택자: p 요소의 형제 요소중에 p 요소 뒤에 위치하는 ul 요소 모두*/
a: hover { ... }
/* 가상 클래스 선택자: hover 상태인 a 요소 모두*/

• Document.prototype/Element.prototype.querySelector 메소드는 인수로 전달한 CSS 선택자를 만족시키는 하나의 요소 노드를 탐색하여 반환한다.

• 인수로 전달한 CSS선택자를 만족시키는 요소 노드가 여러개인 경우, 첫번째 요소 노드만 반환

• 존재하지 않으면 null 반환

• Document.prototype/Element.prototype.querySelectorAll 메소드는 인수로 전달한 CSS 선택자를 만족시키는 모든 요소 노드를 탐색하여 반환한다.

• querySelectorAll 메소드는 여러 개의 요소 노드 객체를 갖는 DOM컬렉션 객체인 NodeList 객체를 반환한다.

• 요소가 존재하지 않는 경우, 빈 NodeList 객체를 반환한다.

• CSS 선택자가 문법에 맞지 않은 경우, DOMException 에러가 발생한다.

탐색 가능 여부 확인

• Element.prototype.matches 메소드는 인수로 전달된 선택자에 의해 특정 노드를 탐색 가능한지 확인한다.
• 이벤트 위임을 사용할 경우 유용하다.

HTMLCollection 과 NodeList

• HTMLCollection과 NodeList는 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체이다. (유사배열 객체이자 이터러블이다)
  for… of 문으로 순회가능하고, 스프레드 문법을 사용하여 간단한 배열로 변환할 수 있다.
• 노드 객체의 상태변화를 실시간으로 반영하는 살아있는 객체.
  • HTMLCollection 언제나 live 객체로 동작한다.
  • NodeList 과거의 정적 상태를 유지하는 non-live객체로 동작하지만 경우에 따라 live 객체로 동작하기도 한다.
• 노드 객체의 상태 변경과 상관없이 안전하게 DOM컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용해야한다.
  • HTMLCollection - forEach, map, filter, reduce
  • NodeList - forEach, item, entries, keys, values

노드 탐색

• DOM트리 상의 노드를 탐색할 수 있도록 Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다.

• 노드 탐색 프로퍼티는 모두 접근자 프로퍼티이다.

  자식 노드 존재 확인

  • Node.prototype.hasChildNodes 불리언값 반환

디스트럭처링 할당(Destructuring assignment, 구조 분해 할당)

디스트럭처링 할당은 구조화된 배열 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것
배열, 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당할 때 유용하다.

1. 배열 디스트럭처링 할당

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// ES5
var arr = [1, 2, 3];

var one = arr[0];
var two = arr[1];
var three = arr[2];

console.log(one, two, three); // 1  2  3
//
// ES6
const arr = [1, 2, 3];
const [one, two, three] = arr;
// 배열 arr을 디스트럭처링하여 할당
// 할당 기준은 배열의 index
console.log(one, two, three);  1  2  3
//
//
// 할당을 위해서는 할당 연산자 왼쪽에 값을 할당 받을 변수를 선언(배열 리터럴)
let x, y;
[x, y] = [1, 2];
// const [x, y] = [1, 2];  위 아래문은 동치
//
// 여러 개의 변수를 배열 형태로 선언하면 반드시 우변에 배열을 할당해야한다
const [x, y];
// SyntaxError: Missing initializer in destructuring declaration
//
// 변수에 기본값을 설정할 수 있다.
let x, y , z;

[x, y, z = 3] = [1, 2];
console.log(x, y, z);  // 1  2  3
[x, y = 10, z = 3] = [1, 2];
console.log(x, y, z);  // 1  2  3

스프레드 문법 (Spread syntax, 전개문법)

ES6에서 새롭게 도입된 문법 …은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록을 만든다.

Array, String, Map, Set, Dom 컬렉션(NodeList, HTMLCollection), Arguments와 같이 for…in문으로 순회할 수 있는 이터러블에 한정된다.

1
2
3
4
5

console.log(...[1, 2, 3])  // 1 2 3
console.log(...'young');   // y o u n g

console.log(... { a: 1, b: 2});  
// TypeError: Found non-callable @@iterator

• 스프레드 문법의 결과는 값이 아니라 값들의 목록이다.
• 값이 아니라 변수에 할당할 수 없다.
• 연산하여 값을 생성하는 연산자도 아니다.
• 결과물은 단도그로 사용할 수 없다.
• 쉼표로 구분한 값의 목록을 사용하는 문에서 사용된다.
  • 함수 호출문의 인수 목록
  • 배열 리터럴의 요소 목록
  • 객체 리터럴의 프로퍼티 목록 (Stage 4)

1. 함수 호출문의 인수 목록에서 사용하는 경우

• Math.max 메소드에 숫자가 아닌 배열을 인수로 전달하면 최대값을 구할 수 없다 (NaN)
• 이를 위해 Function.prototype.apply 사용
• 위 메소드보다 스프레드 문법이 간결하고 가독성이 좋다.

  1 2 3

  const arr = [1, 2, 3]; const maxValue = Math.max(...arr); console.log(maxValue); //3

• Rest 파라미터와 혼동 주의
  • Rest 파라미터 - 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 매개 변수 이름 앞에 …
  • 스프레드 문법 - 배열같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만드는 것

9. 배열 고차 함수

고차 함수(Higher-Order-Function, HOF)는 함수를 인자로 전달받거나 함수를 반환하는 함수를 말한다.

9.1 Array.prototype.sort

• 배열의 요소를 적절하게 정렬한다.

• 원본 배열을 직접 변경한다.

• 기본적으로 오름차순(ascending)으로 요소를 정렬한다.

• 내림차순은 먼저 오름차순으로 정렬 후 순서를 뒤집는다.

  1 2 3 4 5

  const fruits = ['바나나', '오렌지', '사과']; fruits.sort(); console.log(fruits); //['바나나', '사과', '오렌지'] fruits.reverse(); // 내림차순(descending) console.log(fruits); // ['오렌지', '사과', '바나나']

• 문자열 정렬은 문제가 없으나 숫자 요소들을 정렬할 떄 문제 발생

• 배열의 요소를 일시적으로 문자열로 변환한 후 정렬한다. (Unicode 코드 포인트 순서)

• 정렬 순서를 정의하는 비교 함수를 인수로 전달해야한다.

  1 2 3 4 5 6 7 8

  const points = [40, 100, 5, 1, 3, 28] points.sort(function (a, b) { return a - b; }); // points.sort((a, b) => a - b); console.log(points); // [1 , 3, 5, 28, 40, 100] // // points.sort(function (a, b) { return b - a; }); //내림차순 // points.sort((a, b) => b - a);

배열

1. 배열이란?

• 배열은 여러 개의 값을 순차적으로 나열한 자료 구조이다.
• 배열이 가지고 있는 값을 요소(element)라 한다.
• 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 된다.
• 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 index를 갖는다. 이를 통해 요소에 접근할 수 있다.
• 배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다.
• 배열 리터럴 또는 Array 생성자 함수로 생성할 수 있다.
  배열의 생성자 함수는 Array이며 배열의 프로토타입 객체는 Array.prototype. -> 배열을 위한 빌트인 메소드 들을 제공한다.
• 배열은 객체이다. 일반 객체와는 다른 특징

2. 자바스크립트의 배열

희소 배열(sparse array) (자바스크립트)
배열의 요소가 연속적으로 이어져 있지 않는 배열

밀집 배열 (Dense array)

• 일반적인 배열로 하나의 타입으로 통일되어 있으면서 서로 연속적으로 인접해 있다.

• 매우 효율적이며 고속으로 동작한다.

• 배열에 요소를 삽입하거나 삭제하는 경우, 배열 요소를 연속적으로 유지하기 위해 요소를 이동시켜야 하는 단점

• 자바스크립트는 일반적인 배열의 동작을 흉내낸 특수한 객체이다.

• 인덱스를 프로퍼티 키로 갖으며 length 프로퍼티를 갖는 특수한 객체이다.

• 어떤 타입의 값이라도 배열의 요소가 될 수 있다.

• 해시 테이블로 구현된 객체이므로 인덱스로 배열 요소에 접근하는 경우, 일반적인 배열보다 성능적인 면에서 느릴수 밖에 없는 구조적 단점

• 특정 요소를 탐색하거나 추가, 삭제하는 경우에는 일반적인 배열보다 빠른 성능

ES6 함수의 추가 기능

1. 함수의 구분

• ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있다.

• ES6 이전의 함수는 callable이며 constructor 이다.

  • callable - 호출할 수 있는 함수 객체
  • constructor - 인스턴스를 생성할 수 있는 함수 객체
  • non-constructor - 인스턴스를 생성할 수 없는 함수 객체

    1 2 3 4 5 6 7 8 9 10 11 12 13

    var foo = function () { return 1; }; // 일반적인 함수로서 호출 foo (); // 1 // 생성자 함수로서 호출 new foo (); // foo {} // 메소드로서 호출 var obj = { a: foo }; obj.a(); // 1

• 일반적으로 메소드라고 부르는 객체에 바인딩된 함수도 callable이며 constructor이다.

• 객체에 바인딩된 함수도 일반 함수, 생성자 함수로서 호출할 수도 있다.

• 바인딩된 함수가 constructor면 prototype 프로퍼티에 바인딩된 프로토타입 객체를 생성한다는 것을 의미

  1 2 3 4 5 6 7 8 9 10 11 12 13

  var obj = { x: 10; f: function () { return this.x; } }; //프로퍼티 f에 할당된 함수를 메소드로서 호출 console.log(obj.f()); // 10 //프로퍼티 f에 할당된 함수를 일반 함수로서 호출 var bar = obj.f; console.log(bar()); // undifined //프로퍼티 f에 할당된 함수를 생성자 함수로서 호출 console.log(new obj.f()); // f {}

클래스

클래스는 class 키워드를 사용하여 정의한다.
클래스 이름은 생성자 함수와 마찬가지로 파스칼 케이스를 사용하는 것이 일반적이다.
파스칼 케이스를 사용하지 않아도 에러가 발생하지 않는다.

클래스 vs 생성자 함수 (생성자함수의 경우)

• 클래스는 new 연산자를 사용하지 않고 호출하면 에러가 발생한다. (일반함수로서 호출)
• 상속을 지원하는 extends, super 키워드를 제공한다
• 호이스팅이 발생하지 않는 것처럼 동작한다. (함수 선언문으로 정의되면 함수 호이스팅 발생)
• 모든 코드는 암묵적으로 strict 모드가 지정, 해지 불가 (strict모드 지정안됌)
• 클래스의 constructor, 프로토타입 메소드, 정적 메소드는 모두 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false이다. 열거되지 않는다.

1. 클래스의 정의

• class 키워드를 사용하여 정의한다.

• 클래스 이름은 파스칼 케이스로, 물론 사용하지 않아도 에러 발생 없음

• 일반적이지는 않지만, 표현식으로 클래스를 정의할 수도 있다. (익명, 기명)

• 클래스는 일급 객체이다 (클래스 = 함수 = 객체)

• 클래스 몸체에는 0개 이상의 메소드만을 선언할 수 있다. constructor, 프로토타입 메소드, 정적 메소드 3가지

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  class Person { //클래스 선언문 constructor(name) { // 생성자 constructor this.name = name; } sayHi() { //프로토타입 메소드 console.log(`Hi! ${this.name}`); } static sayHello() { //정적 메소드 console.log('hello'); } } const me = new Person('jung'); //인스턴스 생성 console.log(me.name); // jung me.sayHi(); // Hi! jung Person.sayHello(); //hello

클로저(closure)

클로저는 자바스크립트 고유의 개념이 아니므로 ECMAScript 사양에 클로저의 정의가 등장하지 않는다.
클로저는 함수와 그 함수가 선언된 렉시컬 환경(Lexical environment)과의 조합이다.

1. 렉시컬 스코프

자바스크립트는 함수를 어디서 호출했는지가 아니라 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프라)라한다.

렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다.

1
2
3
4
5
6
7
8
9
10
11
12
13

const x = 1;

function foo() {
  const x = 10;
  bar ();
}

function bar() {
  console.log(x);
}

foo();  //  1
bar();  //  1

• foo, bar 함수는 모두 전역에서 정의된 전역 함수
• 두 함수의 상위 스코프는 전역이다.
• 스코프의 실체는 실행 컨텍스트의 렉시컬 환경이다.
• 렉시컬 환경은 자신의 외부 렉시컬 환경에 대한 참조(Outer Lexical Environment Reference)를 통해 상위 렉시컬 환경과 연결된다. 이것이 스코프 체인
• 함수의 상위 스코프를 결정한다? -> 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값을 결정한다.

실행 컨텍스트

식별자, 호이스팅, 클로저 등의 동작 원리를 담고 있는 자바스크립트 핵심 개념

1. 소스코드의 타입

전역코드

• 전역에 존재하는 소스코드. 전역에 정의된 함수 클래스등의 내부 코드는 포함되지 않는다.
• 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다.
• 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다

함수코드

• 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부코드는 포함되지 않는다.
• 지역 스코프를 생성하고 지역 변수와 매개 변수를 관리해야 한다.
• 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결해야 한다.
• 함수 코드가 실행되면 함수 실행 컨텍스트가 생성된다.

eval코드

• 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스 코드를 말한다.
• 엄격모드(strict mode)에서 자신만의 독자적인 스코프를 생성한다.
• eval 코드가 평가되면 eval 실행 컨텍스트가 생성된다.

모듈코드

• 모듈 내부에 존재하는 소스코드. 모듈 내부의 함수 클래스 등의 내부코드는 포함되지 않는다.
• 모듈 별로 독립적인 스코프를 생성한다.
• 모듈 코드가 평가되면 모듈 실행 컨텍스트가 생성된다.

4가지 타입으로 구분하는 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이다.