12. 12
Copyright blog.xcoda.net
3.ES5 & ES6ES5 Object
객체 생성 및 상속
Object.create( parent, propDesc )
지정한 객체를 상속받는 객체 생성
property descriptor를 지정
function Person(name, age){
this.name = name;
}
Person.prototype.getName = function(){
return this.name;
}
var parent = new Person('lee');
var child = Object.create(parent, {'age': {
value :27
}
});
child.getName(); // 'lee'
child.age; // 27
13. 13
Copyright blog.xcoda.net
3.ES5 & ES6ES5 Object
객체 생성 및 상속
Object.create( parent, propDesc )
구현 사례
Object.create = function( proto, props ) {
var ctor = function( ps ) {
if ( ps )
Object.defineProperties( this, ps );
};
ctor.prototype = proto;
return new ctor( props );
};
14. 14
Copyright blog.xcoda.net
3.ES5 & ES6ES5 Object
객체 속성 조사
Object.keys( obj ) :
enumarable 속성을 배열로 반환
Object.getOwnPropertyNames( obj ) :
직접 소유한 속성을 배열로 반환
Object.getOwnPropertyDescriptor( obj , 'prop name') :
지정한 속성에 대한 descriptor를 반환
var obj = {name: 'lee', age : 27};
Object.defineProperty(obj, 'addr', {
value:'seoul', enumarable:false
});
Object.keys(obj); // [name, age]
Object.getOwnPropertyNames(obj); //[name, age, addr]
15. 15
Copyright blog.xcoda.net
3.ES5 & ES6ES5 Object
객체 관련 기타 사항
마지막 콤마(,) 허용
JSON 객체의 마지막 속성
배열 요소의 마지막 요소
예약어(key word)를 속성으로 사용 가능
var obj = {name: 'lee', age : 27, };
var array = [1,2,3,4,5,]
obj.if = 'interface';
obj.var = 4
29. 29
Copyright blog.xcoda.net
3.ES5 & ES6ES5 기타
Function
.bind(thisArg [ , arg1, arg2...]);
함수 호출에 사용할 this 객체를 지정하여 새로운 함수 반환
call()/applay()는 호출할 때 마다 지정
var obj = {name: 'lee'};
function f(){
return this.name;
}
f(); // undefined
var obj_f = f.bind(obj);
obj_f(); // 'lee'
30. 30
Copyright blog.xcoda.net
3.ES5 & ES6ES5 기타
Date
new Date( ISOString),
.toISOString()
.now()
JSON
JSON.parse()
JSON.stringify()
31. 31
Copyright blog.xcoda.net
3.ES5 & ES6ES5 기타
Strict Mode
ECMAScript 3 기능 중 Deprecated 된 것을 사용할 수 없게 한다.
정의되지 않은 변수에 할당 불가
객체 Property의 변경 불가(아래의 경우)
writable=false , 수정 불가
configurable= false, 삭제 불가
extensible=false, 추가 불가
Eval
eval을 ID로 사용 불가
eval() 함수 내에서 변수 선언 불가
Function
arguments 객체에 할당 불가
arguments.callee 사용 불가
arguments.caller 사용 불가
with(){} 구문 사용 불가
<script type="text/javascript>
"use strict"
...
//or
function imStrict(){
"use strict"
// code here....
}
33. 33
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
변수 선언
let
block scope 변수 선언
재정의 불가
var은 funciton scope 변수 선언
var a = 1;
var a = 10; // OK
console.log(a); // 10
let b = 1;
let b = 10; // Error
function f(){
var x = 10;
let y = 20;
}
console.log(x); // 10
console.log(y); // Error, not defined
34. 34
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
변수 선언
const
상수 선언
값의 재할당 금지
let 과 동일한 scope 정책
객체 참조의 경우 객체 자체는 가변(C 언어와 차이)
const V = 10;
V = 20; // Error
const OBJ = { name : 'lee'};
OBJ.name = 'kim'; // OK
OBJ = {name:'kim'}; // Error
35. 35
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Default Parameter
함수의 매개변수에 기본 값 지정
undefined 값의 전달 기본 값 적용
old style
ES6 style
function f(x, y, z){
x = x || 1;
y = y || 2;
z = z || 3;
console.log(x, y, z);
}
f(10, 20); // 10, 20, 3
function f(x = 1, y = 2, z = 3){
console.log(x, y, z);
}
f(10, 20); // 10, 20, 3
36. 36
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Spread Operator(펼침 연산자) : ...arg
배열과 같은 Iterable 객체의 요소
함수에 전달 할때 개별 항으로 취급
old style
ES6 style
function f(a, b){
return a + b;
}
var array = [2, 3];
f(array[0], array[1]); // 5
f.apply(null, array);//5
function f(a, b){
return a + b;
}
var array = [2, 3];
f(...array);//5
37. 37
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Spread Operator(펼침 연산자) : ...arg
부분 배열
배열 합치기
let array1 = [1,2,3];
let array2 = [0, ...array1, 4,5,6,] // [0, 1,2,3,4,5,6]
let array1 = [1,2,3];
let array2 = [4,5];
array1.push(...array2); // [1,2,3,4,5]
38. 38
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Rest Operator(나머지 연산자) : ...arg
함수 선언부의 마지막 파라미터에 "..." 작성
지정된 파리미터 이외의 값을 배열형식으로 전달
function f(a, b, ...args){
console.log(args);
}
f(1,2,3,4,5); //[3,4,5]
39. 39
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Destructuring Assignment(해체 할당)
Iterable/Object 각각의 요소/속성을 여러 변수에 한번에 할당
배열 해체 할당
var array = [1,2,3];
var a = array[0];
var b = array[1];
var c = array[2];
var x,y,z;
[x,y,z] = array;// x:1, y:2, z :3
var [aa, bb, cc] = array;// aa:1, bb:2, cc:3
40. 40
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Destructuring Assignment(해체 할당)
값 건너 뛰기
나머지 연산자
기본값 할당
파라미터로 해체 할당
let [a, , b] = [1,2,3]; // a:1, b:3
let [a, ...b] = [1,2,3,4,5]; //a:1, b:[2,3,4,5]
let [a, b, c = 3] = [1,2]; // a:1, b:2, c:3
function f([a,b,c=3] = [1,2,3]){ ... };
f(undefined);
41. 41
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Destructuring Assignment(해체 할당)
객체 해체 할당
객체 프로퍼티를 각각의 개별 변수에 할당
프로퍼티와 변수의 이름을 갖게
var obj = {name:'lee', age:27};
var name, age;
({name, age} = obj);
console.log(name, age); // 'lee', 27
var a, b;
({name:a, age:b} = obj);
console.log(a, b); // 'lee', 27
var {name:x, age:y} = obj;
console.log(x, y); //'lee', 27
42. 42
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Arrow Function
람다 식, 익명 함수
(parameter)=>{ ... body...}
함수 body의 문이 한줄 이면 return 과 {} 생략 가능
파라미터가 1개 이면 () 생략 가능
파라미터 없으면 () 생략 불가
(param1, param2, ..., paramN) => { statements }
(param1, param2, ..., paramN) => expression
(singleParam) => { statements }
singleparam => { statements }
() => { statements }
var plus = (a,b)=>{ return a+b};
plus(1, 2); //3
var plus = (a, b)=> a+b;
plus(3, 4); // 7
43. 43
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Arrow Function
Lexical this
일반 함수와 같이 this 사용 불가
바깥 함수의 this를 사용
var obj = { name: 'lee', getName: function(){ return this.name;}};
obj.getName(); // 'lee'
var obj2 = {name: 'lee', getName: ()=>this.name};
obj2.getName(); //undefined
var obj3 = {name:'lee', getName:function(){
return (()=>this.name)();
}}
obj3.getName(); // 'lee'
44. 44
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Arrow Function
Lexical this
일반 함수와 같이 this 사용 불가
바깥 함수의 this를 사용
생성자 사용 불가(new 사용 불가)
var obj = { name: 'lee', getName: function(){ return this.name;}};
obj.getName(); // 'lee'
var obj2 = {name: 'lee', getName: ()=>this.name};
obj2.getName(); //undefined
var obj3 = {name:'lee', getName:function(){
return (()=>this.name)();
}}
obj3.getName(); // 'lee'
var arrow = () => 'hello';
new arrow(); // Error
45. 45
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Object literal
편리한 프로퍼티 값 할당
편리한 메서드 정의
computed property name(조합 프로퍼티명)
var name = 'lee', age = 27;
var obj = {name, age};
var obj = {
hello(){
console.log('hello world');
}
};
obj.hello(); // 'hello world'
var obj = { ['last' + 'name'] : 'lee'};
obj.lastname; // 'lee';
obj['last' + 'name']; //'lee'
51. 51
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
String
.repeat(times) : 지정한 횟수 만큼 연결
includes(string[, index]) : 지정한 문자열 포함 여부
startsWith(str[, index]), endsWith(str[, index])
console.log('z'.repeat(6));//zzzzzz
var s = 'hello world';
s.includes('hello'); //true
var s = 'hello world';
s.includes('hello'); //true
52. 52
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
String
template 문자열
역 따옴표(`)
place holder : ${}
multi line string
tagged template
var name = 'Lee', age = 27;
var template = `Hello! my name is ${name}, ${age} years old`;
console.log(template);// 'Hello! my name is Lee, 27 years old'
function tag(strings, ...values){
console.log(strings);
console.log(values);
return strings[0] + strings[1] + (values[0] + values[1]);
}
var a=10, b=20;
var temp = tag `hello ${a} world ${b}`; // 'hello world 30'
54. 54
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
Array
Array.of(element0 [, element n]);
주어진 요소로 배열 생성
new Array()와 차이
.fill(value [, start=0 [, end = length]])
지정된 값으로 배열을 채운다.
new Array(5); //[ ,,,,], length:5
Array.of(5); // [5], length:1
Array.of(1,2,3); //[1,2,3], length:3
[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
55. 55
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
Array
.find(callback, thisArg)
callback을 만족하는 요소 반환
callback(value, index, array)
.findIndex(callback, thisArg)
find와 동일, 값이 아닌 index 반환
var people = [
{name:'lee', age:27},
{name:'kim', age:23},
{name:'park', age:30}
];
people.find(function(val, idx, arr){
return val.name = 'kim';
}); //{ name: 'kim', age: 27 }
56. 56
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
Array
.copyWithin(target, start[, end = this.length)
배열 내 요소를 다른 위치에 복사
entries(), keys(), values()
배열을 iterable 객체로 반환
[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]
var entries = [1,2,3].entries();
console.log(...entries); //[0, 1] [1, 2] [2, 3]
var keys = [1,2,3].keys(); // 0 1 2
console.log(...keys);
var values = [1,2,3].values();
console.log(values); // 1 2 3
57. 57
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
ArrayBuffer
new ArrayBuffer(length) , length : byte
고정 길이 binary data
1Byte 데이타 블록 하나가 원소
Typed Array 또는 DataView를 이용
DataView(buffer [, byteOffset [, byteLength]])
ArrayBuffer에 숫자를 읽고 쓰기 위한 인터페이스
setXXX(offset, value, bigEndian), getXXX(offset, bigEndian);
set/getInt8, set/getUint8, set/getInt16, set/getUint16
set/getInt32, set/getUint32, set/getFloat32, set/getFloat64
let buff = new ArrayBuffer(80);
let view = DataView(buff);
view.setInt32(8, 22, false);
var number = view.getInt32(8, false);
console.log(number);//22
58. 58
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
Typed Array
DataView의 offset 계산을 편리하게 위한 wrapper
Int8Array, Uint8Array, Int16Array, Uint16Array
Int32Array, Uint32Array, Float32Array, Float64Array
new XXArray(buffer [, byteOffset [, length]])
new XXArray(length)
new XXArray(array)
let buff = new ArrayBuffer(80);
let typed = new Int32Array(buff);
typed[0] = 22;
console.log(typed.length, typed[0]); // 20 22
let int16 = new Int16Array(2);
int16[0] = 10;
int16[1] = 20;
console.log(int16); // {0=10, 1=20}
let x = new Int16Array([21, 31]);
console.log(x); // {0=21, 1=31}
59. 59
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
Set
new Set([iterable])
값의 중복을 허용하지 않는 컬렉션
var myset = new Set();
myset.add(1);
myset.add(5);
myset.add('hello');
var obj = {name:'lee'};
myset.add(obj);
myset.has(1); // true
myset.has(3); // false
myset.has(5); // true
myset.has("hello"); //true
myset.size; //4
myset.delete(5); // true
myset.has(5); // false
myset.size; //3
60. 60
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
Map
new Map([iterable])
key : value 쌍으로 저장
let map = new Map();
map.set("name", 'lee');
map.set("age", 27);
map.size; // 2
for (var [key, value] of map) {
console.log(key + " = " + value);
}
map.has("name"); // true
map.get("age"); // 27
map.delete("age"); //true
map.size; //1
map.clear();
61. 61
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
WeakSet
Object 만 저장 가능
weekly held object reference
저장된 객체에 대한 다른 참조가 없으면 garbage collection
WeakMap
Object 만 저장 가능
weekly held object reference
저장된 객체에 대한 다른 참조가 없으면 garbage collection
64. 64
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Iterator
Symbol
Symbol([descriptor])
유일한 값 생성
ES6에서 추가된 primitive type
객체의 property key로 사용
new 키워드 사용 불가
Object.getOwnPropertySymbols()
getOwnPropertyNames()에 대응하는 함수
var sym1 = Symbol();
var sym2 = Symbol();
sym1 === sym2; //false
var obj = {[sym1] : 1};
obj[sym1];// 1
Object.getOwnPropertySymbos(obj);// Symbol()
65. 65
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Iterator
Symbol
Symbol.for("key")
"key"에 해당하는 Symbol을 생성하거나 반환한다.
전역 영역의 registry, Symbol()의 scope 문제 해결
Well-known symbol
이미 만들어 놓은 symbol
Symbol.iterator
Symbol.match
let obj = {};
(function(){
let s1 = Symbol();
obj[s1] = 'lee';
})();
obj[s1];// Error
let obj = {};
(function(){
let s1 = Symbol.for("name");
obj[s1] = 'lee';
})();
obj[Symbol.for("name")]; // 'lee'
66. 66
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Iterator
Iterator protocol
next 함수 제공
value, done 프러퍼티를 갖는 객체 반환
value : 다음 값, done: 순회 끝 여부
Iterable protocol
Symbol.iterator를 키로 하는 Iterator protocol을 만족하는 함수 구현
@@iterator
let obj = {
array: [ 1,2,3,4],
nextIndex : 0,
[Symbol.iterator] : function(){
return {
array: this.array,
next: function(){
return this.nextIndex < this.array.length ?
{value : this.array[this.nextIndex++], done:false}:
{done:true};
}
}
}
}
67. 67
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Iterator
Generator
function*
재 진입 가능 함수
매 next()마다 다음 yield 지점까지만 실행
function* idMaker(){
var index = 0;
while(index < 3)
yield index++;
}
var gen = idMaker();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // undefined
68. 68
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Iterator
for ... of loop
for( variable of iterable)
next()호출을 자동으로 진행
let iterable = [1, 2, 3];
for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3
84. 84
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Reflect
Reflect.getPrototypeOf(object)
Object.getPrototypeOf()와 동일
Reflect.setPrototypeOf(object, prototype)
Object.setPrototypeOf()와 도일
Reflect.setPrototypeOf({}, Object.prototype); // true
// It can change an object's [[Prototype]] to null.
Reflect.setPrototypeOf({}, null); // true
// Returns false if target is not extensible.
Reflect.setPrototypeOf(Object.freeze({}), null); // false
// Returns false if it cause a prototype chain cycle.
var target = {};
var proto = Object.create(target);
Reflect.setPrototypeOf(target, proto); // false
88. 88
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Proxy
new Proxy(target, handler)
객체의 기본 동작에 사용자 임의 로직 적용 위한 wrapper 객체
target : 대상 원본객체
trap : target의 동작을 가로채는 함수
handler : 트랩을 가지고 있는 객체, proxy에 적용
var target = { name: 'lee'};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.age = 27;
console.log(proxy.name, proxy.age);
console.log(target.name, target.age);