일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- improve-iq-by-up-to-10%!
- css
- css grid
- Node.js
- just-one-small-sip
- flexbox
- select by attribute
- Engoo
- css 오버레이
- Prototype
- JS
- shit-christmas
- Express
- regExp
- express-handlebars
- 무료 백엔드 배포
- img 확대
- ajax
- flex-grow
- close together
- node
- css variables
- module wrapper function
- Object.create
- 디자인패턴
- flex-shrink
- es6
- 정규표현식
- flex-basis
- Sass
- Today
- Total
목록es6 (6)
ES6에서 추가된 Set을 이용해 데이터 타입과 상관없이 유일한 데이터들로만 구성된 데이터 구조를 구현할 수 있습니다. 아래 코드로 확인하시죠 ! // Set: 어떤 타입의 데이터든 유일한 값을 저장 const set1 = new Set(); set1.add(100); set1.add("A String"); set1.add({name: "jian"}); set1.add(true); set1.add(function() { console.log("hello"); }) console.log(set1); // 이미 있는 값을 또 저장할 경우 set1.add(100); console.log(set1); // 변함 없음 유일하게 존재할 수 있기 때문 // 다른 생성 방법 const set2 = new Set([1,..
ES6 에서는 Map이라는 새로운 데이터 구조가 추가되었습니다. 해당 데이터 구조는 키-값 쌍을 저장하며, 그 저장 순서까지도 기억한다고 하네요. 또한 Object Literal과는 다르게 키나 값에 어떠한 타입의(primitive or reference) 데이터가 들어가도 무관하다고 합니다. 아래 코드로 살펴보시죠. // Map: 키-값 쌍을 저장. 삽입순서 또한 기억하는 콜렉션 // 일반 객체 리터럴과는 다르게 primitive or reference type 전부 키 또는 값으로 이용가능하다. const map1 = new Map(); // Set keys const key1 = "string"; const key2 = {}; const key3 = function () { }; // set map..
ES6에서 추가된 Destructuring과 Rest Parameter를 이용해 좀 더 쉽게 변수에 값을 할당할 수 있습니다. 아래 코드로 바로보시죠! // Destructuring Assignment // 배열의 구조분해할당 let a, b; [a, b] = [100, 200]; console.log(a); // 100 console.log(b); // 200 // Rest parameter // 정해지지 않은 수를 배열 또는 객체로 나타낼 수 있도록 함 [a, b, ...rest] = [100, 200, 300, 400, 500]; console.log(rest); // 300, 400, 500 // 객체의 구조분해할당 ({a, b, ...rest} = {a: 100, b: 200, c: 300, d..
Symbol은 ES6에서 추가된 primitive data type 입니다. 각각의 Symbol들은 같을 수 없습니다. Symbol은 객체의 프로퍼티 식별자(프로퍼티의 key)로 이용하기 위해 만들어졌다고 합니다. for .. in 문을 통해 열거할 수 없고, JSON.stringify 메서드를 이용해 JSON으로 변경할 수 없어 해당 프로퍼티를 감추는 용도로 사용합니다. 해당 프로퍼티의 값에 접근하려면 값의 할당에 쓰였던 Symbol이 있어야하기 때문이죠. ( ex. obj[KEY1] ) 아래의 코드를 참조하여 특성에 대해 알아보아요. // Create a symbol const sym1 = Symbol(); const sym2 = Symbol("sym2"); console.log(sym1); cons..
1. Iterator next라는 함수를 가진 객체를 리턴하여 인자로 전달받은 것을 반복할 수 있도록 한다. 사실 이 개념은 원래부터 존재하는 것이지만 ES6에서 이러한 형태를 하나의 프로토콜(규약)로 제공함에 의미가 있는 것 같다. 이러한 표현방법은 Generator에서도 사용된다. // Iterator Example function nameIterator(names) { let nextIndex = 0; return { next: function () { return nextIndex < names.length ? {value: names[nextIndex++], done: false} : {done: true} } } } // Create an array of names const namesArr ..
앞서 공부했던 OOP의 개념을 ES6에서는 class를 이용해 문법적 이득(syntatic sugar)을 취하며 구현할 수 있다. 물론 prototype 기반으로 작동하며 원리 또한 거의 비슷하다. class Person { constructor(firstName, lastName, dob) { this.firstName = firstName; this.lastName = lastName; this.birthday = new Date(dob); } greeting() { return `Hello there ${this.firstName} ${this.lastName}`; } calculateAge() { const diff = Date.now() - this.birthday.getTime(); const..