본문 바로가기

ECMAScript

10. Object assign 자바스크립트에서 이런 코드를 작성해 본 적이 있는가?? let sports = {event: "축구", player: 11}; let dup = {}; dup = sports; sports.player = 55; console.log(dup.player); //55 출력 dup.event = '농구'; console.log(sports.event); //농구가 출력 //그래서 이런 처리를 해줘야 함.... 너무 귀츈귀츈... ㅜㅠㅜㅠ for( var key in sports ) { dup[key] = sports[key]; } assigning enumerable properties 는 copy 가 아니라 ref 되는 현상이다. 보통은 이를 막기 위해서 모든 properties 를 for 문을 돌려서 직.. 더보기
9. for of 아... 너무 졸립다... ㅜㅠ그래서 오늘은 진짜 짧게 쓸 주제 하나 찾아서 쓰려한다. 그 주제는 바로 for-of사실 처음부터 그냥 쓰려고 했으면 쓰기 어렵고, 길게 써야 하나우리는 사실 이미 http://ggoals.tistory.com/32 에서 iterable protocol즉, iterable object 에 대해서 배운적이 있다. for-of 는 iterable object 에 대해서만 반복문을 실행시켜준다. Array-like 에서 설명했던 코드를 다시 가져와보면 let values = {0: 'aaa', 1: 'bbb', length: 2}; for( var key in values) { console.log( key + ": " + values[key]); } for(var k = 0; .. 더보기
8. Enhanced Object ProPerties Property Shorthand let one =1, two = 2; let values = {one, two}; console.log(values); //Object // one:1 // two:2 선언한 variable 의 name 이 key 값으로 대체되는 것을 알 수 있다. Computed Property Names function quux() { return 'quux'; } let obj = { foo: "bar", [ "baz" + quux() ]: 42 } console.log(obj); //Object {foo: "bar", bazquux: 42} 출력 Object 의 Property Name 설정시 대괄호 ( [] ) 를 치고 그 안에 값을 적으면 그 값들이 미리 Computed 된 .. 더보기
7. destructuring 딱히 설명할 것이 없어서 샘플코드로만 대체하려 한다. 변수를 특정 구조에 맞게 작성하고, 그에 따른 구조에 맞게 값을 할당하면 그 모습 그대로 들어간다는 것을 보면 될듯하다. SampleArray Matching let values = [1,2,3]; let one, two; [one, two] = [values]; console.log(one+ ',' + two); //1, 2 가 출력 let three, four; [one, two, three, four] = [values]; console.log(one+ ',' + two+ ',' + three+ ',' + four); //1,2,3,undefined 가 출력 [one, two, [three, four]] = [1,2, [73, 74]]; [one.. 더보기
6. Array-like 빌트인 오브젝트인 Array 의 경우 아래와 같은 4가지 특징을 가지고 있다. 1. length property 는 list 에 element 가 추가 될 때마다 자동으로 업데이트 된다. ( The length property is automatically updated as new elements are added to the list. ) 2. length 를 줄이면 array 도 줄어든다. ( Setting length to a smaller value truncates the array. ) 3. Arrays 들은 Array.prototype 으로 부터 method 를 상속 받는다. 이건 당연한 개념이겠지만 buildt in Array object 가 생성될때 Array 의 prototype 의 .. 더보기
5. rest Aggregation of remaining arguments into single parameter of variadic functions.4장의 spread 가 펼쳐주는거라면 이건 묶어주는 느낌으로 보면 어떨까 싶다 :)Syntaxfunction(param, paramN, ...rest ) SampleES6 에서 rest 를 쓰면 function f (x, y, ...a) { return (x + y) * a.length } f(1, 2, "hello", true, 7) === 9 ES5 에서 rest 를 그대로 구현하면 function f (x, y) { var a = Array.prototype.slice.call(arguments, 2); return (x + y) * a.length; }; f.. 더보기
4. spread 3 장에서 배웠던 iterable collection ( object ) 를 왜 배웠나.뒤로 가면 계속 나오겠지만 iterable 의 의미가 얼마나 많이 쓰이는 가를 볼 수 있을 것이다. Syntax [...iterable]이터러블 오브젝트를 하나씩 전개[...iterable]spec 에서 spread operator 로 표기하지는 않았음[] 안에 spread 대상 배열 작성 Sample let two =[21, 22]; let five = [51, 52]; let one = [11, ...two, 12, ...five]; console.log(one); // [11,21,22,12,51,52] 가 출력 console.log(one.length); // 6 이 출력 JS Bin on jsbin.com S.. 더보기
3. iterable protocol 미리 설명하기에 앞서 +_+Symbol 과 Destructuring 은 다음에 다루도록 하겠다.아래 나오는 것중 Symbol.iterator 에서의 Symbol은 뭐지?? 라는 생각은 하지 말아주시길... ㅋ그리고 Destructuring 은 간단하게만 설명하면 let [a, b] = [1,2] console.log(a); //1 이 출력됌 console.log(b); //2 가 출력됌 자 그럼 이제 설명 시작!! iterable protocol 이란? The iterable protocol allows JavaScript objects to define or customize their iteration behavior, such as what values are looped over in a for... 더보기

티스토리툴바