diff --git "a/ES2015(ES6)/1. Scope/1. ES2015(ES6) \354\213\234\354\236\221\355\225\230\352\270\260.txt" "b/ES2015(ES6)/1. Scope/1. ES2015(ES6) \354\213\234\354\236\221\355\225\230\352\270\260.txt" deleted file mode 100644 index a9af83f..0000000 --- "a/ES2015(ES6)/1. Scope/1. ES2015(ES6) \354\213\234\354\236\221\355\225\230\352\270\260.txt" +++ /dev/null @@ -1,9 +0,0 @@ -ES6. - -ES6 === ES2015 -(ES2016, ES2017....) - -ES2015 -개선된 JavaScript문법 -ES6 browser compatibility의 훌륭한 지원 -ES6를 기반으로 한 JavaScript 생태계의 확산 diff --git a/ES2015(ES6)/10. Template/README.md b/ES2015(ES6)/10. Template/README.md deleted file mode 100644 index 1468ad7..0000000 --- a/ES2015(ES6)/10. Template/README.md +++ /dev/null @@ -1,70 +0,0 @@ -# Template - -## 1. Template처리 - -__json으로 응답을 받고,__ - -`javascript object로 변환한 후에` - -어떠한 데이터처리 조작을 한 후에 dom에 추가 하는 일 - -__데이터 + HTML문자열의 결합이 필요하기 때문에__ -```javascript - const data = [ - { - name : 'coffe-bean', - order :true, - items : ['americano', 'milk', 'green-tea'] - }, - { - name : 'starbucks', - order : false, - }, - { - name : 'coffe-King', - order :true, - items : ['americano', 'latte'] - }, - ] - - // 각각의 key가 다르기 때문에 좋지 않은 코드 - const template = `
mydiv
- - - \ No newline at end of file diff --git a/ES2015(ES6)/5. Object/README.md b/ES2015(ES6)/5. Object/README.md deleted file mode 100644 index a445b83..0000000 --- a/ES2015(ES6)/5. Object/README.md +++ /dev/null @@ -1,83 +0,0 @@ -# Object - -```javascript - const name = "yjkwon07"; - const age = 26; - - var obj = { - name : name, - age : age - }; - console.log("obj 1 : ", obj); -``` - -## 1. 새로운 Object 반환 - -```javascript - function getObj() { - const name = "Im ck"; - - const getName = function() { - return name; - } - - const setName = function(newname) { - name = newname; - } - - const printName = function() { - console.log(name); - } - - // Object 리터럴 - return { - // getName : getName, - // setName : setName - - // 이름과 value 값이 일치하면, - getName, - setName, - - // Object의 value도 반환 가능 - name - } - } - var obj2 = getObj(); - console.log("obj2 : " , obj2); -``` - -## 2. key와 function 없이 생성 -```javascript - const data = { - name, - getName() { - - }, - }; - console.log("obj3 : " ,data); -``` -## 3. 동적 속성 할당을 리러털 안에 표현 - -```javascript - var sayNode = function() { - console.log("Node"); - } - var es = "ES"; - - const newObject = { - // function{} - sayJS() { - console.log("JS"); - }, - // key , value가 같다면 하 나로!! - sayNode, - // 동적 속성 할당을 리러털 안에 표현이 가능하다. - // { [변수] : 값 } - [es+6]: "Fatasitic", - }; - newObject[es + 7] = 'Fantasitic'; - newObject.sayNode(); // Node - newObject.sayJS(); // JS - console.log(newObject.ES6); - console.log(newObject.ES7); -``` \ No newline at end of file diff --git a/ES2015(ES6)/6. Destructuring/README.md b/ES2015(ES6)/6. Destructuring/README.md deleted file mode 100644 index 7382b71..0000000 --- a/ES2015(ES6)/6. Destructuring/README.md +++ /dev/null @@ -1,139 +0,0 @@ -# Destructuring -## 1. Destructuring Array - -필요한 배열에 특정 인덱스값이 의미가 있을 때 뽑아서 쓸 수 있다. -```javascript - let data = ["yjkwon07", "honux", "jk", "jinny"]; - - let jisu = data[0]; - let jung = data[2]; -``` - -변수에 배열이나 Object에 값을 할당할 때 유용함 -```javascript - let [jisu, ,jung] = data; - console.log(jisu, jung); // out: yjkwon07, honux -``` - -## 2. Destructuring Object -```javascript - let obj = { - name : "yjkwon07", - address : "Korea", - age : 10 - } - - let {name, age} = obj; - console.log(name , age); // out: yjkwon07 10 -``` - -다른 변수 명을 정할 수 있다. -```javascript - let obj = { - name : "yjkwon07", - address : "Korea", - age : 10 - } - - let {name : myName , age : myAge} = obj; - console.log(myName , myAge); -``` - -## 3. Destructuring 활용 JSON파싱 -```javascript - var news = [ - { - "title" : "sbs", - "image" : "https://", - "newslist" : [ - "[가나다] 가나다", - "가나다 [가나다]" - ] - }, - { - "title" : "mbc", - "image" : "https://", - "newslist" : [ - "[라마바사] 라마바사", - "라마바사 [라마바사]" - ] - } - ]; - - let [, mbc] = news; - let {title, image} = mbc; - console.log(title , image); // out: mbc https:// -``` - -### 로직 개선 - -한방에 뽑는 방법 - -한줄을 줄여줌 !!! 완전 우아하네 ~~ - -```javascript - let [, {title, image}] = news; - console.log(image); -``` - -### 또다른 방법 - -매개변수에서 destructuring - -newslist만 출력 - -```javascript - function getNewsList([, {newslist}]) { - console.log(newslist); - } - getNewsList(news); -``` - -## 4. Destructuring활용_Event 객체 전달 - -event객체에서 target만 가져온다. - -```javascript - document.querySelector("div").addEventListener("click", function (event) { - // event -> 오브젝트 - console.log(event); - console.log(event.target.tagName); - }); - document.querySelector("div").addEventListener("click", function ({ target }) { - console.log(target.tagName); - }); -``` - -## 5. Destructuring의 문제점 -getCandy로 따로 값을 받아오게 된다면 this의 위치를 못찾아서 값을 undefined로 리턴한다. - -arrow func 으로 해도 못 찾는다. -```javascript -// 객체 리터럴 -const candyMachine = { - status: { - name : 'node', - count : 5, - }, - getCandy() { - this.status.count--; - return this.status.count; - } -}; -// const a = 객체.a -// const b = 객체.b를 -// const{ a, b } = 객체로 바꿀 수 있다. -const {status , getCandy} = candyMachine; - -// 비구조화 할당 시 this가 의도와 다르게 동작하는 현상이 있을 수 있다. -candyMachine.getCandy(); // 4 -getCandy(); // undefined -``` - -### call(Solve) - -```javascript -candyMachine.getCandy(); // 3 -getCandy.call(candyMachine); // 2 -getCandy(); // undefined -``` diff --git a/ES2015(ES6)/7. Set&WeakSet/README.md b/ES2015(ES6)/7. Set&WeakSet/README.md deleted file mode 100644 index 39ae8d1..0000000 --- a/ES2015(ES6)/7. Set&WeakSet/README.md +++ /dev/null @@ -1,74 +0,0 @@ -# Set&WeakSet -## 1. Set으로 유니크한 배열만들기 - -'object' of Set - -__`set:` 중복없이 유일한 값을 저장하려고 할때.__ - -이미 존재하는지 체크할 때 유용. - -__set도 사실 `배열과` 유사함__ - -```javascript - let mySet = new Set(); - console.log(toString.call(mySet)); - - mySet.add("yjkwon07"); - mySet.add("navie"); - mySet.add("ck"); - - // 존재 하는지? - // has : 가지고 있는지 - console.log(mySet.has("yjkwon07")); - - // 순회 - mySet.forEach(function(v) { - console.log(v); - }); - - // delete : value삭제 - mySet.delete("yjkwon07"); - // 순회 - console.log("after, delete : "); - mySet.forEach(function(v) { - console.log(v); - }); -``` - -## 2. WeakSet으로 효과적으로 객체타입저장하기 - -**`weakset :`** **참조를 가지고 있는 객체만** 저장이 가능하다. - -객체형태를 중복없이 저장하려 할 때 유용하다. -```javascript - let arr = [1, 2, 3, 4]; - let arr2 = [5, 6, 7, 8]; - let obj = {arr, arr2}; - - let ws = new WeakSet(); - - // invalid type Error (Only Object) - // primitive type Nope!~~ - // ws.add(111); - // ws.add("111"); - // ws.add(null); - - ws.add(arr); - ws.add(arr2); - ws.add(obj); - - // ok 함수는 참조객체니깐 - ws.add(function(){}); - - // garbageCollection 대상이 된다.!!!! - arr = null; - - // WeakSet에서는 존재하는것 처럼 보인다. - console.log(ws); - - // arr -> 유효하지 않은 객체라는것을 알고 있다. - // (null!!! -> garbageCollector) - console.log(ws.has(arr), ws.has(arr2)); - // out: false true -``` - diff --git a/ES2015(ES6)/8. Map & WeakMap/README.md b/ES2015(ES6)/8. Map & WeakMap/README.md deleted file mode 100644 index 7f0d8a0..0000000 --- a/ES2015(ES6)/8. Map & WeakMap/README.md +++ /dev/null @@ -1,107 +0,0 @@ -# Map & WeakMap -## 1. Map & WeakMap 추가정보를 담은 객체 저장하기 - -개선해보려고 노력한 STL - -`Array` -> set, weakSet - -`Object` -> map, weakMap - -__map은 key / value__ - -WeakMap -```javascript - let wm = new WeakMap(); - let myfun = function(){}; - - // 이 함수가 얼마나 실행됐지?를 알려고 할 때...? count - wm.set(myfun, 0); - - // out: function => 0 - console.log(wm); - - let count = 0; - for(let i = 0; i < 10; i++) { - count = wm.get(myfun); // get value - count++; - wm.set(myfun, count); - } - - // console.log(wm); - // out: 10 - console.log(wm.get(myfun)); - - // garbageCollector - myfun = null; - // out: undefined - console.log(wm.get(myfun)); - // out: false - console.log(wm.has(myfun)); -``` - -## 2. WeakMap 클래스 인스턴스 변수 보호하기 - -WeakMap 활용 - -### 1. 객체 생성 -private variable - -__But!!__ -```javascript - function Area(height ,width){ - this.height = height; - this.width = width; - } - - Area.prototype.getArea = function() { - return this.height * this.width; - } - - let myarea = new Area(10, 20); - console.log(myarea.getArea()); - console.log(myarea.height); // 출력이 된다... -``` - -```javascript - const obj = {}; - function Area3(height ,width){ - obj['height'] = height; - obj['width'] = width; - } - Area3.prototype.getArea = function() { - return obj.height * obj.width; - } - let myarea3 = new Area3(10, 20); - - console.log(obj); - // garbageCollector 대상이 아니다. - // 계속 쌓여 나감... - myarea = null; - console.log(obj); -``` -### 2. 개선 방향 -weakMap!!! - -__wm 장점 부각__ -```javascript - const wm = new WeakMap(); - function Area2(height ,width){ - // 단점은 클래스 밖에 전역변수를 보관하고 있다... - wm.set(this, {height, width}); - } - Area2.prototype.getArea = function() { - const {height, width} = wm.get(this); - return height * width; - } - let myarea2 = new Area2(10, 20); - console.log(myarea2.getArea()); - console.log(myarea2.height); // undefined - - // 전역변수 -> weakMap 활용 !! - console.log(wm.has(myarea2)); - // out: true - - myarea2 = null; - console.log(wm.has(myarea2)); - // out: false -``` \ No newline at end of file diff --git "a/ES2015(ES6)/9. \354\213\244\354\212\2652/lotto.js" "b/ES2015(ES6)/9. \354\213\244\354\212\2652/lotto.js" deleted file mode 100644 index 40df044..0000000 --- "a/ES2015(ES6)/9. \354\213\244\354\212\2652/lotto.js" +++ /dev/null @@ -1,33 +0,0 @@ -/* - 로또 번호 만들기 - 1. 유일한값을 추출하는 과정에서 Set을 사용한다. - 2. getRandomNumber함수에 변수를 전달하는 과전에서 destructuring을 사용 -*/ - -const SETING = { - name : "LUCKY LOTTO!", - count : 6, - maxNumber : 45 -} -// min (포함) 과 max (포함) 사이의 임의 정수를 반환 -// Math.round() 를 사용하면 고르지 않은 분포를 얻게된다! -// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random 에서 가져옴 ;; -function getRandomIntInclusive(min, max) { - return Math.floor(Math.random() * (max - min + 1)) + min; -} - -function getRandomNumber() { - // 랜덤한 유일한 숫자값을 추출 - // set - let numSet = new Set(); - let {count , maxNumber} = SETING; - - // 6개 추출 - while(numSet.size < count){ - numSet.add(getRandomIntInclusive(1, maxNumber)); - } - return [...Array.from(numSet)]; -} - -console.log(getRandomNumber()); - diff --git "a/ES2015(ES6)/3. Array/1. for of - \354\210\234\355\232\214\355\225\230\352\270\260.js" "b/ES2015(ES6)/Array/1. for of - \354\210\234\355\232\214\355\225\230\352\270\260.js" similarity index 100% rename from "ES2015(ES6)/3. Array/1. for of - \354\210\234\355\232\214\355\225\230\352\270\260.js" rename to "ES2015(ES6)/Array/1. for of - \354\210\234\355\232\214\355\225\230\352\270\260.js" diff --git "a/ES2015(ES6)/3. Array/2. spread operator - \353\260\260\354\227\264\354\235\230 \353\263\265\354\202\254.js" "b/ES2015(ES6)/Array/2. spread operator - \353\260\260\354\227\264\354\235\230 \353\263\265\354\202\254.js" similarity index 100% rename from "ES2015(ES6)/3. Array/2. spread operator - \353\260\260\354\227\264\354\235\230 \353\263\265\354\202\254.js" rename to "ES2015(ES6)/Array/2. spread operator - \353\260\260\354\227\264\354\235\230 \353\263\265\354\202\254.js" diff --git "a/ES2015(ES6)/3. Array/3. spread operator - \353\252\207\352\260\200\354\247\200 \355\231\234\354\232\251.js" "b/ES2015(ES6)/Array/3. spread operator - \353\252\207\352\260\200\354\247\200 \355\231\234\354\232\251.js" similarity index 100% rename from "ES2015(ES6)/3. Array/3. spread operator - \353\252\207\352\260\200\354\247\200 \355\231\234\354\232\251.js" rename to "ES2015(ES6)/Array/3. spread operator - \353\252\207\352\260\200\354\247\200 \355\231\234\354\232\251.js" diff --git "a/ES2015(ES6)/3. Array/4. from \353\251\224\354\204\234\353\223\234\353\241\234 \354\247\204\354\247\234 \353\260\260\354\227\264 \353\247\214\353\223\244\352\270\260.js" "b/ES2015(ES6)/Array/4. from \353\251\224\354\204\234\353\223\234\353\241\234 \354\247\204\354\247\234 \353\260\260\354\227\264 \353\247\214\353\223\244\352\270\260.js" similarity index 100% rename from "ES2015(ES6)/3. Array/4. from \353\251\224\354\204\234\353\223\234\353\241\234 \354\247\204\354\247\234 \353\260\260\354\227\264 \353\247\214\353\223\244\352\270\260.js" rename to "ES2015(ES6)/Array/4. from \353\251\224\354\204\234\353\223\234\353\241\234 \354\247\204\354\247\234 \353\260\260\354\227\264 \353\247\214\353\223\244\352\270\260.js" diff --git a/ES2015(ES6)/Array/README.md b/ES2015(ES6)/Array/README.md new file mode 100644 index 0000000..dfe6c87 --- /dev/null +++ b/ES2015(ES6)/Array/README.md @@ -0,0 +1,255 @@ +# Array + +## 1. for of - 순회하기 + +### for - in 의 문제점(Array) + +- **Object prototype도 순회한다.** __`array도 일종의 Object`__ + +```javascript + var data = [1, 2, undefined, NaN, null, ""]; + for (var i = 0; i < data.length; i++) { + console.log(i); + } + + data.forEach(function (value) { + console.log("valueis", vlaue); + }); + + // bad............ + for (let idx in data) { + console.log(data[idx]); + } +``` + +- __자신이 갖고 있지 않은 상위의 값도 포함해서 결과에 출력할 수 있다.__ + +```javascript + var data = [1, 2, undefined, NaN, null, ""]; + Array.prototype.getIndex = function () { }; + + for (let idx in data) { + console.log(data[idx]); // 출력시 function(){} 출력 + } +``` + +### for - of(Solve) + +- __`배열 뿐만 아니라 문자열도 iterable이 가능하다`__ +- 문자 단위로 출력 (공백도 포함) + +```javascript + var data = [1, 2, undefined, NaN, null, ""]; + Array.prototype.getIndex = function () { }; + for(let value of data) { + console.log(value); + } + + var str = "hello world!!!"; + for(let value of str) { + console.log(value); + } +``` + +### Object using for - in + +- **prototype link의 연결된 prototype Object의 key 까지 출력** + +```javascript + function Ultra(name){ + this.UltraNmae = name, + this.sf = function sf(){console.log("Ultra sf")} + } + Ultra.prototype.ultraProp = true; + + function Super(){} + Super.prototype = new Ultra("ultra"); + + var obj = new Super(); + obj.age = "22" + obj.name = "yjkwon07" + + for(var ss in obj) console.log(ss); +``` + +``` + age + name + UltraNmae + sf + ultraProp +``` + +### Object using for - of + +**`for keyword is only using the iterable Data`** + +- __But, object is not iterable__ + +```javascript + for(var s of obj) console.log(s); // VM3604:1 Uncaught TypeError: os is not iterable +``` + +- __So. Object.key()__ + +```javascript + for (let country of Object.keys(obj)) { + var capital = obj[country]; + console.log(country, capital); + } + // age 22 +``` + +## 2. spread operator, 펼침연산자(immutable) + +- spread(...)를 사용하여 배열의 값들을 복사한다. +- __여기서 pre와 newData는 다른(참조 주소가) 데이터이다.__ +- spread는 **`immutable과정`** 이라는것을 알게된다. +- 메모리의 새로운 공간에 새로운 데이터를 넣어 참조 한뒤, __완전히 복사__ + +```javascript + let pre = ["apple", "orange", 100]; + let newData = [...pre]; + + console.log(pre, newData); + // ["apple", "orange", 100] + // ["apple", "orange", 100] + + console.log(pre === newData); // false +``` + +## 3. spread operator - 몇가지 활용 + +### 배열을 특정 위치에 끼워넣을 때 활용 + +```javascript + let pre = [100, 200, "hello", null]; + let newData = [0, 1, 2, 3, ...pre, 4]; + console.log(newData); + // [0, 1, 2, 3, 100, 200, "hello", null, 4] +``` + +### 매개변수 인자값을 넣을 때 활용 + +```javascript + function sum(a, b, c) { + return a + b + c; + } + + let pre2 = [100 ,200 ,300]; + sum(pre2[0] , pre2[1] , pre2[2]); +``` + +- 모든 인자를 파라미터 값에 넣어야하는것이 너무 귀찮아.🤔 +- __1 sol. 이전 방법__ + +```javascript + function sum(a, b, c) { + return a + b + c; + } + let pre2 = [100 ,200 ,300]; + + sum.apply(null, pre2); + // out: 600 +``` + +__2. spread operator__ + +```javascript + function sum(a, b, c) { + return a + b + c; + } + let pre2 = [100 ,200 ,300]; + + sum(...pre2); + + console.log(sum.apply(null, pre2)); // 600 + console.log("result =>", sum(...pre2)); // 600 +``` + +- __immutable array__ +- 즉, 배열을 바꾸지 않고 새로운 값을 복사할 수 있는 방법을 제공 +- 배열을 merge하거나 spread하는방법으로 +- __배열을 합치거나 펼쳐진 상태로 새로운 인자값으로 전달할 수 있는 기능__ + +## 4. from 메서드로 인자(arguments) 배열 만들기 + +### argument + +- 인자값을 안주더라도 내부값의 **argument(객체)라는** 펀션(function)안에 있는 +- __내부 지역변수와 같은 특별한 값을 이용한다.__ -> 배열과 비슷한 형태 +- __아주 권장되는 패턴은 아니다.__ + +```javascript + function addMark() { + let newData = []; + for (let i = 0; i < arguments.length; i++) { + newData.push(arguments[i] + "!"); + } + console.log(newData); + } + addMark(1, 2, 3, 4, 5); +``` + +### Error -> arguments는 map을 못쓴다. + +- map을 사용하여 순회하면서 필요한 값을 추가하고, 새로운 배열을 반환 +- __But arguments는 map을 못쓴다.. `배열이 아니기 때문에`__ + +```javascript + function addMark() { + let newData = arguments.map(function (value) { + return value + "!"; + }); + console.log(newData); + } + addMark(1, 2, 3, 4, 5); // Error +``` + +### from(Solve) + +```javascript + function addMark2() { + let newArray = Array.from(arguments); + let newData = newArray.map(function (value) { + return value + "!"; + }); + console.log(newData); + } + addMark2(1, 2, 3, 4, 5); +``` + +## 5. 변수 초기화 + +- (...변수)는 rest로 여러 개의 변수를 모아서 배열로 만든다. + +```javascript + const array = ['nodejs', {}, 10, true]; + const [node, obj, ...bool] = array; + + console.log(bool); // [10, true] +``` + +``` javascript + const m = (x, y) => console.log(x, y); + m(5, 6) // 5 6 + + m(5, 6, 7, 8, 9); // 5 6 +``` + +```javascript + const n = (X, ...y) => console.log(X, y); + + n(5, 6, 7, 8, 9) // 5, [ 6, 7, 8, 9] +``` + +```javascript + function o() { + console.log(arguments); + } + o(1, 2, 3, 4, 5) // [1 2,3,4,5]; + + // 더이상 arguement를 사용하지 않는다. + const p = (...rest) => console.log(rest); + p(5, 6, 7, 8, 9) // [5, 6, 7, ,8 ,9 ] +``` \ No newline at end of file diff --git a/ES2015(ES6)/6. Destructuring/1. Destructuring Array.js b/ES2015(ES6)/Destructuring/1. Destructuring Array.js similarity index 100% rename from ES2015(ES6)/6. Destructuring/1. Destructuring Array.js rename to ES2015(ES6)/Destructuring/1. Destructuring Array.js diff --git a/ES2015(ES6)/6. Destructuring/2. Destructuring Object.js b/ES2015(ES6)/Destructuring/2. Destructuring Object.js similarity index 100% rename from ES2015(ES6)/6. Destructuring/2. Destructuring Object.js rename to ES2015(ES6)/Destructuring/2. Destructuring Object.js diff --git "a/ES2015(ES6)/6. Destructuring/3. Destructuring \355\231\234\354\232\251 JSON\355\214\214\354\213\261.js" "b/ES2015(ES6)/Destructuring/3. Destructuring \355\231\234\354\232\251 JSON\355\214\214\354\213\261.js" similarity index 100% rename from "ES2015(ES6)/6. Destructuring/3. Destructuring \355\231\234\354\232\251 JSON\355\214\214\354\213\261.js" rename to "ES2015(ES6)/Destructuring/3. Destructuring \355\231\234\354\232\251 JSON\355\214\214\354\213\261.js" diff --git "a/ES2015(ES6)/6. Destructuring/4. Destructuring \355\231\234\354\232\251_Event\352\260\235\354\262\264\354\240\204\353\213\254.js" "b/ES2015(ES6)/Destructuring/4. Destructuring \355\231\234\354\232\251_Event\352\260\235\354\262\264\354\240\204\353\213\254.js" similarity index 100% rename from "ES2015(ES6)/6. Destructuring/4. Destructuring \355\231\234\354\232\251_Event\352\260\235\354\262\264\354\240\204\353\213\254.js" rename to "ES2015(ES6)/Destructuring/4. Destructuring \355\231\234\354\232\251_Event\352\260\235\354\262\264\354\240\204\353\213\254.js" diff --git a/ES2015(ES6)/Destructuring/README.md b/ES2015(ES6)/Destructuring/README.md new file mode 100644 index 0000000..cbb7c37 --- /dev/null +++ b/ES2015(ES6)/Destructuring/README.md @@ -0,0 +1,143 @@ +# Destructuring + +## 1. Destructuring Array + +- 필요한 배열에 특정 인덱스값이 의미가 있을 때 뽑아서 쓸 수 있다. + +```javascript + let data = ["yjkwon07", "honux", "jk", "jinny"]; + let jisu = data[0]; + let jung = data[2]; +``` + +- 변수에 배열이나 Object에 값을 할당할 때 유용함 + +```javascript + let [jisu, ,jung] = data; + console.log(jisu, jung); // out: yjkwon07, honux +``` + +## 2. Destructuring Object + +```javascript + let obj = { + name : "yjkwon07", + address : "Korea", + age : 10 + } + + let {name, age} = obj; + console.log(name , age); // out: yjkwon07 10 +``` + +- 다른 변수 명을 정할 수 있다. + +```javascript + let obj = { + name : "yjkwon07", + address : "Korea", + age : 10 + } + + let {name : myName , age : myAge} = obj; + console.log(myName , myAge); +``` + +## 3. Destructuring 활용 JSON파싱 + +```javascript + var news = [ + { + "title" : "sbs", + "image" : "https://", + "newslist" : [ + "[가나다] 가나다", + "가나다 [가나다]" + ] + }, + { + "title" : "mbc", + "image" : "https://", + "newslist" : [ + "[라마바사] 라마바사", + "라마바사 [라마바사]" + ] + } + ]; + + let [, mbc] = news; + let {title, image} = mbc; + console.log(title , image); // out: mbc https:// +``` + +### 로직 개선 + +- 한방에 뽑는 방법 + +```javascript + let [, {title, image}] = news; + console.log(image); +``` + +### 또다른 방법 + +- 매개변수에서 destructuring +- newslist만 출력 + +```javascript + function getNewsList([, {newslist}]) { + console.log(newslist); + } + getNewsList(news); +``` + +## 4. Destructuring활용_Event 객체 전달 + +- event객체에서 target만 가져온다. + +```javascript + document.querySelector("div").addEventListener("click", function (event) { + // event -> 오브젝트 + console.log(event); + console.log(event.target.tagName); + }); + document.querySelector("div").addEventListener("click", function ({ target }) { + console.log(target.tagName); + }); +``` + +## 5. Destructuring의 문제점 + +- getCandy로 따로 값을 받아오게 된다면 this의 위치를 못찾아서 값을 undefined로 리턴한다. +- arrow func 으로 해도 못 찾는다. + +```javascript + // 객체 리터럴 + const candyMachine = { + status: { + name : 'node', + count : 5, + }, + getCandy() { + this.status.count--; + return this.status.count; + } + }; + + // const a = 객체.a + // const b = 객체.b를 + // const{ a, b } = 객체로 바꿀 수 있다. + const {status , getCandy} = candyMachine; + + // 비구조화 할당 시 this가 의도와 다르게 동작하는 현상이 있을 수 있다. + candyMachine.getCandy(); // 4 + getCandy(); // undefined +``` + +### call(Solve) + +```javascript + candyMachine.getCandy(); // 3 + getCandy.call(candyMachine); // 2 + getCandy(); // undefined +``` \ No newline at end of file diff --git a/ES2015(ES6)/6. Destructuring/index.html b/ES2015(ES6)/Destructuring/index.html similarity index 100% rename from ES2015(ES6)/6. Destructuring/index.html rename to ES2015(ES6)/Destructuring/index.html diff --git "a/ES2015(ES6)/11. function/1. Arrow function \355\231\234\354\232\251.js" "b/ES2015(ES6)/Function/1. Arrow function \355\231\234\354\232\251.js" similarity index 100% rename from "ES2015(ES6)/11. function/1. Arrow function \355\231\234\354\232\251.js" rename to "ES2015(ES6)/Function/1. Arrow function \355\231\234\354\232\251.js" diff --git "a/ES2015(ES6)/11. function/2. Arrow function\354\235\230 this context.js" "b/ES2015(ES6)/Function/2. Arrow function\354\235\230 this context.js" similarity index 100% rename from "ES2015(ES6)/11. function/2. Arrow function\354\235\230 this context.js" rename to "ES2015(ES6)/Function/2. Arrow function\354\235\230 this context.js" diff --git a/ES2015(ES6)/11. function/3. function default parameters.js b/ES2015(ES6)/Function/3. function default parameters.js similarity index 100% rename from ES2015(ES6)/11. function/3. function default parameters.js rename to ES2015(ES6)/Function/3. function default parameters.js diff --git a/ES2015(ES6)/11. function/4. rest paramaters.js b/ES2015(ES6)/Function/4. rest paramaters.js similarity index 100% rename from ES2015(ES6)/11. function/4. rest paramaters.js rename to ES2015(ES6)/Function/4. rest paramaters.js diff --git a/ES2015(ES6)/Function/README.md b/ES2015(ES6)/Function/README.md new file mode 100644 index 0000000..5d385fd --- /dev/null +++ b/ES2015(ES6)/Function/README.md @@ -0,0 +1,255 @@ +# Function + +## 1. 함수 + +### 함수 선언문 + +```javascript + function add1(x , y) { + return x + y; + } +``` + +### 함수 표현식 + +```javascript + var add2 = function(x, y) { + return x + y; + } +``` + +### 리턴 + +```javascript + // function(매개) { return 리턴 } + // (매개) => { return 리턴 } + const add3 = (x , y) => { + return x + y; + }; + + // (매개) => {return 리턴} + // 리턴만 있는 경우 + // (매개) => 리턴, + // (매개) => (리턴) + const add4 = (x, y) => x + y; +``` + +### this + +- why doesn't desploy function today? +- **Because this keyword!!!!** +- function 내부의 this는 외부의 this와 다르기 때문에!!!! +- this를 that에 저장해서 써야 했다. + +```javascript + var relationship1 = { + name: 'zero', + friends : ['nero', 'hero', 'xero'], + logFrieds: function() { + var that = this; // relationship1을 가리키는 this를 that에 저장 + this.friends.forEach(function(friend) { + console.log(that.name, friend); + }); + }, + }; + relationship1.logFrieds(); +``` + +## 2. Arrow Function + +- **축약의 장점** + +```javascript + // 콜백 함수 -> 나중에 실행되는 함수 + setTimeout(function() { + console.log("settimout"); + }, 1000); + + // 축약 표현 + setTimeout(() => { + console.log("setTimeout arrow"); + }, 1000); + + // callback 함수의 문제가 함수의 인자가 너무 길어... + let newArr = [1, 2, 3, 4, 5].map(function(value , index, object) { + return value * 2; + }); + console.log(newArr); + + // 더 축약 + // return도 생략 + // brace를 가급적 해주는게 좋다 + let newArr = [1, 2, 3, 4, 5].map((v) => (v * 2)); + console.log("arrow newArr", newArr); +``` + +## 3. Arrow function의 this context + +- **화살표 함수는 함수 내부의 this를 외부 this와 같게 만들어 준다.** +- 원래 forEach function안에 this가 window로 가리켰지만, relationsthip2를 가리킬 수 있다. +- 따라서 바깥 스코프인 logFriends()의 this를 그대로 사용할 수 있다. +- **상위 스코프의 this를 그대로 물려 받는다.** + +```javascript + var relationship2 = { + name: 'zero', + friends : ['nero', 'hero', 'xero'], + logFrieds() { + this.friends.forEach((friend) => { + console.log(this.name, friend); + }); + } + }; + relationship2.logFriends(); +``` + +### 3-1. bind + +- __context(this) 문제로 `bind를 많이 사용하고 있다.`__ +- **this** Object는 function이 아니다. => keyword +- this -> window는 printData()를 가지고 있지 않다. +- __`보통 함수를 bind로 감싸주면 된다.`__ + +```javascript + const myObj = { + runTimeout() { + setTimeout(function() { + console.log(this === window); + // out: true -> bind()를 안 할때 + // out: false -> bind()를 할 때 + + this.printData(); + // bind 호출하기 전 + // this.printData is not a func at + // so bind로 감싸준다. + }.bind(this), 200); + }, + + printData() { + console.log("hi yjkwon07!!"); + } + } + myObj.runTimeout(); +``` + +### 3-2. Arow Function + +- __But, Arrow함수일 경우 다르다.__ +- this가 가리키는게 window가 아니고 +- __this가 가리키는 context가 실행타이밍에 가리키는 것__ + +```javascript + const myObj = { + runTimeout() { + setTimeout(() => { + // out: false!!! + console.log(this === window); + }, 200); + }, + printData() { + console.log("hi yjkwon07!!"); + } + } +``` + +### 3-3. Event_Queue & callback + +- **Event_Queue**에 있다가 나중에 실행이 됨 **`this -> window`** +- 하지만 arrow는 context를 유지하고 있다. + +```javascript + const el = document.querySelector("p"); + const myObj = { + register() { + el.addEventListener("click", function(event) { + // 1. (bind 설정 안할 시)error -> this.printData (not Function) + this.printData(); + // 2. ok + }).bind(this); + }, + printData() { + console.log("clicked!!!"); + } + } + myObj.register(); +``` + +### 3-4. ArrowFunctiob Effect !!!! + +- __this라는 것이 이전에는 실행 타이밍에 `callback()에` 호출하는곳에서 바뀔수 있지만,__ +- callback()함수를 감싸고 있는 Object 선언된걸 this가 가리킨다. + +```javascript + const myObj = { + register() { + el.addEventListener("click", (event) => { + this.printData(event.target); + // ok + }); + }, + printData(el) { + console.log("clicked!!!", el.innerText); + } + } + el.addEventListener("click", function(event) { + // HTMLPargarmentElement -> p 태그를 가리키고 있다. + console.log(this); + }); +``` + +## 4. Function default paramaters + +- __기본 매개변수__ +- parameter 부분에서 미리 설정 가능 + +```javascript + function sum(value, size = {value : 1}) { + // size = size || 1; + return value * size.value; + } + console.log(sum(3, 10)); // 30 + console.log(sum(3, {value : 3})); // 9 + console.log(sum(3)); // 3 +``` + +## 5. rest paramaters + +- spread operator와 유사 +- 들어오는 인자 값이 number?? + +### ES3 + +- 가변인자(argument)활용하기 -> 유사 배열 +- 기본 built-in function인 `arguement가` 있지만 +- __배열로 사용할 수 없다.__ +- __`slice`__ + +```javascript + function checkNum() { + const argArray = Array.prototype.slice.call(arguments); + // Array + console.log(toString.call(argArray)); + // 만약 slice 안하면 Object Arguments 반환 + + // every : 모두가 true일 경우만 true를 반환한다. + const result = argArray.every( (v) => typeof v === "number"); + // false -> "55"는 문자열 + console.log(result); + } + const result = checkNum(10, 2, 3, 4,5 , "55"); +``` + +### ES6 spread operator + +- 매개변수에 ... -> reset parameters +- 그 이외 변수 값 -> spread operator + +```javascript + function checkNum(...argArray) { + // Array + console.log(toStirng.call(argArray)); + const result = argArray.every( (v) => typeof v === "number"); + console.log(result); + } + const reuslt = checkNum(10 , 2, "55"); +``` \ No newline at end of file diff --git a/ES2015(ES6)/10. Template/index.css b/ES2015(ES6)/Function/index.css similarity index 100% rename from ES2015(ES6)/10. Template/index.css rename to ES2015(ES6)/Function/index.css diff --git a/ES2015(ES6)/11. function/index.html b/ES2015(ES6)/Function/index.html similarity index 100% rename from ES2015(ES6)/11. function/index.html rename to ES2015(ES6)/Function/index.html diff --git "a/ES2015(ES6)/8. Map & WeakMap/1. Map & WeakMap \354\266\224\352\260\200\354\240\225\353\263\264\353\245\274 \353\213\264\354\235\200 \352\260\235\354\262\264\354\240\200\354\236\245\355\225\230\352\270\260.js" "b/ES2015(ES6)/Map & WeakMap/1. Map & WeakMap \354\266\224\352\260\200\354\240\225\353\263\264\353\245\274 \353\213\264\354\235\200 \352\260\235\354\262\264\354\240\200\354\236\245\355\225\230\352\270\260.js" similarity index 100% rename from "ES2015(ES6)/8. Map & WeakMap/1. Map & WeakMap \354\266\224\352\260\200\354\240\225\353\263\264\353\245\274 \353\213\264\354\235\200 \352\260\235\354\262\264\354\240\200\354\236\245\355\225\230\352\270\260.js" rename to "ES2015(ES6)/Map & WeakMap/1. Map & WeakMap \354\266\224\352\260\200\354\240\225\353\263\264\353\245\274 \353\213\264\354\235\200 \352\260\235\354\262\264\354\240\200\354\236\245\355\225\230\352\270\260.js" diff --git "a/ES2015(ES6)/8. Map & WeakMap/2. WeakMap \355\201\264\353\236\230\354\212\244 \354\235\270\354\212\244\355\204\264\354\212\244 \353\263\200\354\210\230 \353\263\264\355\230\270\355\225\230\352\270\260.js" "b/ES2015(ES6)/Map & WeakMap/2. WeakMap \355\201\264\353\236\230\354\212\244 \354\235\270\354\212\244\355\204\264\354\212\244 \353\263\200\354\210\230 \353\263\264\355\230\270\355\225\230\352\270\260.js" similarity index 100% rename from "ES2015(ES6)/8. Map & WeakMap/2. WeakMap \355\201\264\353\236\230\354\212\244 \354\235\270\354\212\244\355\204\264\354\212\244 \353\263\200\354\210\230 \353\263\264\355\230\270\355\225\230\352\270\260.js" rename to "ES2015(ES6)/Map & WeakMap/2. WeakMap \355\201\264\353\236\230\354\212\244 \354\235\270\354\212\244\355\204\264\354\212\244 \353\263\200\354\210\230 \353\263\264\355\230\270\355\225\230\352\270\260.js" diff --git a/ES2015(ES6)/Map & WeakMap/README.md b/ES2015(ES6)/Map & WeakMap/README.md new file mode 100644 index 0000000..5edec51 --- /dev/null +++ b/ES2015(ES6)/Map & WeakMap/README.md @@ -0,0 +1,103 @@ +# Map & WeakMap + +## 1. Map & WeakMap 추가정보를 담은 객체 저장하기 + +- 개선해보려고 노력한 STL +- `Array` -> set, weakSet +- `Object` -> map, weakMap +- __map은 key / value__ + +**WeakMap** + +```javascript + let wm = new WeakMap(); + let myfun = function(){}; + + // 이 함수가 얼마나 실행됐지?를 알려고 할 때...? count + wm.set(myfun, 0); + + // out: function => 0 + console.log(wm); + + let count = 0; + for(let i = 0; i < 10; i++) { + count = wm.get(myfun); // get value + count++; + wm.set(myfun, count); + } + + // console.log(wm); + // out: 10 + console.log(wm.get(myfun)); + + // garbageCollector + myfun = null; + // out: undefined + console.log(wm.get(myfun)); + // out: false + console.log(wm.has(myfun)); +``` + +## 2. WeakMap 클래스 인스턴스 변수 보호하기 + +### 1. 객체 생성 + +- private variable create + +```javascript + function Area(height, width){ + this.height = height; + this.width = width; + } + + Area.prototype.getArea = function() { + return this.height * this.width; + } + + let myarea = new Area(10, 20); + console.log(myarea.getArea()); + console.log(myarea.height); // 출력이 된다... +``` + +```javascript + const obj = {}; + function Area3(height, width){ + obj['height'] = height; + obj['width'] = width; + } + Area3.prototype.getArea = function() { + return obj.height * obj.width; + } + let myarea3 = new Area3(10, 20); + + console.log(obj); + // garbageCollector 대상이 아니다. + // 계속 쌓여 나감... (Warning) + myarea = null; + console.log(obj); +``` + +### 2. 개선 방향 + +__wm 장점 부각__ + +```javascript + const wm = new WeakMap(); + function Area2(height, width){ + // 단점은 클래스 밖에 전역변수를 보관하고 있다... + wm.set(this, {height, width}); + } + Area2.prototype.getArea = function() { + const {height, width} = wm.get(this); + return height * width; + } + let myarea2 = new Area2(10, 20); + console.log(myarea2.getArea()); + console.log(myarea2.height); // undefined + // 전역변수 -> weakMap 활용 !! + console.log(wm.has(myarea2)); + // out: true + myarea2 = null; + console.log(wm.has(myarea2)); + // out: false +``` \ No newline at end of file diff --git a/ES2015(ES6)/13. module/default_module.js b/ES2015(ES6)/Module/default_module.js similarity index 100% rename from ES2015(ES6)/13. module/default_module.js rename to ES2015(ES6)/Module/default_module.js diff --git a/ES2015(ES6)/13. module/index.html b/ES2015(ES6)/Module/index.html similarity index 84% rename from ES2015(ES6)/13. module/index.html rename to ES2015(ES6)/Module/index.html index b1bc27a..01a325a 100644 --- a/ES2015(ES6)/13. module/index.html +++ b/ES2015(ES6)/Module/index.html @@ -8,6 +8,6 @@ Hello world!!! - +