자바스크립트

이벤트 선임 Event Delegation

Attribute Property

  • Attribute: HTML 요소. 사용자 인테렉션에 변하지 않음
  • Property: HTML DOM Tree 요소. 사용자 인터렉션에 의해 값이 변함

document Road, DOM Ready

  • ready: DOM Tree가 완료
  • load: css,js,image,iframe들이 메모리에 올라간다음 실행

자바스크립트 객체

  • Built-in Object 자바스크립트 내장 객체
    Global,Object, String, Number, Boolean, Date, Array, Math, RegExp, Error 등
    자바스크립트 엔진이 구동되는 시점에 바로 제공

  • Native Objet 브라우저 내장 객체
    DOM, BOM

  • Host Object 사용자 정의 객체
    사용자가 생성한 객

jsonp

  • GET 요청만 가능
  • 무조건 비동기 처리. async:false 가 되지 않음리
  • JSONP 요청시 Browser UI Thread가 멈춤

프로토타입 Prototype

  • 함수 정의시 같이 생성
  • 해당 참조 타입의 인스턴스가 가져야할 프로퍼티와 메서드를 담고 있는 객체

얕은 복사, 깊은 복사 shallow copy , deep copy

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
34
35
// 배열 deep copy
var array = [1,2,3];
var shallow = array;
var deepArray = Array.prototype.slice.call(array);


// 함수에서 deep copy
var func = function() {
    ...
}
    
var deepFunc = func.bind(this);    
    
    
// 객체에서 deep copy
    
function clone(obj) {
    if (obj === null || typeof(obj) !== 'object') {
		return obj;        
    }
    
    var deepObj = {};
    for (var attr in obj) {
        // prototype에 있는 상속된 객체의 속성도 반복 되기 때문에
        // 해당 객체의 속성만 복사
        if (obj.hasOwnProperty(attr)) {
	    	deepObj[attr] = clone(obj[attr]);                
        }
    }
    
    return deepObj;
}    
    
var obj = {foo: 'boo'};
var deepObj = clone(obj);

유사배열

Array.isArray로 배열 여부 판단

Function arguments, dom select시 []안에 있지만 배열은 아님

그래서 배열 prototype에 있는 forEach같은 메서드를 바로 사용 불가

실행 컨텍스트 Execution Context

스코프 Scope

부동소수점 계산

호이스팅 Hoisting

var 변수 선언은 최상위에 선언된 것과 동일함

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var x = 'outer scope';
(function() {
  console.log(x); // undefined
  var x = 'inner scope';
}());

// 위는 아래와 같은 의미를 가진다.

var x = 'outer scope';
(function() {
  var x;
  console.log(x); // undefined
  x = 'inner scope';
}());
1
2
3
4
5
6
7
foo = 'bar';
var foo;

// 위는 아래와 같은 의미를 가진다.

var foo;
foo = 'bar';
1
2
3
// const, let은 
console.log(x); // throws a ReferenceError
const x = 'hey';

TDZ (Temporal Dead Zone)

함수 Function

함수 끌어 올림 Function Hoisting

  • 함수 선언부를 함수 호출보다 먼저 읽고 실행
  • 함수 표현식은 해당하지 않음

함수 call, apply, bind

  • call(this, 1,2,3) 함수 호출
  • apply(this, [1,2,3]) 함수 호출
  • bind(this): 호출은 하지 않고 컨텍스트 변환된 함수 반환

클로저 Closure

  • 내부함수에서 외부함수의 인자를 접근할 수 있는 것