├── .gitignore ├── ADVANCE ├── SECTION01 │ └── readme.md ├── SECTION02 │ ├── function.js │ └── readme.md ├── SECTION03 │ ├── log.js │ └── readme.md ├── SECTION04 │ ├── binding.js │ ├── readme.md │ └── scope.js ├── SECTION05 │ ├── readme.md │ ├── test.js │ └── this.js ├── SECTION06 │ ├── closer.js │ └── readme.md ├── image │ └── executingContext.png └── readme.md ├── BASIC ├── CallStack.html ├── Error.html ├── SECTION01 │ ├── readme.md │ └── typeof.js ├── SECTION02 │ └── readme.md ├── SECTION03 │ ├── homework.js │ ├── homework2.js │ └── readme.md ├── SECTION04 │ └── readme.md ├── SECTION05 │ └── readme.md ├── SECTION06 │ └── readme.md ├── SECTION07 │ └── readme.md ├── SECTION08 │ ├── readme.md │ └── string.js ├── SECTION09 │ └── readme.md ├── SECTION10 │ └── readme.md ├── SECTION11 │ ├── endecode.js │ └── readme.md ├── SECTION12 │ ├── readme.md │ └── test.js ├── SECTION13 │ └── readme.md ├── SECTION14 │ └── readme.md ├── SECTION15 │ ├── parse.js │ └── readme.md ├── chapter2.js ├── chapter3.js ├── ex.js ├── public │ ├── Async_Sync.png │ ├── async.png │ ├── async2.png │ ├── http.png │ ├── polymorphism.png │ ├── promise.png │ ├── url.png │ └── www.png └── readme.md ├── DEEPDIVE ├── .gitignore ├── MDN.js ├── ajax.html ├── callback.html ├── callbackhell.html ├── captureBubble.html ├── closure.js ├── debounce.html ├── error.js ├── event.html ├── event2.html ├── eventDelegation.html ├── evntloop.html ├── ex.html ├── ex.js ├── ex2.html ├── ex3.html ├── fetch.html ├── fetchResponse.html ├── gitFetch.html ├── images │ ├── 1.jpg │ ├── 11_1.jpg │ ├── 11_2.jpg │ ├── 11_3.jpg │ ├── 11_4.jpg │ ├── 11_7.jpg │ ├── 11_8.jpg │ ├── 11_9.jpg │ ├── 12_1.jpg │ ├── 12_2.jpg │ ├── 12_5.jpg │ ├── 12_6.jpg │ ├── 12_7.jpg │ ├── 12_8.jpg │ ├── 13_1.jpg │ ├── 13_2.jpg │ ├── 13_3.jpg │ ├── 15_3.jpg │ ├── 19_1.jpg │ ├── 19_10.png │ ├── 19_11.png │ ├── 19_2.jpg │ ├── 19_9.png │ ├── 25_1.jpg │ ├── 25_2.jpg │ ├── 26.jpg │ ├── 26_2.jpg │ ├── 27.jpg │ ├── 27_2.jpg │ ├── 28.jpg │ ├── 29_1.jpg │ ├── 29_2.jpg │ ├── 30_1.JPG │ ├── 30_10.JPG │ ├── 30_11.JPG │ ├── 30_12.JPG │ ├── 30_13.JPG │ ├── 30_2.JPG │ ├── 30_3.JPG │ ├── 30_4.JPG │ ├── 30_5.JPG │ ├── 30_6.JPG │ ├── 30_7.JPG │ ├── 30_8.JPG │ ├── 30_9.JPG │ ├── 31_1.JPG │ ├── 31_2.JPG │ ├── 31_3.JPG │ ├── 31_4.JPG │ ├── 31_5.JPG │ ├── 32_1.png │ ├── 32_2.png │ ├── 33_1.jpg │ ├── 33_2.jpg │ ├── 33_3.jpg │ ├── 33_4.jpg │ ├── 34_1.png │ ├── 35_1.jpg │ ├── 35_10.JPG │ ├── 35_11.JPG │ ├── 35_2.jpg │ ├── 35_3.jpg │ ├── 35_4.jpeg │ ├── 35_5.JPG │ ├── 35_7.JPG │ ├── 35_8.JPG │ ├── 35_9.JPG │ ├── 36_1.jpg │ ├── 36_10.png │ ├── 36_11.png │ ├── 36_2.jpg │ ├── 36_3.JPG │ ├── 36_4.JPG │ ├── 36_5.png │ ├── 36_6.png │ ├── 36_7.jpg │ ├── 36_8.png │ ├── 36_9.png │ ├── 37_1.png │ ├── 37_2.png │ ├── 37_3.png │ ├── 37_4.png │ ├── 37_5.png │ ├── 37_6.jpg │ ├── 38_1.png │ ├── 38_2.png │ ├── 39_1.jpg │ ├── 39_2.jpg │ ├── 39_3.jpg │ ├── 39_4.jpg │ ├── 39_5.jpg │ ├── 40_1.jpg │ ├── 40_2.jpg │ ├── 40_3.jpg │ ├── 40_4.png │ ├── 41_1.jpg │ ├── 41_2.png │ ├── 41_3.png │ ├── 41_4.png │ ├── 41_5.png │ ├── 41_6.gif │ ├── 42_1.png │ ├── 4_9.jpg │ ├── 5_2.jpg │ ├── async.gif │ ├── closure1.png │ ├── closure2.png │ ├── closure3.png │ ├── coca.png │ ├── debounce.gif │ ├── debounce2.gif │ ├── delete.gif │ ├── dir.png │ ├── get.gif │ ├── get_one.gif │ ├── gocha1.jpg │ ├── gocha2.jpg │ ├── loopResult.gif │ ├── memory.jpg │ ├── memory2.jpg │ ├── memory3.jpg │ ├── nonSleep.gif │ ├── patch.gif │ ├── pepsi.png │ ├── post.gif │ ├── proto21.jpg │ ├── proto22.jpg │ ├── proto23.jpg │ ├── proto24.jpg │ ├── put.gif │ ├── sleep.gif │ ├── throttle.gif │ ├── throttle2.gif │ ├── timer.gif │ └── window_console.png ├── loop.js ├── mouse.html ├── nodeFetch.html ├── promise.html ├── readme.md ├── readme2.md ├── readme3.md ├── readme4.md ├── readme5.md ├── readme6.md ├── readme7.md ├── readme8.md ├── scope.html ├── serial.js ├── taskQueue.html ├── throttle.html ├── time.js ├── timer.html └── timer.js ├── ES6 ├── SECTION01 │ └── readme.md ├── SECTION02 │ ├── arrow.js │ └── readme.md ├── SECTION03 │ └── readme.md ├── SECTION04 │ └── readme.md └── readme.md ├── async ├── callback.js ├── closure.js ├── promise.js └── readme.md ├── esnext-project ├── .gitignore ├── babel.config.json ├── dist │ └── js │ │ ├── bundle.js │ │ ├── bundle.js.map │ │ ├── lib.js │ │ └── main.js ├── index.html ├── package-lock.json ├── package.json ├── src │ └── js │ │ ├── lib.js │ │ └── main.js ├── webpack.config.js └── yarn.lock ├── index.html ├── json-server-exam ├── .gitignore ├── db.json ├── package.json ├── public │ ├── delete.html │ ├── get_All.html │ ├── get_one.html │ ├── patch.html │ ├── post.html │ └── put.html └── yarn.lock └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | /knowledge -------------------------------------------------------------------------------- /ADVANCE/SECTION01/readme.md: -------------------------------------------------------------------------------- 1 | ## 엔진 관점의 핵심 키워드 2 | 3 | Execution context (묶어서 실행) 4 | 5 | Identifier Resolution (식별자 해결) 6 | 7 | ## Execution Context 형태 8 | 9 | Context는 묶음, 하나의 덩어리라고 본다.
10 | 11 | executingContext 12 | 13 | book() 함수가 호출되면 14 | 15 | - function show()와 만나면서 show Function 오브젝트를 생성한다 16 | - show의 [[scope]]에 스코프 설정 17 | - [[scope]]는 JS엔진에 의해 만들어지는 스코프(범위)를 의미한다. 18 | 19 |
20 | 21 | show() 함수가 호출되면 EC(Execute Context) 환경을 구축한다. 22 | 23 | - LEC, VEC, TBC 생성 첨부 24 | - LEC에 ER, OLER 첨부 25 | - ER에 DER, OER 첨부 26 | 27 | 28 | 29 | DER에 show()의 변수, 함수를 기록한다
30 | OLER에 show의 [[scope]]를 설정
31 | this 바인딩 컴포넌트에 this 참조 설정 32 | 33 | ```js 34 | function book() { 35 | // 2. Function 오브젝트에 의해 book(){....} 내부의 코드들은 모두 같은 스코프에 존재하게 됨 (show() 함수가 속해있는 영역) 36 | // 3. 따라서 point를 getPoint() 함수에서 참조하여 사용할 수 있게 됨 37 | var point = 123; 38 | function show() { 39 | // 1. function 키워드를 만나면서 Function 오브젝트를 생성 40 | var title = "JS책"; 41 | // getPoint(); 4. 주석처리 되어 있지만, 같은 스코프에 있기 때문에 getPoint() 함수를 show() 함수 내부에서 사용할 수 있다. 42 | // this.bookAmount; 43 | } 44 | function getPoint() { 45 | return point; 46 | } 47 | show(); 48 | } 49 | book(); 50 | 51 | /* 52 | 1. 처음 JS 엔진은 해당 코드(boook())가 호출되기 전까지는 function book(){...} 함수가 선언되었다는 것만 인지하고 값을 넣지 않는다. 53 | 2. book() 함수가 호출되었을 때 비로소 function book(){...} 안의 코드를 읽기 시작한다. 54 | 3. point 변수를 선언한다. 55 | 4. function 키워드를 만나므로 show()라는 이름은 가진 Function 오브젝트를 생성한다. 56 | 5. Function 오브젝트를 생성했기 때문에, 해당 함수가 있는 { ... } 코드를 스코프로 설정한다. 57 | 6. 따라서 같은 스코프 안에 있는 함수와 변수는 불러와 사용할 수 있게 되었다. 58 | */ 59 | ``` 60 | 61 |
62 | 63 | ## 식별자 해결, 스코프 용도 64 | 65 | ### 식별자 해결 66 | 67 | Identifier Resolution 68 | 69 | ```js 70 | var point = 100; 71 | function getPoint(){ 72 | var point = 200; 73 | return point; 74 | }; 75 | var result = getPoint(); 76 | console.log(result); 77 | 78 | >>> 79 | 200 80 | 81 | /* 82 | var point = 100; 이 있음에도 result 값이 200을 반환하는 이유는 83 | 1. getPoint() 함수를 호출함에 따라 생긴 Function 오브젝트에 속해있는 스코프를 먼저 찾기 때문이다. 84 | 2. var point = 200; 이 같은 스코프 내인 getPoint(){ ... } 내부에 설정되지 않았다면 100을 뽑았을 것이다. 85 | */ 86 | ``` 87 | 88 | - 사용할 변수/함수를 결정하는 것 89 | - 예 : point 변수 90 | - 신속, 정확한 검색을 위해 스코프 필요 91 | 92 |
93 | 스코프에서 이름을 찾기 위해 94 | - 스코프에 이름을 설정 95 | - 값은 변경되지만, 이름은 변경되지 않음 [key : value] 중 value만 변경 가능 96 | - 식별자 해결 대상은 이름 97 | 98 | ### 스코프 용도 99 | 100 | 식별자 해결을 위한 수단, 방법 101 | 102 | - 스코프가 목적이 아니다 103 | > getPoint()가 호출되어 해당 함수를 통해 구하고자 하는 값인, point를 반환하기 위해 스코프를 설정한 것임 104 | 105 | 식별자가 유일하면 106 | 107 | - 스코프는 필요하지 않음 108 | - 하지만, 유일하게 작성하는 것은 불가능 109 | - 그래서 스코프 필요 110 | 111 | ## scope chain, 스펙의 scope chain 사용 (x) 112 | 113 | ## Lexical Environment 114 | 115 | ### 정적 환경 116 | 117 | ```js 118 | var point = 123; 119 | function book() { 120 | function getPoint() { 121 | return point; 122 | }; 123 | } 124 | book(); 125 | >>> 126 | 123 127 | ``` 128 | 129 | function 키워드를 만나면 130 | 131 | - Function 오브젝트를 생성하고 132 | - 스코프를 FO(Function Object)의 [[Scope]]에 설정 133 | - 이것은 함수 밖의 스코프가 설정되는 것 134 | 135 | 이 시점에서 스코프가 결정됨 136 | 137 | - 이것이 Lexical Environment 138 | - 동적이 아닌 수동적(정적)으로 결정된다는 의미 139 | 140 | ## Node.js 코드 형태 141 | 142 | 서버 프로그램 고려 사항 143 | 144 | - 동시 접속자가 1만명 이상인가? 145 | 146 | JS는 Single thread 147 | 148 | - 싱글 스레드란 하나의 함수가 호출되어 끝날 때까지 다른 함수가 호출되지 않음을 의미 149 | - 따라서 순차적(동기적) 처리를 한다. 150 | 151 | Node.js에서 JS는 비동기 처리
152 | 153 | Contetxt 형태가 효율성이 높음 154 | 155 | - ES5의 실행 콘텍스트는 Context 형태 156 | 157 | 실행 콘텍스트에 158 | 159 | - 최적화된 형태로 코드를 작성해야 하며 160 | - 이를 위해 엔진 처리를 이해할 필요가 있다. 161 | 162 |
163 | 다음으로 가기 164 | -------------------------------------------------------------------------------- /ADVANCE/SECTION02/function.js: -------------------------------------------------------------------------------- 1 | // function book() { 2 | // debugger; 3 | // console.log(title); 4 | // console.log(readBook); 5 | // console.log(getBook); 6 | 7 | // var title = 'JS BOOK'; 8 | // function getBook() { 9 | // return title; 10 | // } 11 | // var readBook = function () {}; 12 | // getBook(); 13 | // } 14 | 15 | // book(); 16 | 17 | function book() { 18 | debugger; 19 | 20 | var title = 'JS BOOK'; 21 | const getBook = function () { 22 | return title; 23 | }; 24 | const readBook = function () {}; 25 | getBook(); 26 | 27 | console.log(title); 28 | console.log(readBook); 29 | console.log(getBook); 30 | } 31 | 32 | book(); 33 | -------------------------------------------------------------------------------- /ADVANCE/SECTION02/readme.md: -------------------------------------------------------------------------------- 1 | ## Function 오브젝트 2 | 3 | ### 생각의 전환 4 | 5 | 함수가 호출되면 엔진은 6 | 7 | - 함수의 변수와 함수를 {name : value} 형태로 실행 환경을 설정하고 함수 코드를 실행합니다. 8 | 9 | {name: value} 형태로 생각을 전환해야 10 | 11 | - JS의 아키텍처와 메커니즘을 쉽게 이해할 수 있습니다. 12 | 13 | function(){} 코드를 보면 14 | 15 | - 함수의 변수와 함수가 {name: value} 형태로 연상되어야 합니다. 16 | - 프로퍼티 관점으로 보아라 17 | 18 | ```js 19 | function book() { 20 | var title = 'JS BOOk'; 21 | return title; 22 | } 23 | 24 | var result = book(); 25 | console.log(result); 26 | 27 | >>> 28 | JS BOOK 29 | /* 30 | {title : 'JS BOOK'} 31 | {return : title} 32 | */ 33 | ``` 34 | 35 |
36 | 37 | ## function 오브젝트 생성 과정 38 | 39 | ```js 40 | sports = { 41 | prototype: { 42 | constructor: sports 43 | __proto__: { 44 | } 45 | } 46 | } 47 | ``` 48 | 49 | 1. function sports(){...} 형태에서 function 키워드를 만나면 50 | 2. Function 오브젝트를 생성하고 51 | > {sports: {...}} 52 | > sports는 function 오브젝트 이름 53 | > 오브젝트{...}에 프로퍼티가 없는 상태 54 | > sports() 함수가 호출되어야 안의 코드를 실행하고 오브젝트를 채웁니다 55 | 3. sports 오브젝트에 prototype 오브젝트 첨부 56 | 4. prototype에 constructor(생상자) 프로퍼티 첨부 57 | > prototype.constructor가 sports 오브젝트 참조 58 | 5. prototype에 `__proto__` 오브젝트 첨부 59 | 60 | ```js 61 | sports = { 62 | arguments: {}, 63 | caller: {}, 64 | length: 0, 65 | name: "sports", 66 | prototype: { 67 | constructor: sports, 68 | __proto__: Object.prototype, 69 | //6. prototype.`__proto__`에 첨부, , Object 오브젝트의 프로토타입에 빌트인 된 6개의 메소드들은 여기에 들어있음 70 | }, 71 | __proto__: Function.prototype, 72 | /* 73 | 7. sports 오브젝트에 __proto__ 빌트인 Function 오브젝트의 프로토타입에 연결된 3개의 메소드 (bind, apply, call)는 여기에 들어 있음 74 | 75 | */ 76 | }; 77 | ``` 78 | 79 | 6. 빌트인 Object.prototype의 메소드로 80 | - Object 인스턴스를 생성하여 81 | - prototype.`__proto__`에 첨부 82 | 7. sports 오브젝트에 `__proto__` 오브젝트 첨부 83 | - sports.`__proto__` 구조가 됩니다. 84 | 8. sports 오브젝트가 function 이기 때문에, Function의 프로토타입이 가지는 빌트인 메소드를 생성했지만 85 | - Array라면 Array의 인스턴스가 연결되고 86 | - String이라면 String 인스턴스가 연결됩니다. 87 | > 오브젝트의 타입에 따라 연결되는 인스턴스가 달라집니다. 88 | 89 |
90 | 91 | ## JS 엔진 해석 방법 92 | 93 | ### 엔진 해석 순서 94 | 95 | 자바스크립트는 스크립팅 언어입니다 96 | 97 | - 스크립팅 언어는 작성된 코드를 위에서부터 한 줄씩 해석하고 실행 98 | - 하지만, 자바스크립트는 조금 차이가 있다. 99 | 100 | 중간에 있는 코드가 먼저 해석될 수도 있음
101 | 첫 번째, 함수 선언문을 작성한 순서대로 해석
102 | 103 | > function sports(){...}; 104 | 105 | 두 번째, 표현식을 순서대로 해석
106 | 107 | > var sports = function(){...}; 108 | 109 | ```js 110 | case 1: 111 | function book() { 112 | debugger; 113 | log(title); 114 | log(readBook); 115 | log(getBook); 116 | 117 | var title = 'JS BOOK'; 118 | function getBook() { 119 | return title; 120 | } 121 | var readBook = function () {}; 122 | getBook(); 123 | } 124 | 125 | book(); 126 | 127 | >>> 128 | undefined 129 | undefined 130 | function getBook(){return title}; 131 | 132 | /* 133 | book() 함수를 호출 했을 때, 134 | 135 | 1. 함수 선언문 해석 (1바퀴) 136 | - function getBook(){}; 137 | 2. 변수 초기화 (2바퀴) 138 | - var title = undefined; 139 | - var readBook = undefined; 140 | 3. 코드 실행 (3바퀴) 141 | - var title = "JS BOOk"; 142 | - var readBook = function(){}; 143 | - getBook(); 144 | */ 145 | ``` 146 | 147 | ```js 148 | case 2: 149 | 150 | function book() { 151 | debugger; 152 | console.log(title); 153 | console.log(readBook); 154 | console.log(getBook); 155 | 156 | var title = 'JS BOOK'; 157 | function getBook() { 158 | return title; 159 | } 160 | function readBook() {} 161 | getBook(); 162 | } 163 | 164 | book(); 165 | >>> 166 | undefined 167 | [Function: readBook] 168 | [Function: getBook] 169 | 170 | /* 171 | 함수 선언식으로 작성할 경우 readBook() 함수 또한 호이스팅에 의해 올라와 undefined가 아닌, 해당 함수를 반환하는 것으로 출력된다. 172 | */ 173 | ``` 174 | 175 | ```js 176 | function book() { 177 | debugger; 178 | 179 | var title = 'JS BOOK'; 180 | const getBook = function () { 181 | return title; 182 | }; 183 | const readBook() = function{} 184 | getBook(); 185 | 186 | console.log(title); 187 | console.log(readBook); 188 | console.log(getBook); 189 | } 190 | 191 | book(); 192 | /* 193 | 함수 표현식으로 작성할 경우 호이스팅이 되지 않으므로, 콘솔 로그를 더 밑에서 선언해줘야 정상적으로 작동한다. 194 | */ 195 | ``` 196 | 197 | ### 함수 선언문 해석 198 | 199 | 1. 마지막 줄에서 book()함수를 호출합니다. 200 | 2. 엔진 제어가 book 함수의 첫 번쨰 줄로 이동합니다. 201 | 3. 함수 안에서 선언문을 찾습니다. 202 | 4. function getBook(){}이 함수 선언문이므로 function 오브젝트를 생성합니다. 203 | 5. 더 이상 함수 선언문이 없으므로 함수의 첫 번째 줄로 이동합니다. 204 | 205 | ### 변수 초기화 206 | 207 | 6. debugger를 실행하지 않습니다. 208 | 7. var title = "JS BOOK"; 209 | 210 | - title 변수에 undefined를 할당합니다 211 | 212 | 8. function getBook(){}은 초기화 했으므로 초기화하지 않습니다. 213 | 9. var readBook = function(){}; 214 | 215 | - readBook 변수에 undefined를 할당합니다. 216 | - 함수 표현식은 변수를 선언만 합니다. 217 | 218 | 10. 여기까지가 초기화 단계이며 다시 함수의 첫 번째 줄로 이동합니다. 219 | 220 | ### 코드 실행 221 | 222 | 11. var title ="JS BOOk"; 223 | 224 | - title 변수에 "JS BOOk"을 할당합니다. 225 | 226 | 12. function getBook(){return title}; 227 | 228 | - 실행이 아닌 선언이므로 다음 줄로 이동 229 | 230 | 13. var readBook = function(){}; 231 | 232 | - function 오브젝트를 생성하여 readBook 변수에 할당 233 | - readBook이 function 오브젝트가 되므로 이제 readBook 함수를 호출할 수 있습니다. 234 | 235 | 14. getBook() 함수를 호출합니다. 236 | 237 |
238 | 239 | ## 호이스팅 240 | 241 | 함수 선언문은 초기화 단계에서 function 오브젝트를 생성하므로 어디에서도 함수를 호출할 수 있습니다.
242 | 함수 앞에서 함수를 호출하는 것을 호이스팅이라고 합니다. 243 | 244 | ```js 245 | var result = book(); 246 | console.log(result); 247 | 248 | function book() { 249 | return '호이스팅'; 250 | } 251 | 252 | >>> 253 | 호이스팅 254 | 255 | /* 256 | JS 엔진은 함수 선언문을 제일 위로 올려 해석하기 때문에 코드 작성을 밑에 해도 오류가 나지 않습니다. 257 | */ 258 | ``` 259 | 260 | 초기화 단계에서 값이 있으면 초기화하지 않습니다. 261 | 262 | ```js 263 | var result = book(); 264 | log(result); 265 | 266 | function book() { 267 | return '호이스팅'; 268 | } 269 | 270 | book = function () { 271 | return '함수 표현식'; 272 | }; 273 | 274 | >>> 275 | 호이스팅 276 | // 오브젝트 안에 정상적인 값 (호이스팅)이 있기 때문에 초기화하지 않았습니다. 277 | ``` 278 | 279 |
280 | 다음으로 가기 281 | -------------------------------------------------------------------------------- /ADVANCE/SECTION03/log.js: -------------------------------------------------------------------------------- 1 | var get = function (one) { 2 | return one; 3 | }; 4 | 5 | console.log(get(77, 100)); 6 | 7 | var get2 = function () { 8 | console.log('arguments 0 번째 인덱스 호출: ' + arguments[0]); 9 | }; 10 | 11 | get2(77); 12 | 13 | var get3 = function () { 14 | console.log('arguments 1 번째 인덱스 호출: ' + arguments[1]); 15 | }; 16 | 17 | get3(77, 100); 18 | -------------------------------------------------------------------------------- /ADVANCE/SECTION03/readme.md: -------------------------------------------------------------------------------- 1 | ## Argument 2 | 3 | ### Arguments 처리 구조 4 | 5 | 파라미터를 {key: value} 형태로 저장 6 | 7 | - 파라미터 수만큼 0부터 인덱스 부여 8 | - key로 사용 9 | - 파라미터로 받은 값을 value에 설정 10 | - {0: param1, 1: param2} 11 | 12 | ```js 13 | function get() { 14 | return arguments; 15 | } 16 | console.log(get('A', 'B')); 17 | 18 | >>> 19 | {0: A, 1: B} 20 | ``` 21 | 22 |
23 | 24 | 이러한 구조를 Array-like라함 25 | 26 | - key 값이 0부터 1씩 증가 27 | - length 프로퍼티가 있어야 함 28 | > for 문으로 돌릴 수 있다. 29 | 30 | ### 엔진의 파라미터 처리 31 | 32 | ```js 33 | var get = function (one) { 34 | return one; 35 | }; 36 | 37 | console.log(get(77, 100)); 38 | >>> 39 | 77 40 | ``` 41 | 42 | 1. get() 함수를 호출하면서 43 | 44 | - 77과 100을 파라미터 값으로 넘겨 줍니다. 45 | 46 | 2. 넘겨받은 값을 함수의 파라미터 이름에 설정 47 | 48 | - one : 77 49 | 50 | 3. Arguments 오브젝트를 생성합니다. 51 | 4. 넘겨받은 파라미터 수를 52 | 53 | - Arguments 오브젝트의 length 프로퍼티에 생성 54 | 55 | 5. 넘겨받은 파라미터 수만큼 반복하면서 56 | 57 | - 0부터 key로 하여 순서대로 파라미터 값을 설정 58 | - {0 : 77}, {1 : 100} 형태 59 | 60 | 6. 함수의 초기화 단계에서 실행 61 | 62 | ```js 63 | var get = function (one) { 64 | return one; 65 | }; 66 | 67 | console.log(get(77, 100)); >>> 77 68 | 69 | var get2 = function () { 70 | console.log('arguments 0 번째 인덱스 호출: ' + arguments[0]); 71 | }; 72 | 73 | get2(77); >>> arguments 0 번째 인덱스 호출: 77 74 | 75 | var get3 = function () { 76 | console.log('arguments 1 번째 인덱스 호출: ' + arguments[1]); 77 | }; 78 | 79 | get3(77, 100); arguments 1 번째 인덱스 호출: 100 80 | ``` 81 | 82 |
83 | 다음으로 가기 84 | -------------------------------------------------------------------------------- /ADVANCE/SECTION04/binding.js: -------------------------------------------------------------------------------- 1 | function book() { 2 | debugger; 3 | var point = 100; 4 | function add() { 5 | point += 200; 6 | } 7 | function get() { 8 | return point; 9 | } 10 | add(); 11 | console.log(get()); 12 | } 13 | 14 | book(); 15 | -------------------------------------------------------------------------------- /ADVANCE/SECTION04/readme.md: -------------------------------------------------------------------------------- 1 | ## 스코프(Scope) 2 | 3 | ### 스코프 목적 4 | 5 | 스코프는 범위, 영역이라는 의미
6 | 7 | 범위를 제한하여 8 | 9 | - 식별자를 해결하려는 것 10 | - 스코프에서 식별자를 해결 11 | 12 | 식별자 해결(Identifier Resolution) 13 | 14 | - 변수 이름, 함수 이름을 찾는 것 15 | - 이때 스코프를 사용 16 | - 이름을 찾게 되면 값을 구할 수 있음 17 | - 크게는 이름을 설정하는 것도 식별자 해결 18 | 19 | 스코프는 식별자 해결을 위한 것 20 | 21 | ### 스코프 설정 22 | 23 | ```js 24 | function book(){ 25 | var point = 123; 26 | functino get(){ 27 | console.log(point); 28 | }; 29 | get(); 30 | }; 31 | book(); 32 | 33 | /* 34 | get 함수가 속한 35 | - var point 36 | - function get(){ ...} 37 | - get(); 38 | 39 | 이 코드의 영역을 스코프로 설정합니다. 40 | */ 41 | ``` 42 | 43 |
44 | 45 | ## 글로벌 스코프 46 | 47 | 글로벌 오브젝트가 글로벌 스코프이다.
48 | 49 | 오브젝트는 개발자 관점으로 오브젝트에 함수와 변수를 작성
50 | 51 | 스코프는 식별자 해결을 위한 것으로 52 | 53 | - 엔진 관점 54 | 55 | 글로벌 스코프는 최상위 스코프 56 | 57 | - 함수에서 보면 최종 스코프 58 | 59 |
60 | 61 | ## 스코프 바인딩 62 | 63 | ### 바인딩이란? 64 | 65 | 구조적으로 결속된 상태로 만드는 것 66 | 67 | - 대상: 프로퍼티 이름 {key : value} 중 key 값 68 | 69 | 바인딩 목적 70 | 71 | - 스코프 설정, 식별자 해결 72 | 73 | 바인딩 시점 구분 74 | 75 | - 정적 바인딩(Lexical, Static Binding) 76 | - 동적 바인딩(Dynamic Binding) 77 | 78 | ### 정적, 동적 바인딩 79 | 80 | 정적 바인딩 81 | 82 | - 초기화 단계에서 바인딩 83 | - 함수 선언문 이름을 바인딩 84 | - 표현식(변수, 함수) 이름을 바인딩 85 | JS는 대부분 정적 바인딩
86 | 87 | 동적(다이나믹) 바인딩 88 | 89 | - 실행할 때 바인딩 90 | - eval(), with 문 91 | 92 | ### 바인딩 시점의 중요성 93 | 94 | 바인딩할 때 스코프가 결정되기 때문에 바인딩 시점이 중요하다
95 | function 오브젝트 생성 지점에 스코프 결정 96 | 97 | - 스코프를 function 오브젝트의 [[Scope]]에 설정 98 | - 스코프가 변경되지 않음 99 | 100 | 함수 안의 모든 함수의 스코프가 같음 101 | 102 | ```js 103 | function book() { 104 | debugger; 105 | var point = 100; 106 | function add() { 107 | point += 200; 108 | } 109 | function get() { 110 | return point; 111 | } 112 | add(); 113 | console.log(get()); 114 | } 115 | 116 | book(); 117 | >>> 118 | 300 119 | /* 120 | add() 함수를 만드는 시점에 [[Scope]] 를 설정하기 때문에 point 변수를 공유할 수 있게 됨 121 | */ 122 | ``` 123 | 124 |
125 | 다음으로 가기 126 | -------------------------------------------------------------------------------- /ADVANCE/SECTION04/scope.js: -------------------------------------------------------------------------------- 1 | var value = 100; 2 | function book() { 3 | var point = 200; 4 | return value; 5 | } 6 | console.log(book()); 7 | 8 | var value = 100; 9 | const book2 = function () { 10 | var point = 200; 11 | return value; 12 | }; 13 | console.log(book2); 14 | -------------------------------------------------------------------------------- /ADVANCE/SECTION05/readme.md: -------------------------------------------------------------------------------- 1 | ## this 2 | 3 | ### this 개요 4 | 5 | 키워드
6 | 7 | `obj.name()` 형태로 호출한 8 | 9 | - 함수(메소드)에서 this로 인스턴스(오브젝트)를 참조 10 | 11 | 실행 콘텍스트의 this 바인딩 컴포넌트에 바인딩 12 | 13 | ### this와 글로벌 오브젝트 14 | 15 | 글로벌 오브젝트에서 this는 글로벌 오브젝트 참조
16 | 17 | this와 window 오브젝트 18 | 19 | > window는 JS에서 만든 것이 아니며 글로벌 오브젝트의 스코프도 아님 20 | > window와 글로벌 오브젝트를 같은 선상에서 사용 21 | 22 |
23 | 24 | 글로벌 오브젝트에 코드 작성 25 | 26 | ```js 27 | case 1: 28 | window.onload = function () { 29 | // 이 안이 아니라 밖에 코드를 작성 30 | }; 31 | 32 | // function과 돌일한 스코프를 가지는 이 부분에 작성 33 | ``` 34 | 35 | 1. this가 window 참조 36 | 37 | ```js 38 | console.log(this === window); 39 | // 값과 타입이 모두 같다는 뜻 40 | >>> true 41 | ``` 42 | 43 | 2. this가 글로벌 변수 사용 44 | 45 | ```js 46 | var value = 100; // value는 글로벌 변수 47 | console.log(this.value); // this를 통해 글로벌 변수 value에 접근함 48 | >>> 49 | 100 50 | ``` 51 | 52 | 3. window로 글로벌 변수 사용 53 | 54 | ```js 55 | var value = 100; 56 | console.log(window.value); 57 | 58 | >>> 59 | 100 60 | 61 | /* 62 | window 오브젝트가 글로벌 오브젝트를 참조하므로, this와 같은 형태로 사용된다. 63 | */ 64 | ``` 65 | 66 | 4. this.value = 100; 형태로 값 할당 67 | 68 | ```js 69 | this.value = 100; 70 | console.log(window.value); 71 | >>> 72 | 100 73 | /* 74 | window 오브젝트와 같이 다른 오브젝트를 마치 내것처럼 사용하는 개념을 'Host 오브젝트'라고 하비다. 75 | DOM 오브젝트도 Host 오브젝트입니다. 76 | */ 77 | ``` 78 | 79 |
80 | 81 | window.onload function 안에 코드를 작성 82 | 83 | ```js 84 | case 2: 85 | window.onload = function () { 86 | // function과 돌일한 스코프를 가지는 이 부분에 작성 87 | }; 88 | ``` 89 | 90 | 1. this가 window 참조 91 | 92 | ```js 93 | window.onload = function () { // window.onload 에서 window를 함수 내부에서 참조 가능하다는 의미 94 | console.log(this === window); 95 | }; 96 | 97 | >>> 98 | true 99 | 100 | /* 101 | onload 도 function 오브젝트이므로, onload 앞에 작성한 window를 this로 참조할 수 있다. 102 | */ 103 | ``` 104 | 105 | 2. this로 지역 변수 사용 106 | 107 | ```js 108 | window.onload = function () { 109 | var value = 100; 110 | console.log(this.value); // console.log(value) 와 같이 onload의 지역변수인 value만 선언했다면 값이 나왔을 것 111 | }; // 하지만 this를 붙인 관계로 window 오브젝트를 참조하였기 때문에 식 밖의 value가 선언되지 않았으므로, undefined 반환 112 | 113 | >>> 114 | undefined 115 | /* 116 | 여기서 this는 window 오브젝트를 참조하고, 117 | value는 onload 함수의 지역변수이다. 118 | 만약 119 | */ 120 | ``` 121 | 122 | 3. this.value = 100; 형태로 값 할당 123 | 124 | ```js 125 | window.onload = function () { 126 | this.value = 100; 127 | console.log(this.value); 128 | }; 129 | 130 | >>> 131 | 100 132 | /* 133 | this.value 로 작성하였으므로 이 this가 window 오브젝트를 참조하여, 100을 출력할 수 있었다. 134 | */ 135 | ``` 136 | 137 |

함수가 되든 이벤트 핸들러 함수가 되든, 함수의 앞에 작성한 오브젝트를 this 객체가 참조한다.

138 | 139 |
140 | 141 |

this 참조 오브젝트

142 | 143 | ```js 144 | var book = { 145 | point: 100, 146 | member: { 147 | point: 200, 148 | get: function () { // get() 내부의 함수에서 사용되는 this는 get() 함수의 바로 위인 member 오브젝트를 참조한다. 149 | console.log(this === book.member); 150 | console.log(this.point); 151 | }, 152 | }, 153 | }; 154 | book.member.get(); 155 | 156 | >>> 157 | true 158 | 200 159 | 160 | /* 161 | 🌟 book.member.get() : get()함수는 this 참조를 member 오브젝트 내의 프로퍼티들을 참조한다. 🌟 162 | get() 내부의 함수에서 사용되는 this는 get() 함수의 자신을 호출한 바로 앞의 오브젝트 (여기서는 member)를 참조한다. 163 | 따라서 member 스코프 내에 존재하는 point에 접근하여 값을 반환할 수 있게 되었다. 164 | */ 165 | ``` 166 | 167 |

정리 시간

168 | 169 | ```js 170 | function getTitle() { 171 | console.log('HTML BOOK'); 172 | } 173 | var book = function () { 174 | function getTitlte() { 175 | console.log('JS BOOK'); 176 | } 177 | this.getTitle(); 178 | getTitle(); 179 | }; 180 | book(); 181 | 182 | >>> 183 | HTML BOOK 184 | JS BOOK 185 | 186 | /* 187 | 1. book() 호출, book() 함수에 오브젝트가 없기 때문에 this는 window를 참조 188 | 2. this.getTitle() 호출시, window.getTitle()과 동일하기 때문에 >> HTML BOOK 출력 189 | 3. getTilte() 호출시, 현재 실행 영역에서 선언적 환경 레코드가 있는 function getTilte()를 먼저 호출 >> JS BOOK 출력 190 | */ 191 | ``` 192 | 193 |
194 | 195 |
196 | 다음으로 가기 197 | -------------------------------------------------------------------------------- /ADVANCE/SECTION05/test.js: -------------------------------------------------------------------------------- 1 | var book = { 2 | point: 100, 3 | member: { 4 | point: 200, 5 | get: function () { 6 | console.log(this === book.member); 7 | console.log(this.point); 8 | }, 9 | }, 10 | }; 11 | book.member.get(); 12 | -------------------------------------------------------------------------------- /ADVANCE/SECTION05/this.js: -------------------------------------------------------------------------------- 1 | /* 2 | this의 값은 함수를 '호출하는 방법'에 의해 결정된다. (선언이 아닌 호출될 때) 3 | 4 | 호출한 놈 === 객체 5 | (this) 6 | */ 7 | 8 | var someone = { 9 | name: "Junhee Lee", 10 | whoAmI: function () { 11 | console.log(this); 12 | }, 13 | }; 14 | 15 | someone.whoAmI(); 16 | 17 | var what = someone.whoAmI; 18 | what(); 19 | -------------------------------------------------------------------------------- /ADVANCE/SECTION06/closer.js: -------------------------------------------------------------------------------- 1 | var global = "global scope"; 2 | 3 | function outer() { 4 | var a = 10; 5 | var b = "B"; 6 | 7 | function inner() { 8 | var a = 1; 9 | console.log(a); // inner 내부 스코프 10 | console.log(b); // outer 내부, 형제 스코프 11 | console.log(global); // global로 선언됨, 글로벌 스코프 12 | } 13 | inner(); 14 | } 15 | 16 | outer(); 17 | 18 | /* 19 | 클로저 - 함수가 생성된 시점의 스코프 체인을 모두 들고 있는다. 지우지 않고 기억한다. 20 | 21 | 1. outer() 호출 22 | 2. outer function 내부 탐색 inner() 발견, 23 | 3. outer() 함수 내의 inner() 호출 24 | 4. inner() 함수 내부 탐색을 통해 console.log 실행 25 | 5. 이렇게 스크립트가 위에서부터 내려오면서 읽었던 값을 계속 들고 있기 때문에 26 | 6. 최종적으로 inner()함수 내부에서도 그 상위 스코프에 접근하여 값을 투력할 수 있다. 27 | 28 | 29 | */ 30 | -------------------------------------------------------------------------------- /ADVANCE/SECTION06/readme.md: -------------------------------------------------------------------------------- 1 | ## 논리적 정리 2 | 3 | ### 프로퍼티 연동 방지 4 | 5 | 1. Object에 Object를 할당하면 프로퍼티 값이 연동됩니다. 6 | 7 | ```js 8 | var origin = { member: 100 }; 9 | var dup = origin; 10 | dup.member = 200; 11 | console.log(origin.member); 12 | 13 | >>> 14 | 200 15 | 16 | 17 | /* 18 | 오브젝트를 할당하면 값을 공유하는 성질 19 | */ 20 | ``` 21 | 22 | 2. 배열도 마찬가지로 연동됩니다. 23 | 24 | ```js 25 | var origin = [1, 2, 3]; 26 | var dup = origin; 27 | dup[1] = 200; 28 | console.log(origin); 29 | 30 | >>> 31 | [1, 200, 3] 32 | /* 33 | 배열도 마찬가지로 배열을 할당하면 값을 공유(연동)합니다. 34 | */ 35 | ``` 36 | 37 | 3. 연동 방지 : 프로퍼티 단위로 할당 38 | 39 | ```js 40 | var origin = { member: 100 }; 41 | var dup = {}; 42 | for (var name in origin) { 43 | dup[name] = origin[name]; 44 | } 45 | dup.member = 200; 46 | console.log(origin.member); 47 | console.log(dup.member); 48 | 49 | >>> 50 | 100 51 | 200 52 | ``` 53 | 54 |
55 | 56 | ## 클로저 57 | 58 | function 오브젝트를 생성할 때 함수가 속한 스코프를 [[Scope]]에 설정하고
59 | 함수가 호출되었을 때 [[Scope]]의 프로퍼티를 사용하는 메커니즘
60 | [[Scope]]의 설정과 사용 방법을 이해하면 클로저는 단지 논리적인 설명이다 61 | 62 | ### 클로저 논리 전개 63 | 64 | ```js 65 | function book() { 66 | var point = 100; 67 | var getPoint = function (params) { 68 | point = point + param; 69 | return point; 70 | }; 71 | return getPoint; 72 | } 73 | var obj = book(); 74 | console.log(obj(200)); 75 | 76 | >>> 77 | 300 78 | ``` 79 | 80 |
81 | 처음으로 가기 82 | -------------------------------------------------------------------------------- /ADVANCE/image/executingContext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/ADVANCE/image/executingContext.png -------------------------------------------------------------------------------- /ADVANCE/readme.md: -------------------------------------------------------------------------------- 1 | # 🌟자바스크립트 개념 정리하기 (중고급)🌟 2 | 3 | ### 👉🏼 섹션 1, JS 엔진 관점의 핵심키워드 바로가기
4 | 5 | ### 👉🏼 섹션 2, JS 코드 처리 바로가기
6 | 7 | ### 👉🏼 섹션 3, Arguments 바로가기
8 | 9 | ### 👉🏼 섹션 4, Scope 바로가기
10 | 11 | ### 👉🏼 섹션 5, this 바로가기
12 | 13 | ### 👉🏼 섹션 6, 클로저 바로가기
14 | -------------------------------------------------------------------------------- /BASIC/CallStack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 28 | Call Stack 29 | 30 | 31 |
32 | 위와 같은 상황에서 에러는 어디서 먼저 발생할까요?
33 | Call Stack 에 대한 개념이 잡혀있다면 어렵지 않은 문제입니다. 34 |
35 | 36 | -------------------------------------------------------------------------------- /BASIC/Error.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 오류 전파 8 | 30 | 31 | 32 |

오류 전파

33 | 34 | -------------------------------------------------------------------------------- /BASIC/SECTION01/readme.md: -------------------------------------------------------------------------------- 1 | # SECTION 1, 기본 문법 2 | 3 | ## 🌟 문장 4 | 5 | ### Statement 6 | 7 | JS 코드 실행 단위
8 | 세미콜론 (;) 까지 하나의 문장
9 | var book = "책";
10 | 11 | ### 문장 시작 위치 12 | 13 | 위치 제약 없음
14 | 들여쓰기: 일반적으로 2칸, 4칸
15 | 16 |
17 | 18 | ## 🌟 변수 19 | 20 | ### Variable 21 | 22 | 값을 저장하는 영역 23 | 24 | ### 변수 사용 목적 25 | 26 | 변수에 저장된 값의 재사용 27 | 28 | ### 변수 선언 방법 29 | 30 | ```js 31 | var book; 32 | ``` 33 | 34 | ### 값을 변수에 할당하는 방법 35 | 36 | ```js 37 | var book = '책'; 38 | 39 | >> '=' 오른쪽의 값(책)을 왼쪽 변수(book)에 할당 40 | >> book 변수를 통해 '책'이라는 값을 재사용 41 | ``` 42 | 43 | ## 🌟 데이터 타입 44 | 45 | ### 데이터 타입 형태 46 | 47 | ```js 48 | 숫자 타입 : var value = 123; 49 | 문자 타입 : var value = "sports"; 50 | ``` 51 | 52 | ### typeof 연산자 53 | 54 | 데이터(값) 타입 변환
55 | typeof value에 데이터를 작성
56 | 57 | ### 키워드 (Keyword) 58 | 59 | 특별한 기능을 가진 단어
60 | 61 | ### 데이터 타입을 자료형이라고도 부름 62 | 63 | ### 데이터는 타입을 가짐 64 | 65 | JS는 데이터를 기준으로 타입을 결정
66 | 타입을 먼저 선언하고 타입에 맞는 데이터를 할당하지 않음
67 | 68 | 69 | 70 | ## 🌟 Number 타입, String 타입 71 | 72 | ### 언어 타입과 스펙 타입 73 | 74 | #### 언어 타입 75 | 76 | JS 프로그램에서 사용할 수 있는 타입
77 | Undefined, Null, Boolean, String, Number, Object
78 | 79 | #### 스펙(문서)타입 80 | 81 | 언어 알고리즘을 위한 타입으로 JS 프로그램에서 사용 불가
82 | Reference, List, Completion, Property Descriptor, Data Block, ...
83 | 84 | ### Number 타입 85 | 86 | 부호(+, -)를 가진 값
87 | 숫자 값 범위
88 | Number 타입의 특수한 3개 값
89 | 90 | - NaN: Not-a-Number (숫자가 아닙니다.) 91 | - Infinity: 양수 무한대 92 | - -Infinity: 음수 무한대 93 | 94 | ```js 95 | const result = 1 * "A"; 96 | console.log(result); 97 | 98 | ... 99 | 100 | >>> NaN 101 | ``` 102 | 103 | ### String 타입 104 | 105 | 문자 타입
106 | 값을 " " 또는 ' '사이에 작성
107 | 108 | ## 🌟 Undefined 타입, Null 타입 109 | 110 | ### Undefined 타입 111 | 112 | 변수의 디폴트값
113 | 114 | ```js 115 | var point; 116 | console.log(point); 117 | ... 118 | >>> undefined why? 변수를 선언했는데, 변수 안에 값이 들어있지 않기 때문에 119 | ``` 120 | 121 | 변수를 선언만 한 것으로 undefined가 초깃값으로 설정
122 | 변수에 undefined 할당 가능
123 | 124 | ### Null 타입 125 | 126 | null과 undifined 차이 127 | 128 | - undefined는 단지 변수만 선언 129 | 130 | ```js 131 | var point; 132 | ``` 133 | 134 | - null을 할당해야 값이 null이 됨 135 | - null을 선언한다면, 의도적으로 값을 할당한 것으로 코드를 수행한 것이 된다. 136 | 137 | ```js 138 | var point = null; 139 | console.log(point); 140 | ... 141 | >>> null why? 변수 point에 null이라는 값을 선언했음 142 | ``` 143 | 144 | ## 🌟 Boolean 타입, Object 타입 145 | 146 | ### Boolean 타입 147 | 148 | 불리언 타입
149 | 150 | - 값: true, false 151 | 152 | ### Object 타입 153 | 154 | 오브젝트 타입
155 | 156 | - 오브젝트 형태 157 | ```js 158 | { 159 | name: value; 160 | } 161 | 형태; 162 | ``` 163 | - 프로퍼티(property) 164 | 165 | ```js 166 | {키 : 값} 으로 구성된 객체 1개 167 | ``` 168 | 169 | - Object는 프로퍼티의 집합 170 | 171 | ```js 172 | var book = { 173 | title: '책', 174 | page: 223, 175 | }; 176 | 177 | console.log(book); 178 | ... 179 | >>> {title: "책", page: 223} 180 | ``` 181 | 182 |
183 | 다음 섹션으로 184 | -------------------------------------------------------------------------------- /BASIC/SECTION01/typeof.js: -------------------------------------------------------------------------------- 1 | var point = new Number(3); 2 | 3 | console.log(typeof point); 4 | // valueOf()는 빌트인 오브젝트인 Number 오브젝트의 프로토타입 함수 중 하나이다. 5 | /** 6 | * 프로토타입은 new 생성자를 통해 인스턴스를 만들었을 때 Number 객체의 인스턴스(3)를 7 | * 변수 point에 할당하면서 사용이 가능해진다. 8 | * */ 9 | console.log(point.valueOf()); 10 | console.log((StringPoint = point.toString())); 11 | console.log((value = StringPoint + '6')); 12 | 13 | console.log(typeof StringPoint); 14 | 15 | var point2 = null; 16 | 17 | console.log(typeof point2); 18 | -------------------------------------------------------------------------------- /BASIC/SECTION02/readme.md: -------------------------------------------------------------------------------- 1 | # SECTION 2, 연산자 2 | 3 | ## 🌟 연산자 (Operator) 4 | 5 | ### 연산자 6 | 7 | 연산의 사전적 의미 8 | 9 | - 규칙에 따라 계산하여 값을 구함
10 | 11 | 연산자 형태 12 | 13 | - +, -, '\*', /, %
14 | - '>', >=, '<', <=
15 | - ==, !=, ===, !==
16 | - (,), typeof, delete, void
17 | - Instanceof, in new 등
18 | 19 | ### 표현식 20 | 21 | 표현식 형태 22 | 23 | ```js 24 | 1 + 2; 25 | var total = 1 + 2; 26 | var value = total / (2 + 3); 27 | ``` 28 | 29 | "표현식을 평가"한다고 한다.
30 | 표현식을 평가하면 결과가 반환되며, 이를 '평가 결과'라고 한다.
31 | 32 |
33 | 34 | ## 🌟 관계 연산자 35 | 36 | ```js 37 | <,>, <=, >= 연산자 38 | instanceof 연산자 39 | in 연산자 40 | ``` 41 | 42 | instanceof, in 연산자
43 | 44 | - 사전 설명이 필요하므로 관련된 곳에서 다룸 45 | 46 |
47 | 48 | ## 🌟 동등, 부등, 일치, 불일치 연산자 49 | 50 | ### == 연산자 51 | 52 | 동등 연산자
53 | 왼쪽과 오른쪽 값이 같으면 true 다르면 false
54 | 타입은 비교하지 않음
55 | 56 | ```js 57 | console.log(1 == "1"); 58 | 59 | >>> true 60 | 61 | why? 62 | js는 숫자 : 문자 비교일 때 숫자타입으로 변환하여 비교 연산함 63 | 따라서 값이 같기 때문에 true로 결과물 출력 64 | ``` 65 | 66 | ### != 연산자 67 | 68 | 부등 연산자
69 | 왼쪽과 오른쪽 값이 다르면 true 같으면 false
70 | 71 | ### === 연산자 72 | 73 | 일치 연산자
74 | 왼쪽과 오른쪽의 값과 타입이 모두 같으면 true 값 또는 타입이 다르면 false
75 | 76 | ```js 77 | 1 === 1, true 78 | 1 === "1", false 79 | 80 | why? 숫자 : 문자 비교로 타입이 다르므로 일치 연산자에서는 false로 추력됨 81 | 82 | ``` 83 | 84 | ```js 85 | var value; 86 | console.log(value == null); >>> true 87 | console.log(value === null); >>> false 88 | 89 | why? 90 | 변수 value의 상태는 undefined이다. 91 | undifined와 null은 "값"이다. 92 | 일치 연산자로 비교하면 타입이 다르므로 false로 출력된다. 93 | ``` 94 | 95 |
96 | 97 | ## 🌟 조건 연산자 98 | 99 | ### 조건 연산자 100 | 101 | 3항 연산자라고도 한다. 102 | 103 | ```js 104 | exp ? exp - 1 : exp - 2; 105 | ``` 106 | 107 | exp 위치의 표현식을 먼저 평가
108 | 109 | - true 이면 exp-1의 결과를 반환 110 | - false 이면 exp2의 결과를 반환 111 | 112 | exp 표현식 기준이므로 true 라면 뒤에 false 표현식을 건너 뛴다. 113 | 114 |
115 | 116 | 다음 섹션으로 117 | -------------------------------------------------------------------------------- /BASIC/SECTION03/homework.js: -------------------------------------------------------------------------------- 1 | var holSum = 0; 2 | var zakSum = 0; 3 | var resultSum = 0; 4 | 5 | for (var k = 1; k < 51; k++) { 6 | if (k % 2 == 1) { 7 | holSum += k; 8 | } else if (k % 2 == 0) { 9 | zakSum += k; 10 | } 11 | } 12 | console.log('홀수 합계' + holSum); 13 | console.log('짝수 합계' + zakSum); 14 | resultSum = holSum + zakSum; 15 | console.log(resultSum); 16 | -------------------------------------------------------------------------------- /BASIC/SECTION03/homework2.js: -------------------------------------------------------------------------------- 1 | for (var k = 1; k < 5; k++) { 2 | if (k % 2 == 1) { 3 | break; 4 | } 5 | } 6 | console.log(k); 7 | -------------------------------------------------------------------------------- /BASIC/SECTION03/readme.md: -------------------------------------------------------------------------------- 1 | # SECTION 3, 문장 2 | 3 | ## 🌟 문장 (Statement) 4 | 5 | ### 문장 6 | 7 | 형테 : ;(세미콜론)
8 | 문장을 끝나게 하는 역할
9 | 10 | ```js 11 | var book = '책'; 12 | ``` 13 | 14 | ### 화이트 스페이스 15 | 16 | 사람 눈에 보이지 않는 문자
17 | 18 | - enter, space bar, ... 19 | - 가독성을 위한 것 20 | - 문자마다 기능을 갖고 있음 21 | 22 | ### 블록 (중괄호) 23 | 24 | 형태 : { 문장 리스트 opt}
25 | 중괄호 { } 26 | 27 | - 실행 그룹으로 28 | - 블록 안의 모든 문장 실행
29 | 30 | 문장 리스트
31 | 32 | - { } 안의 모든 문장 33 | - 문장 리스트 작성은 선택 ( 필수 x) 34 | 35 |
36 | 37 | ## 🌟 if, debugger 38 | 39 | ### if 40 | 41 | 형태
42 | 43 | - if(표현식) 문장1 44 | - if(표현식) 문장1 else 문장2 45 | 46 | 조건에 따른 처리
47 | 48 | - 먼저 표현식을 평가 49 | - 평가 결과를 true/false로 변환 50 | - true 이면 문장1 실행 51 | - false이면 문장2 실행 52 | 53 | ### debugger 54 | 55 | debugger 위치에서 실행을 멈춥니다. 56 | 57 | - 브라우저의 개발자 도구 창이 열려있을 때만 멈춤 58 | - ES5부터 지원 59 | 60 | ```js 61 | 'use strict'; // 더 강력한 자바스크립트 문법을 지원해줘라 62 | 63 | debugeer; 64 | 65 | var sports = '스포츠'; 66 | console.log(sports); 67 | ``` 68 | 69 |
70 | 71 | ## 🌟 while, do-while 72 | 73 | ### while 74 | 75 | 표현식의 평가 결과가 false가 될 때까지 문장을 반복하여 실행 76 | 77 | ```js 78 | var k = 1; 79 | 80 | while (k < 3) { 81 | console.log(k); 82 | k++; 83 | } 84 | 85 | ... 86 | >>> 1, 2 87 | ``` 88 | 89 | ### do-while 90 | 91 | 처리 방법은 while문과 같지만, do 문을 먼저 실행 92 | 93 | ```js 94 | var k = 0; 95 | do { 96 | console.log('do:', k); 97 | k++; 98 | } while (k < 3); 99 | { 100 | console.log('while:', k); 101 | } 102 | 103 | ... 104 | 105 | >>> 106 | do: 0 107 | do: 1 108 | do: 2 109 | while: 3 110 | ``` 111 | 112 | 평가 결과가 false일 때(k = 3 이 되어 더이상 조건문이 true가 아닐 때), do 문으로 넘어가지 않고, console.log('while')문으로 넘어감 113 | 114 |
115 | 116 | ## 🌟 for 문 117 | 118 | 형태: for(초깃값opt; 비교opt; 증감opt) { 문장 }
119 | 2번째의 비교 표현식의 평가 결과가 true인 동안 문장을 반복 실행
120 | 121 | ```js 122 | for(var k=0; k<2; k++){ 123 | console.log(k); 124 | } 125 | 126 | >>> 127 | 0 128 | 1 129 | ``` 130 | 131 | ### for() 옵션 132 | 133 | 형태: for(초깃값opt; 비교opt; 증감opt) { 문장 }
134 | 형태에서 opt는 생략 가능
135 | 136 | ```js 137 | case1 : 증감 생략 138 | 139 | for(var k =0; k<3){ 140 | console.log(k); 141 | k++; 142 | } 143 | 144 | ... 145 | >>> 146 | 0 147 | 1 148 | 2 149 | 150 | ``` 151 | 152 |
153 | 154 | ## 🌟 break, continue 155 | 156 | ### break 157 | 158 | 형태:
159 | break;
160 | break 식별자;
161 | 162 |
163 | 164 | 반복문 종료
165 | 166 | ```js 167 | for(var k =0; k=5; k++){ 168 | if(k % 2 == 1){ 169 | break; 170 | } 171 | } 172 | console.log(k); 173 | ... 174 | >>> 1 175 | 176 | 1은 조건(2로 나눴을 때 나머지가 1인 수, 홀수)을 만족하는 가장 빠른 정수이다. 177 | ``` 178 | 179 |
180 | for, for~in, while, do~while, switch 문 등에서 사용 181 | 182 | ### continue 183 | 184 | 형태:
185 | continue;
186 | continue 식별자;
187 | 188 |
189 | 190 | 반복문의 처음으로 분기
191 | 192 | ```js 193 | for(var k=0; k<5; k++){ 194 | if(k===2 || k ===3){ 195 | continue; 196 | } 197 | console.log(k); 198 | } 199 | ... 200 | >>> 201 | 0 202 | 1 203 | 4 204 | console.log를 만나지 못하고 반복문으로 되돌아가게 하는 'continue' 205 | ``` 206 | 207 |
208 | 209 | ## 🌟 strict 모드 210 | 211 | 형태: "use strict"
212 | 엄격하게 JS 문법 사용의 선언
213 | 작성한 위치부터 적용
214 | ES5부터 지원 215 | 216 |
217 | 다음 섹션으로 218 | -------------------------------------------------------------------------------- /BASIC/SECTION04/readme.md: -------------------------------------------------------------------------------- 1 | # SECTION 4, 함수 2 | 3 | ## 🌟 함수 (function) 4 | 5 | function
6 | 7 | - 특정 기능을 처리하는 자바스크립트 코드 묶음 8 | 9 | 함수형태
10 | 11 | ```js 12 | CASE1: 함수 선언식 13 | 14 | function book() { 15 | var title = 'JS BOOK'; 16 | } 17 | 18 | 19 | CASE2: 함수 표현식 20 | 21 | var point = function (one, two) { 22 | var total = one + two; 23 | var bonus = total + 100; 24 | }; 25 | ``` 26 | 27 | 함수 표현식과 함수 선언식 차이점 알아보기 28 | 29 |
30 | 31 | - 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다. 32 | - 함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다. 33 | 34 | ### 함수 구성 요소 35 | 36 | function 키워드
37 | 함수 이름
38 | 파라미터 (parameter)
39 | 40 | - 매개 변수, 인자, 아규먼트라고도 부름 41 | - 파라미터 작성은 optional(선택적) 42 | 43 | 함수 Body
44 | 45 | - 중괄호 { ... } 안에 작성한 코드 46 | - 함수 코드, 소스 텍스트로도 부름 47 | - 강좌에서는 함수 코드로 표기 48 | - 함수 코드 작성은 선택 49 | 50 | ### 함수 이름 규칙 51 | 52 | 통용되는 관례를 기준으로 말함
53 | 54 | calculatePoint()처럼 동사로 시작
55 | 56 | - 포인트를 계산한다는 의미 57 | 58 | 두 개 이상의 단어를 사용할 때
59 | 60 | - 두 번째 단어부터 명사 사용 61 | - 명사의 첫 문자를 대문자로 사용 62 | - 낙타등 표기법이라고 부름 63 | 64 | 동사 + 명사 형태로 동적인 모습 65 | 66 |
67 | 68 | ## 🌟 함수 호출 69 | 70 | ### 호출받는 함수 71 | 72 | 함수는 호출되어야 실행됩니다
73 | 호출받는 함수 74 | 75 | - 함수가 호출되었을 때 실행되는 함수 76 | - 함수라고 하면 호출받는 함수를 지칭 77 | 78 | 파라미터 79 | 80 | - 호출한 함수에서 넘겨준 값을 받음 81 | - (one, two)처럼 소괄호() 안에 파라미터 이름 작성 82 | 83 | ```js 84 | function setValue(one, two) { 85 | var total = one + two; 86 | } 87 | 88 | setValue(10, 20); 89 | 90 | ... 91 | setValue(10,20) 함수에 파라미터 두 개(10,20)를 포함한 호출 요청을 보내면 작성된 function setValue(one,two){ ... } 함수를 통해 결과값을 만들어 줍니다. 92 | ``` 93 | 94 | 일반적으로 호출 받는 함수는 위에 작성합니다. 95 | 96 | ### return 97 | 98 | 형태 : return 표현식 opt;
99 | 표현식의 평가 결과 반환
100 | 101 | ```js 102 | function getPoint() { 103 | return 10 * 30; 104 | } 105 | var result = getPoint(); 106 | console.log(result); 107 | ... 108 | 109 | >>> 110 | 300 111 | ``` 112 | 113 | 1. getPoint() 함수 호출 114 | 2. return의 오른쪽 표현식(10\*30)을 평가 115 | 3. 평가 결과 300을 반환 116 | 4. 300을 갖고 getPoint()로 돌아갑니다 117 | 5. 300을 result 변수에 할당합니다. 118 | 119 | return 또는 표현식을 작성하지 않으면 undefined 반환
120 | 121 | ```js 122 | case1: return 또는 표현식을 작성하지 않은 경우 123 | 124 | function getPoint(){}; 125 | 126 | var result = getPoint(); 127 | console.log(typeof result); 128 | 129 | >>> 130 | undefined 131 | ``` 132 | 133 | return과 표현식을 한 줄에 작성
134 | 135 |
136 | 137 | ## 🌟 주석 작성 목적 138 | 139 | 코드가 목적을 달성하기 위한 기능, 시나리오 등을 생각하고 정리하는 것
140 | 코드를 작성하기 전에 우선 먼저 정리한 생각을 주석으로 작성
141 | 주석 작성 기준
142 | 143 | - 코드의 목적, 결과가 미치는 영향을 작성 144 | - 다른 사람이 알 수 있도록 자세하게 작성 145 | 146 |
147 | 148 | 다음 섹션으로 149 | -------------------------------------------------------------------------------- /BASIC/SECTION05/readme.md: -------------------------------------------------------------------------------- 1 | # SECTION 5, 오브젝트 2 | 3 | ## 🌟 프로퍼티(Property) 4 | 5 | Propery 6 | 7 | - {name: value} 형태 8 | 9 | name에 프로퍼티 이름/키를 작성 10 | 11 | - 따옴표 작성 생략 12 | 13 | ```js 14 | var book = { 15 | title: '책', 16 | point: { 17 | ten: 10, 18 | bonus: 200, 19 | promotion: function () {}, 20 | }, 21 | }; 22 | ``` 23 | 24 | value에 JS에서 지원하는 타입 작성 25 | 26 | - {a: 123, b: "ABC", c: true, d: {}} 27 | - {book: function(){...}} 28 | 29 | 오브젝트(Object)를 객체라고 부르지만 30 | 31 | - 뉘앙스가 다르며, 강좌에서는 오브젝트로 표기 32 | - 오브젝트와 객체 구분이 필요할 때, 별도 표기 33 | 34 | 🌟 객체는 실체가 없이 개념만으로 통용될 수 있음
35 | 🌟 하지만, 오브젝트는 반드시 프로퍼티를 가지고 있음 36 | 37 | ### ！🌟 프로퍼티 추가, 변경 🌟！ 38 | 39 | 오브젝트에 프로퍼티 추가, 변경
40 | 41 | 1. var obj = {}; 42 | 2. obj.abc = 123; 43 | 3. obj 오브젝트에 프로퍼티 이름으로 abc가 없으면 abc:123이 추가되고, abc가 있으면 프로퍼티 값이 123으로 변경됨 44 | 45 | 작성 방법
46 | 47 | 1. 점(.)과 프로퍼티 이름 사용 48 | 49 | ```js 50 | var book = {}; 51 | book.title = "JS BOOK"; 52 | book.price = 18900; 53 | 54 | console.log(book); 55 | ... 56 | >>> 57 | { title: JS BOOK, price: 18900 } 58 | 59 | 프로퍼티 형식으로 담겨진 결과물을 확인할 수 있다. 60 | ``` 61 | 62 |
63 | 64 | ### object 프로퍼티 열거 65 | 66 | 오브젝트에서 프로퍼티 값 추출 67 | 68 | ```js 69 | var obj = {book : "책"}; 70 | var value = obj.book; 71 | 72 | console.log(value); 73 | 74 | ... 75 | >>> 76 | 책 77 | ``` 78 | 79 | obj 오브젝트에 프로퍼티 이름인 80 | 81 | - book이 있으면 프로퍼티 값 반환 82 | - book이 없으면 undefined 반환 83 | 84 | ```js 85 | var obj = {book : "책"}; 86 | var value = obj.price; 87 | 88 | console.log(value); 89 | 90 | ... 91 | >>> 92 | undefined 93 | ``` 94 | 95 | ### for ~ in 문 96 | 97 | 오브젝트에서 프로퍼티를 열거(처음부터 끝까지 모두 읽음)
98 | 99 |
100 | 101 | 형태:
102 | for(변수 in 오브젝트) 문장;
103 | for(표현식 in 오브젝트) 문장;
104 | 105 | ```js 106 | var sports = { 107 | soccer: "축구", 108 | baseball: "야구", 109 | }; 110 | for (var item in sports){ 111 | log(item); // {key : value} 중 key에 접근 112 | log(sports[item]); // {key : value} 중 value에 접근 113 | } 114 | 115 | ... 116 | >>> 117 | soccer 118 | 축구 119 | baseball 120 | 야구 121 | ``` 122 | 123 |
124 | 125 | for (var item in sports){...} 126 | 127 | - 프로퍼티 이름이 item에 설정 128 | - sports[item]으로 프로퍼티 값을 구함 129 | - 프로퍼티를 작성한 순서대로 읽혀진다는 것을 보장하지 않음 130 | 131 | 다음 섹션으로 132 | -------------------------------------------------------------------------------- /BASIC/SECTION06/readme.md: -------------------------------------------------------------------------------- 1 | # SECTION 6, 빌트인 2 | 3 | ## 🌟 빌트인(Built-in) 4 | 5 | Built-in이란? 6 | 7 | - 값 타입, 연산자, 오브젝트(object)를 사전에 만들어 놓은 것 8 | > 여기서 오브젝트란 해당 오브젝트가 가지는 프로퍼티와 함수들을 의미한다. 9 | - (JS 코드를 처리하는 영역에) 10 | 11 | 장점 12 | 13 | - 사전 처리를 하지 않고 즉시 사용 14 | - 자바스크립트 특징 15 | 16 | 빌트인 값 타입 17 | 18 | - Undefined, Null, Boolean, Number, String, Object 19 | 20 | 빌트인 연산자 21 | 22 | - +, - , \*, /, %, ++, --, new 등 23 | 24 | ### 빌트인 오브젝트 25 | 26 | 빌트인 Number 오브젝트 27 | 28 | - 123과 같은 숫자, 상수, 지수를 처리하는 오브젝트 29 | - 여기서 오브젝트는 소문자 object 30 | 31 | ### object ? 32 | 33 | - (이미 키 : 값 상태로 만들어져 있음) 34 | - data를 처리하는데 중점을 두고 있다. 35 | 36 | ``` 37 | 빌트인 Number 오브젝트는 38 | Number 처리를 위한 프로퍼티의 집합입니다. 39 | 즉 Number 처리를 위한 오브젝트입니다. 40 | 41 | JS에서 Number 처리를 위한 프로퍼티를 사전에 만들어 제공하므로 42 | Number.length로 1 이라는 정수를 구할수 있으며, 43 | Number.isNaN()으로 함수를 호출할 수 있습니다. 44 | ``` 45 | 46 |
47 | 48 | ## 🌟 빌트인 오브젝트 유형 49 | 50 | 빌트인 오브젝트는 총 11개의 오브젝트가 존재합니다.
51 | 52 | Number 오브젝트
53 | 54 | - 123과 같은 숫자, 상수, 지수 55 |
56 | 57 | String 오브젝트
58 | 59 | - "abc"와 같은 문자열, 분리, 연결 60 |
61 | 62 | Boolean 오브젝트
63 | 64 | - true, false 65 |
66 | 67 | Object 오브젝트
68 | 69 | - {key: value} 형태 70 |
71 | 72 | Array 오브젝트
73 | 74 | - [1, 2, "A", "가나다"] 형태 75 |
76 | 77 | Function 오브젝트
78 | 79 | - function abc(){...} 형태 80 |
81 | 82 | Math 오브젝트
83 | 84 | - abs(), round() 등의 수학 계산 85 |
86 | 87 | Date 오브젝트
88 | 89 | - 연월일, 시분초 90 |
91 | 92 | JSON 오브젝트
93 | 94 | - [{"name" : "value"}] 형태 95 | - 서버와 데이터 송수신에 사용 96 |
97 | 98 | RegExp 오브젝트
99 | 100 | - ^, $와 같은 정규 표현식 101 |
102 | 103 | Global 오브젝트
104 | 105 | - 소스 파일 전체에서 하나만 존재 106 | - 모든 코드에서 공유, 접근 가능 107 | - 전역 객체라고도 하며, 뉘앙스에 차이가 있다 108 |
109 | 110 |
111 | 다음 섹션으로 112 | -------------------------------------------------------------------------------- /BASIC/SECTION07/readme.md: -------------------------------------------------------------------------------- 1 | ## 🌟 Number 오브젝트 2 | 3 | ### Number 오브젝트 4 | 5 | 숫자(123) 처리를 위한 오브젝트
6 | 즉, Number 오브젝트에 7 | 8 | - 숫자 처리를 위한 9 | - 함수와 프로퍼티가 포함되어 있으며 10 | - 함수를 호출하여 숫자 처리를 하게 됩니다. 11 | 12 | 모든 obejct를 잘 다루기 위해서는 빌트인된 함수와 프로퍼티를 잘 사용할 수 있어야 합니다. 13 | 14 | ### 프로퍼티 리스트 15 | 16 | | 이름(수단) | 개요(목적) | 17 | | :--------------: | :------------------------------------------: | 18 | | new Number() | 인스턴스 생성 | 19 | | Number 함수 | 20 | | Number() | 숫자 값으로 변환하여 반환 | 21 | | Number.prototype | | 22 | | constructor | 생성자 | 23 | | toString() | 숫자 값을 문자열로 변환 | 24 | | toLocaleString() | 숫자 값을 지역화 문자로 변환 | 25 | | valueOf() | 프리미티브 값(인스턴스에 설정된 값)으로 반환 | 26 | | toExponential() | 지수 표기로 변환 | 27 | | toFixed() | 고정 소숫점 표기로 변환 | 28 | | toPrecision() | 고정 소숫점 또는 지수 표기로 변환 | 29 | 30 |
31 | 32 | - ( ) , 소괄호가 있는 것은 함수이다. 33 | - ( ) x , 소괄호가 없는 것은 오브젝트입니다. 34 | - 개요(목적)를 기준으로 접근해야 합니다. 35 | - new Number()는 인스턴스를 생성합니다 x (수단을 위한 목적) 36 | - 인스턴스를 생성하기 위해 new Number()를 사용합니다. (목적을 위한 수단) 37 | 38 |
39 | 40 | ## 🌟 Number 타입으로 변환 41 | 42 | ### Number() 43 | 44 | | 구분 | 데이터(값) | 45 | | :------: | :----------------------------: | 46 | | 파라미터 | 변환할 값 opt (opt, 없어도 됨) | 47 | | 반환 | 변환한 값 | 48 | 49 |
50 | 51 | 파라미터 값을 Number 타입으로 변환
52 | 파라미터 값이 String 타입이라도 값이 숫자이면 변환 가능 53 | 54 | ```js 55 | console.log(Number('123') + 200); 56 | 57 | ... 58 | 59 | >>> 60 | 323 61 | ``` 62 | 63 | 숫자로 변환할 수 있으면 변환
64 | 파라미터 값을 작성하지 않으면 0을 반환
65 | 66 | ```js 67 | console.log(Number(0x14)); 68 | console.log(Number(true)); 69 | console.log(Number(null)); 70 | console.log(Number(undefined)); 71 | 72 | ... 73 | >>> 74 | 20 75 | 1 76 | 0 77 | NaN 78 | ``` 79 | 80 |
81 | 82 | ## 🌟 new 연산자 83 | 84 | | 구분 | 데이터(값) | 85 | | :---------: | :-------------: | 86 | | constructor | 생성자 | 87 | | 파라미터 | 값 opt | 88 | | 반환 | 생성한 인스턴스 | 89 | 90 |
91 | 92 | 오브젝트로 인스턴스를 생성하여 반환
93 | 94 | - 원본을 복사하는 개념 95 | - new 연산자를 사용하면 인스턴스 96 | - 코딩 관례로 첫 문자를 대문자로 작성합니다. 97 | 98 | ```js 99 | var obj = new Number(); 100 | log(typeof obj); 101 | 102 | ... 103 | >>> 104 | object 105 | 106 | why? 107 | - new Number()를 통해 만들어진 인스턴스가 obj 변수에 할당됨 108 | ``` 109 | 110 |
111 | 112 | 대문자 Object는 {키 : 값} 형태의 집합입니다.
113 | 소문자 object는 인스턴스입니다.
114 |
115 | 인스턴스 생성 목적 116 | 117 | - 인스턴스마다 값을 갖기 위한 것 118 | - 각 변수마다(obj, obj2) 인스턴스의 파라미터(123, 234)를 통해 값을 저장하기 위함 119 | 120 | ```js 121 | var obj = new Number("123"); 122 | console.log(obj.valueOf()); 123 | var obj2 = new Number("234"); 124 | console.log(obj2.valueOf()); 125 | ... 126 | >>> 127 | 123 128 | 234 129 | ``` 130 | 131 |
132 | 133 | ## 🌟 Number 인스턴스 생성 134 | 135 | ### new Number() 136 | 137 | | 구분 | 데이터(값) | 138 | | :------: | :--------------------: | 139 | | 파라미터 | 값 opt | 140 | | 반환 | 생성한 Number 인스턴스 | 141 | 142 |
143 | 144 | 빌트인 Number 오브젝트로 새로운 Number 인스턴스를 생성 145 | 146 | ```js 147 | // 파라미터 값이 String 타입이여도 Number()함수에 의해 숫자로 저장됩니다. 148 | var obj = new Number("123"); 149 | 150 | console.log(obj); 151 | 152 | >>> 153 | 123 154 | 155 | /* 156 | 1. 새로 생성한 Number 인스턴스가 obj에 할당됩니다. 157 | 158 | 2. 오른쪽 Local의 obj를 펼칩니다. 159 | 1) __proto__ 가 있으며 160 | 2) [[PrimitiveValue]] = 123이 있습니다. 161 | */ 162 | ``` 163 | 164 |
165 | 166 | new Number() 생성자를 통해 생긴 인스턴스입니다.
167 | 파라미터를 통해 인스턴스에 값을 넣어줄 수 있습니다.
168 | 생성된 인스턴스를 변수 obj에 저장합니다.
169 | 170 |
171 | 새롭게 만들어진 인스턴스에는 기존 Object의 prototpye 만을 전달합니다.
172 | 나머지 Object(대문자)의 프로퍼티(함수(), 프로퍼티{키:값})는 주지 않으며, 프로토타입에 연결된 함수들만 사용이 가능합니다. 173 | 174 |
175 | 176 | ## 🌟 프리미티브 값 177 | 178 | Primitive Value 179 | 180 | - 언어에 있어 가장 낮은 단계의 값 181 | 182 | ```js 183 | var book = '책'; 184 | 185 | // 위 함수에서 "책"은 더 이상 분해, 전개가 불가능한 프리미티브 값입니다. 186 | ``` 187 | 188 |
189 | 프리미티브 타입 190 | 191 | - Number, String, Boolean : 인스턴스 생성 가능 192 | - Null, Undefined: 인스턴스 생성 불가 193 | - Object는 프리미티브 값을 제공하지 않음 194 | 195 | ### 인스턴스의 프리미티브 값 196 | 197 | var obj = new Number(123); 198 | 199 | - 인스턴스를 생성하면 200 | - 파라미터 값을 인스턴스의 프리미티브 값으로 설정 201 | 202 | 프리미티브 값을 갖는 오브젝트 203 | 204 | - Boolean, Date, Number, String 205 | 206 | ### valueOf() 207 | 208 | | 구분 | 데이터(값) | 209 | | :------: | :-------------------: | 210 | | data | Number 인스턴스, 숫자 | 211 | | 파라미터 | 사용하지 않음 | 212 | | 반환 | 프리미티브 값 | 213 | 214 |
215 | 216 | Number 인스턴스의 프리미티브 값 반환 217 | 218 | ```js 219 | var obj = new Number("123"); 220 | 221 | console.log(obj.valueOf()); 222 | 223 | >>> 224 | 123 225 | /* 226 | data => obj 227 | params => x 228 | return => 123 229 | */ 230 | ``` 231 | 232 |
233 | 234 | 다음 섹션으로 235 | -------------------------------------------------------------------------------- /BASIC/SECTION08/string.js: -------------------------------------------------------------------------------- 1 | var valueA = 123; 2 | console.log(typeof valueA); 3 | 4 | var valueB = 'Sports'; 5 | var lowerValue = valueB.toLowerCase(); 6 | console.log('match 함수 사용 :'); 7 | console.log(lowerValue.match(/s/g)); 8 | 9 | var value0 = 'ABC'; 10 | console.log(value0.length); 11 | 12 | var value = '황준영김'; 13 | console.log(value.indexOf('백')); 14 | 15 | var value2 = 'abcabc'; 16 | console.log(value2.replace('a', '바꿈')); 17 | console.log(value2.replace(/a/, '바꿈')); 18 | console.log(value2.replace(/a/g, '바꿈')); 19 | 20 | var value3 = 'sports'; 21 | var result = value3.concat('축구'); 22 | var result2 = result.concat('재밌니?').concat('진짜?'); 23 | 24 | console.log(result); 25 | console.log(result2); 26 | 27 | // cd SECTION08 28 | // node string.js 로 콘솔값 확인 29 | 30 | // 존재하지 않으면 -1 31 | // 존재한다면 0 이상의 값 출력 32 | -------------------------------------------------------------------------------- /BASIC/SECTION09/readme.md: -------------------------------------------------------------------------------- 1 | ## 🌟 Object 오브젝트(ES3 기준) 2 | 3 | ### 자바스크립트의 오브젝트 4 | 5 | 오브젝트 구분 6 | 7 | - 빌트인 오브젝트 8 | - 네이티브 오브젝트 9 | - 호스트 오브젝트 10 | 11 |
12 | 13 | 네이티브 오브젝트 안에 빌트인 오브젝트가 포함되어 있다. 14 |
15 | 16 | ### 빌트인 오브젝트 17 | 18 | - 사전에 만들어 놓은 오브젝트 19 | - Number, String, ... 20 | 21 |
22 | 23 | ### 네이티브 오브젝트 24 | 25 | - JS 스펙에서 정의한 오브젝트 26 | - 빌트인 오브젝트 포함 27 | - JS 코드를 실행할 때 만드는 오브젝트 28 | - 예) Argunment 오브젝트 29 | 30 | ### 호스트 오브젝트 31 | 32 | - 빌트인, 네이티브 오브젝트를 제외한 모든 오브젝트 33 | 34 | > 예 : window, DOM 오브젝트, ... 35 | 36 | - JS는 호스트 환경에서 브라우저의 모든 요소 기술을 연결하고 융합하며 이를 제어 37 | 38 | - 계속해서 host 오브젝트에 포함된 내용들을 공부해야 합니다. 39 | 40 | ```js 41 | var node = document.querySelector('div'); 42 | console.log(node.nodeName); 43 | 44 | >>> 45 | DIV 46 | 47 | /* 48 | 49 | document는 DOM에서 제공하는 오브젝트로 HOST 오브젝트라고 불립니다. 50 | 마치 JS 함수처럼 사용이 가능합니다. 51 | */ 52 | ``` 53 | 54 |
55 | 56 | ## 오브젝트와 인스턴스 57 | 58 | 강좌에서는 오브젝트와 인스턴스를 구분합니다. 59 | 60 | ```js 61 | case 1: 오브젝트 62 | 63 | new 연산자 사용 x 64 | 65 | var obj = {}; 66 | 67 | obj 오브젝트라 칭함 68 | 69 | ``` 70 | 71 | ```js 72 | case 2: 인스턴스 73 | 74 | new 연산자 사용 75 | 76 | var abc = new Object(); 77 | 78 | abc 인스턴스라 칭함 79 | ``` 80 | 81 |
82 | 83 | ## 빌트인 Object와 프로퍼티(ES3) 84 | 85 | 오브젝트라 부르는 것이 맞지만, 구분을 위해 프로퍼티라 칭합니다.
86 | 87 | ### 프로퍼티 리스트 88 | 89 | | 이름 | 개요 | 90 | | :--------------------: | :---------------------------------------: | 91 | | new Object() | 파라미터 데이터 타입의 인스턴스 생성 | 92 | | Object() | Object 인스턴스 생성 | 93 | | Object.prototype | 94 | | constructor | 생성자 | 95 | | valueOf() | 프리미티브 값 반환 (인스턴스에 설정된 값) | 96 | | hasOwnProperty() | 프로퍼티 소유 여부 반환 | 97 | | propertyIsEnumerable() | 프로퍼티 열거 여부 반환 | 98 | | IsPrototypeOf() | prototype의 존재 여부 반환 | 99 | | toString() | 문자열로 반환 | 100 | | toLocaleString() | 지역화 문자열로 반환 | 101 | 102 |
103 | 104 | ## Object 인스턴스 생성 105 | 106 | ### new Object() 107 | 108 | | 구분 | 데이터(값) | 109 | | :------: | :-------------: | 110 | | 파라미터 | 값 opt | 111 | | 반환 | 생성한 인스턴스 | 112 | 113 |
114 | 115 | 인스턴스를 생성하여 반환
116 | 파라미터의 데이터 타입에 따라 생성할 인스턴스 결정
117 | 118 | ```js 119 | var newObj = new Object(123); 120 | console.log(typeOf(newObj)); 121 | console.log(newObj + 223); 122 | 123 | >>> 124 | object 125 | 323 126 | 127 | why? 128 | /* 129 | 타입은 기본적으로 오브젝트 타입이지만, 파라미터에 따라 프리미티브 값이 형변환되어 적용된다. 130 | */ 131 | ``` 132 | 133 | 파라미터 값이 undefined, null이면 빈 Object 인스턴스 반환
134 | 135 | ```js 136 | var newObj = new Object(); 137 | console.log(newObj); 138 | 139 | >>> 140 | {} 141 | ``` 142 | 143 | ### Object() 144 | 145 | | 구분 | 데이터(값) | 146 | | :------: | :-------------: | 147 | | 파라미터 | 값 opt | 148 | | 반환 | 생성한 인스턴스 | 149 | 150 |
151 | 152 | Object 인스턴스 생성
153 | 파라미터는 {name : value} 형태 154 | 155 | ```js 156 | var obj = Object({ name: 'JS BOOk' }); 157 | console.log(obj) 158 | >>> {name: JS BOOk} 159 | 160 | var obj2 = Object(); 161 | console.log(obj2) 162 | >>> {} 163 | ``` 164 | 165 | ## 함수와 메소드 166 | 167 | 함수 168 | 169 | - 빌트인 오브젝트에서 바로 호출 170 | - 오브젝트에 연결 171 | - Object.create() 172 | 173 | 메소드 174 | 175 | - 프로토타입이 존재하는 인스턴스에서 호출하는 함수는 메소드라고 부른다. 176 | - 오브젝트의 prototype에 연결 177 | - Object.prototype.toString() 178 | 179 | ### 함수, 메소드 호출 180 | 181 | 함수 호출 방법 182 | 183 | - Object.create(); 184 | 185 |
186 | 187 | 메소드 호출 방법 188 | 189 | - Object.prototype.toString(); 190 | - 또는 인스턴스를 생성하여 호출 191 | 192 | ```js 193 | var obj = {}; 194 | obj.create(); 195 | ``` 196 | 197 |
198 | 199 | 함수와 메소드를 구분해야 하는 이유 200 | 201 | - JS 코드 작성 방법이 다르기 때문 202 | - 함수는 파라미터에 값을 작성하고 203 | - 메소드는 메소드 앞에 값을 작성 204 | 205 | 다음 섹션으로 206 | -------------------------------------------------------------------------------- /BASIC/SECTION10/readme.md: -------------------------------------------------------------------------------- 1 | ## 🌟 Function 오브젝트 2 | 3 | ### 프로퍼티 리스트 4 | 5 | | 이름 | 개요 | 6 | | :----------------: | :----------------------------------: | 7 | | Function | 8 | | Function() | 인스턴스 생성 | 9 | | new Function() | 인스턴스 생성 | 10 | | Function 프로퍼티 | | 11 | | length | 함수의 파라미터 수 | 12 | | Function.prototype | 13 | | constructor | 생성자 | 14 | | call() | 함수 호출 | 15 | | apply() | 함수 호출, 배열을 파라미터로 사용 | 16 | | toString() | 함수를 문자열로 반환 | 17 | | bind() | 새로운 오브젝트를 생성하고 함수 실행 | 18 | 19 | ### new Function() 20 | 21 | ### Function() 22 | 23 |
24 | 25 | ## 🌟 함수 생명 주기 26 | 27 | ### 함수 분류 28 | 29 | function 분류 30 | 31 | - 빌트인 Function 오브젝트 32 | - function 오브젝트 33 | - function 인스턴스 (new 연산자 사용) 34 | 35 | function 오브젝트 생성 방법 36 | 37 | - function 키워드 사용 38 | - function getBook(title){return title}; 39 | 40 | JS 엔진이 function 키워드를 만나면 41 | 42 | - 이름이 getBook인 function 오브젝트 생성 43 | 44 | ### 함수 생명 주기 (function life cycle) 45 | 46 | 함수 호출 47 | 48 | - getBook("JS BOOK"); 49 | - 함수를 호출하면서 파라미터 값을 넘겨 줌 50 | 51 | 함수 코드 실행 52 | 53 | - JS 엔진 컨트롤이 함수의 처음으로 이동 54 | - 파라미터 이름에 넘겨 받은 파라미터 값 매핑 55 | - 함수 코드 실행 56 | - return 작서엥 관계없이 반환 값을 갖고 함수를 호출한 곳으로 돌아 감 57 | 58 | ```js 59 | function add(one, two) { 60 | return one + two; 61 | } 62 | 63 | var result = add(10, 20); 64 | console.log(result); 65 | 66 | >>> 30 67 | ``` 68 | 69 |
70 | 71 | ## 🌟 함수 형태 72 | 73 | 함수 선언문 (Function Declaration) 74 | 75 | ```js 76 | function getBook(book){...} 77 | ``` 78 | 79 | - function 키워드, 함수 이름, 블록{ ... }은 작성 필수 80 | - 나머지 파라미터, 함수 코드는 선택 81 | - 함수 이름은 생성한 function 오브젝트의 이름으로 사용 82 | 83 | 함수 표현식(Function Expression) 84 | 85 | ```js 86 | const getBook = function(book){...} 87 | ``` 88 | 89 | ```js 90 | var getBook = function (title) { 91 | return title; 92 | }; 93 | ``` 94 | 95 |
96 | 97 | - function 오브젝트를 생성하여 변수에 할당 98 | - 변수 이름이 function 오브젝트 이름이 됨 99 |
100 | 101 | 식별자 위치의 함수 이름은 생략 가능 102 | 103 | ```js 104 | var name = function abc(){ 105 | ... 106 | } 107 | 108 | // 위 코드에서 abc가 식별자 위치의 함수 이름입니다. 109 | ``` 110 | 111 | 함수 표현식과 함수 선언식 차이점 알아보기 112 | 113 |
114 | 115 | ## 🌟 함수 호출 116 | 117 | ### call() 118 | 119 | ```js 120 | function getTotal(one, two) { 121 | return one + two; 122 | } 123 | 124 | var result = getTotal.call(this, 10, 20); 125 | 126 | console.log(result); 127 | >>> 30 128 | ``` 129 | 130 |
131 | 132 | 첫 번째 파라미터인 (this)로 참조할 오브젝트를 표시 133 | 134 | - 일반적으로 this를 사용하며 다른 오브젝트로도 작성 가능 135 | 136 | ```js 137 | var value = { one: 10, two: 20 }; 138 | 139 | function getTotal() { 140 | return this.one + this.two; 141 | } 142 | 143 | var result = getTotal.call(value); 144 | 145 | console.log(result); 146 | 147 | >>> 30 148 | ``` 149 | 150 |
151 | 152 | ### apply() 153 | 154 | ```js 155 | function getTotal(one, two) { 156 | return one + two; 157 | } 158 | 159 | var result = getTotal.apply(this, [10, 20]); 160 | 161 | console.log(result); 162 | 163 | >>> 30 164 | ``` 165 | 166 |
167 | 파라미터 수가 유동적일 때 사용
168 | 두 번째 파라미터에 배열 사용
169 | 170 | #### call(), apply() 부가적인 목적? 171 | 172 | 첫 번째 파라미터에 호출된 함수에서 this로 참조할 오브젝트 사용 173 | 174 | ### toString() 175 | 176 | ### bind() 177 | 178 | ```js 179 | 180 | const module = { 181 | x: 42, 182 | getX: function () { 183 | return this.x; 184 | }, 185 | }; 186 | 187 | const unboundGetX = module.getX; 188 | console.log(unboundGetX()); 189 | // The function gets invoked at the global scope 190 | // expected output: undefined 191 | 192 | const boundGetX = unboundGetX.bind(module); 193 | console.log(boundGetX()); 194 | // expected output: 42 195 | 196 | >>> 197 | undefined 198 | 42 199 | 200 | 201 | ``` 202 | 203 |

204 | bind() 함수는 새로운 바인딩한 함수를 만듭니다. 바인딩한 함수는 원본 함수 객체를 감싸는 함수로, ECMAScript 2015에서 말하는 특이 함수 객체입니다. 바인딩한 함수를 호출하면 일반적으로 래핑된 함수가 호출 됩니다. 205 |

206 | 207 | ```js 208 | this.x = 9; 209 | var module = { 210 | x: 81, 211 | getX: function () { 212 | return this.x; 213 | }, 214 | }; 215 | 216 | module.getX(); // 81 217 | 218 | var retrieveX = module.getX; 219 | retrieveX(); 220 | // 9 반환 - 함수가 전역 스코프에서 호출됐음 221 | 222 | // module과 바인딩된 'this'가 있는 새로운 함수 생성 223 | // 신입 프로그래머는 전역 변수 x와 224 | // module의 속성 x를 혼동할 수 있음 225 | var boundGetX = retrieveX.bind(module); 226 | boundGetX(); // 81 227 | ``` 228 | 229 |
230 | 231 | ## Argument 오브젝트 232 | 233 | 함수가 호출되어 함수 안으로 이동했을 때 arguments 이름으로 생성되는 오브젝트
234 | 함수를 호출한 곳에서 넘겨 준 값을 순서대로 작성
235 | 호출된 함수에 파라미터를 작성한 경우 호출된 함수의 파라미터에 값을 설정하고 아규먼트 오브젝트에도 저장 236 | 237 | ```js 238 | function getTotal(one) { 239 | return one + arguments[1] + arguments[2]; 240 | } 241 | 242 | var result = getTotal(10, 20, 30); 243 | 244 | console.log(result); 245 | >>> 60 246 | 247 | why? 248 | /* 249 | 파라미터를 1개만 받는 함수여도, arguments 배열의 인덱스를 통해, 함수가 받는 파라미가 아닌 250 | 다른 파라미터도 저장 및 반환할 수 있습니다. 251 | */ 252 | ``` 253 | 254 | ```js 255 | case : 심화; 256 | 257 | function getTotal(one){ 258 | return one + arguments[1] + arguments[2]; 259 | } 260 | 261 | var result = getTotal.apply(this, [10,20,30]); 262 | console.log(result); 263 | >>> 60 264 | ``` 265 | 266 |
267 | 268 | 다음 섹션으로 269 | 270 | ``` 271 | 272 | ``` 273 | -------------------------------------------------------------------------------- /BASIC/SECTION11/endecode.js: -------------------------------------------------------------------------------- 1 | const result = encodeURI('안녕하세요'); 2 | console.log(result); 3 | 4 | const DecodeResult = decodeURI(result); 5 | console.log(DecodeResult); 6 | -------------------------------------------------------------------------------- /BASIC/SECTION11/readme.md: -------------------------------------------------------------------------------- 1 | ## 🌟 Global 오브젝트 2 | 3 | ### Global 오브젝트 개요 4 | 5 | 모든 '<'script'>'를 통해 하나만 존재 6 | 7 | - new 연산자로 인스턴스 생성 불가 8 | - (하나만 존재하기 때문에 생성할 필요가 없음) 9 | - 모든 코드에서 공유 10 | - (파일이 달라도 프로퍼티의 값을 공유할 수 있다.) 11 | 12 | 이름은 있지만 오브젝트 실체가 없음
13 | 오브젝트를 작성(사용)할 수 없음
14 | 15 | ```js 16 | console.log(Global.xxx) >>> x; 17 | 18 | why? 실체가 없으므로 그냥 함수만 불러와 사용하면 된다. 19 | ``` 20 | 21 | ### Global 오브젝트 함수, 변수 22 | 23 | Global 오브젝트와 함수, 변수를 Global 함수, Global 변수라고 부름
24 | 함수 안에 작성한 것 25 | 26 | - 지역함수, 로컬함수라고 부름 27 | - 지역 변수, 로컬 변수라고 부름 28 | 29 |
30 | 31 | ## Global 프로퍼티 32 | 33 | 프로퍼티 리스트 34 | 35 | | 이름 | 개요 | 36 | | :----------: | :------------------------------------------------: | 37 | | 값 | 38 | | NaN | Not-a-Number | 39 | | Infinity | 무한대 값 | 40 | | undefined | undefined(값이 선언되지 않음) | 41 | | 함수 | 42 | | isNaN() | NaN 여부 NaN이면 true, 아니면 false 반환 | 43 | | isInfinite() | Infinite 여부 Infinite이면 true, 아니면 false 반환 | 44 | | parseInt() | 정수로 변환하여 반환 | 45 | | parseFloat() | 실수로 변환하여 반환 | 46 | | encodeURI() | URI 인코딩 | 47 | | decodeURI() | encodeURI 함수의 인코딩 값을 디코딩 | 48 | 49 |
50 | 51 | 글로벌 오브젝트는 인스턴스를 만들지 못하므로 모두 함수입니다. 52 | 53 |
54 | 55 | ## Global과 window 객체의 관계 56 | 57 | 글로벌과 window 오브젝트 주체
58 | 59 | - 글로벌 오브젝트는 JS가 주체 60 | - window 오브젝트는 window가 주체 61 | 62 | 주체는 다르지만, Global 오브젝트의 프로퍼티와 함수가 window 오브젝트에 설정됨 63 | 64 | - 글로벌 오브젝트는 실체가 없어 어딘가에 저장되어야 하는데, window 객체가 대신 저장해준다. 65 | 66 |
67 | 68 | ## 정수, 실수 변환 69 | 70 | ### parseInt() 71 | 72 | 값을 정수로 변환하여 반환 73 | 74 | ```js 75 | console.log(parseInt(123.56)); >>> 123 76 | console.log(parseInt(24px)); >>> 24 77 | console.log(parseInt("0012")); >>> 12 78 | console.log(parseInt()); >>> NaN 79 | ``` 80 | 81 | ### parseFloat() 82 | 83 | 값을 실수로 변환하여 반환
84 | 85 | - JS는 기본적으로 실수로 처리하므로 실수로 변환하는 것이 의미가 없지만 문자열의 실수 변환은 의미가 있다. 86 | 87 | ```js 88 | console.log(parseFloat('-123.456') + 7) >>> 117.456; 89 | ``` 90 | 91 |
92 | 93 | ## 인코딩, 디코딩 94 | 95 | ### encodeURI() 96 | 97 | URI를 인코딩하여 반환 98 | 99 | - Uniform Resource Identifier 100 | - 인코딩 제외 문자를 제외하고 "%16진수%16진수" 형태로 변환 101 | 102 | 인코딩 제외 문자 103 | 104 | - 영문자, 숫자 105 | 106 | ``` 107 | # ; / ? : @ ^ = + , - _ . ! ~ * () 108 | ``` 109 | 110 | - 프론트에서 사용자의 요청이 한글(문자 또는 문자열)일 경우, 한글을 파라미터로 넘겨줄 때 인코딩 시킨 다음 백엔드에서 디코딩해서 사용 111 | 112 | ### decodeURI() 113 | 114 | 인코딩을 디코딩하여 반환
115 | 파라미터에 encodeURI()로 인코딩한 문자열 작성 116 | 117 | ```js 118 | const result = encodeURI("안녕하세요"); 119 | 120 | >>> %EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94 121 | ... 122 | 123 | const DecodeResult = decodeURI(result); 124 | >>> 안녕하세요 125 | ``` 126 | 127 |
128 | 129 | 다음 섹션으로 130 | -------------------------------------------------------------------------------- /BASIC/SECTION12/readme.md: -------------------------------------------------------------------------------- 1 | ## 🌟 Array 오브젝트 (ES3) 2 | 3 | ### Array 오브젝트 개요 4 | 5 | 빌트인 오브젝트
6 | Array(배열)형태 7 | 8 | - [123, "ABC", "가나다"] 9 | - 대괄호 안에 콤마로 구분하여 값 작성 10 | 11 | 배열 엘리먼트 12 | 13 | - [123, "ABC"]에서 123, "ABC" 14 | - 각각을 엘리먼트 또는 요소라고 부름 15 | 16 | ### 배열의 생성 방법 17 | 18 | ```js 19 | case 1: new Array()로 작성 20 | var book = new Array(); 21 | ``` 22 | 23 | ```js 24 | case 2: Array()로 작성 25 | var book = Array(); 26 | ``` 27 | 28 | ```js 29 | case 3: 대괄호로 작성 30 | var book = []; 31 | 32 | // 제일 일반적인 형태 33 | ``` 34 | 35 | 어떤 생성 방법을 사용하던, 모든 변수는 배열의 프로토타입을 사용할 수 있음 36 | 37 | ### 엘리먼트 작성 방법 38 | 39 | ```js 40 | var book = ['책1', '책2']; 41 | ``` 42 | 43 | 대괄호 안에 콤마로 구분하여 다수 작성 가능
44 | String 타입은 큰따옴표, 작은따옴표 모두 가능
45 | JS의 모든 타입의 값, 오브젝트 사용 가능
46 | 값을 작성하지 않고 콤마만 작성하면 undefined가 설정됨
47 | 48 | ### 배열의 차원 49 | 50 | 대괄호 수에 따라 결정
51 | 52 | - 1차원 배열 53 | 54 | ```js 55 | var list = [12, 34, 56]; 56 | for (var k = 0; (k < list.length); k++) { 57 | console.log(list[k]); 58 | 59 | >>> 60 | 12 61 | 34 62 | 56 63 | } 64 | ``` 65 | 66 | - 2차원 배열 67 | 68 | ```js 69 | var list = [[12, 34, 56]]; 70 | for (var k = 0; k < list.length; k++) { 71 | var one = list[k]; 72 | for (var m = 0; m < one.length; m++) { 73 | console.log(one[m]); 74 | } 75 | } 76 | 77 | 78 | >>> 79 | 12 80 | 34 81 | 56 82 | } 83 | ``` 84 | 85 | - 3차원 배열 86 | 87 |
88 | 89 | ## Array 오브젝트 프로퍼티 (ES3) 90 | 91 | | 이름 | 개요 | 92 | | :--------------: | :--------------------------------------------------------------: | 93 | | new Array() | 인스턴스 생성 | 94 | | Array() | 인스턴스 생성 | 95 | | Array 프로퍼티 | 96 | | length | 배열의 엘리먼트 수 반환 | 97 | | Array.prototype | (인스턴스를 만들었을 때, 생성되는 함수 및 프로퍼티) | 98 | | constructor | 생성자 | 99 | | unshift() | 배열 처음에 엘리먼트 삽입 | 100 | | push() | 배열 끝에 엘리먼트 첨부 | 101 | | concat() | 배열 끝에 값을 연결 | 102 | | slice() | 안덱스 범위의 엘리먼트를 복사 | 103 | | join() | 엘리먼트와 분리자를 결합하여 반환 | 104 | | toString() | 엘리먼트를 문자열로 연결하여 반환 | 105 | | toLocaleString() | 엘리먼트를 지역화 문자로 변환하고 문자열로 연결하여 반환 | 106 | | shift() | 첫 번째 엘리먼트를 삭제하고 삭제한 엘리먼트 반환 | 107 | | pop() | 마지막 엘리먼트를 삭제하고 삭제한 엘리먼트 반환 | 108 | | splice() | 엘리먼트를 삭제하고 새로운 엘리먼트를 삽입, 삭제한 엘리먼트 반환 | 109 | | sort() | 엘리먼트 값을 Unidode 순서로 분류하여 반환 | 110 | | reverse() | 엘리먼트 위치를 역순으로 바꾸어 반환 | 111 | 112 |
113 | 114 | ## Array 인스턴스 생성 115 | 116 | ### Array(), new Array() 117 | 118 | Array 인스턴스 생성, 반환
119 | 배열 생성 기준
120 | 121 | - 파라미터에 따라 배열 생성 기준이 다르다 122 | - 파라미터를 작성하지 않으면 빈 배열로 생성 123 | - 작성한 순서로 엘리먼트에 설정 124 | - new Array(3)처럼 파라미터에 숫자를 작성하면 3개의 엘리먼트 생성 125 | > 값이 할당되어있지 않기 때문에 undefined 출력 126 | 127 | ```js 128 | var list = new Array(3); 129 | console.log(list); 130 | 131 | >>> 132 | [undefined, undefined, undefined] 133 | ``` 134 | 135 | - new Array()는 new 연산자에서 생성자 함수를 호출하여 인스턴스 생성 136 | - Array()는 직접 생성자 함수를 호출하여 인스턴스 생성 137 | 138 |
139 | 140 | ## 엘리먼트 추가, 삭제 메커니즘 141 | 142 | ### 엘리먼트 추가 143 | 144 | 배열에 엘리먼트를 추가하는 방법 145 | 146 | - 삽입할 위치에 인덱스 지정 147 | 148 | ```js 149 | var value = [1, 2]; 150 | value[4] = 5; 151 | console.log(value); 152 | 153 | >>> 154 | [1,2, undefined, undefined, 5] 155 | ``` 156 | 157 | - 표현식으로 인덱스 지정 158 | 159 | ```js 160 | var value = [1.2]; 161 | value[value.length + 2] = 5; 162 | console.log(value); 163 | 164 | >>> 165 | [1,2, undefined, undefined, 5] 166 | ``` 167 | 168 | ### 엘리먼트 삭제 메커니즘 169 | 170 | 삭제된 인덱스에 undefined 설정 171 | 172 | - 배열을 읽을 때 제외시켜야 합니다. 173 | - 삭제를 해도 [1,2,3,4] >> [1,3,4] 가 되지 않습니다. 174 | - [1, undefined, 3, 4 ]가 됩니다. 175 | 176 | ### delete 연산자 177 | 178 | | 구분 | 데이터(값) | 179 | | :----: | :---------------------------------: | 180 | | object | 매치 대상 | 181 | | 인덱스 | 배열의 인덱스 | 182 | | 반환 | 삭제 성공 : true, 삭제 실패 : false | 183 | 184 |
185 | 186 | var 변수는 삭제 불가 187 | 188 | ```js 189 | var value = 123; 190 | console.log(delete value); 191 | >>> 192 | false 193 | ``` 194 | 195 | 글로벌 변수는 삭제 가능 196 | 197 | ```js 198 | value = "글로벌" 199 | console.log(delete value); 200 | >>> 201 | true 202 | ``` 203 | 204 | 프로퍼티 {name: value} 삭제 방법 205 | 206 | - 삭제할 프로퍼티 이름(key) 작성 (코드에서는 title) 207 | 208 | ```js 209 | var book = {title : "책"}; 210 | console.log(delete book.title); 211 | >>> 212 | true 213 | ``` 214 | 215 | 인덱스로 배열의 엘리먼트 삭제 216 | 217 | ```js 218 | var value = [1,2,3,4]; 219 | console.log(delete value[1]); 220 | console.log(value.length); 221 | console.log(value); 222 | 223 | >>> 224 | true 225 | 4 226 | [1, undefined, 3, 4] 227 | 228 | // 엘리먼트는 삭제되지만, 배열의 크기가 줄어들지는 않습니다. 229 | ``` 230 | 231 |
232 | 233 | ## 엘리먼트 삽입, 첨부 234 | 235 | ### unshift() 236 | 237 | | 구분 | 데이터(값) | 238 | | :------: | :-------------------: | 239 | | data | 기준 | 240 | | 파라미터 | [item 1, item 2], opt | 241 | | 반환 | 추가 후의 length | 242 | 243 | 0 번 인덱스에 파라미터 값 삽입
244 | 배열에 있던 엘리먼트는 뒤로 이동 245 | 246 | ```js 247 | var value = [1,2]; 248 | value.unshift(345,67); 249 | console.log(value); 250 | 251 | >>> 252 | [345, 67, 1, 2] 253 | ``` 254 | 255 | ### push() 256 | 257 | | 구분 | 데이터(값) | 258 | | :------: | :-------------------: | 259 | | data | 기준 | 260 | | 파라미터 | [item 1, item 2], opt | 261 | | 반환 | 추가 후의 length | 262 | 263 | 배열 끝에 파라미터 값을 첨부 264 | 265 | ```js 266 | var value = [1, 2]; 267 | value.push(345,67); 268 | console.log(value); 269 | 270 | >>> 271 | [1,2,345,67] 272 | ``` 273 | 274 | 서버에서 데이터를 받아와 추가해줄 때 사용 275 | 276 | ## concat() 277 | 278 | | 구분 | 데이터(값) | 279 | | :------: | :-------------------: | 280 | | data | 기준 | 281 | | 파라미터 | [item 1, item 2], opt | 282 | | 반환 | 연결 결과 | 283 | 284 | 배열에 파라미터 값을 연결하여 반환 285 | 286 | ```js 287 | var value = [1, 2]; 288 | var result = value.concat(3, 4); 289 | console.log(result); 290 | >>> 291 | [1,2,3,4] 292 | ``` 293 | 294 |
295 | 296 | ## 엘리먼트 복사 297 | 298 | ### slice() 299 | 300 | | 구분 | 데이터(값) | 301 | | :------: | :-------------------: | 302 | | data | 대상 | 303 | | 파라미터 | [item 1, item 2], opt | 304 | | 반환 | 연결 결과 | 305 | 306 | 배열의 일부를 복사하여 배열로 반환 307 | 308 | - 첫 번째 파라미터의 인덱스부터 두 번째 인덱스 직전까지 309 | 310 | ```Js 311 | var origin = [1,2,3,4,5]; 312 | var result = origin.slice(1,3); // 인덱스 1번부터 인덱스 3번 전까지 313 | 314 | >>> [2,3] 315 | 316 | // 원본은 바뀌지 않음 317 | 318 | console.log(origin); 319 | 320 | >>> [1,2,3,4,5] 321 | ``` 322 | 323 | - true(1), false(0) 를 수자로 변환 324 | 325 | ```js 326 | var value = [1, 2, 3, 4, 5]; 327 | value.slice(true, 3) >>> [2, 3]; // true = 1, value[3] 직전까지 328 | 329 | value.slice(false, 3) >>> [1, 2, 3]; // false = 0, value[3] 직전까지 330 | ``` 331 | 332 | - 첫 번째 파라미터만 작성 333 | 334 | ```js 335 | console.log([1,2,3,4].slice(1)); 336 | 337 | >>> 338 | [2,3,4] 339 | // index[1] 부터, 파라미터가 1개이므로 끝 인덱스 (opt) default: length 3 340 | ``` 341 | 342 |
343 | 344 | ## 엘리먼트 값을 문자열로 변환 345 | 346 | ### join() 347 | 348 | 엘리먼트와 분리자를 하나씩 결합하여 문자열로 연결 349 | 350 | - [0] 인덱스, 분리자, [1]인덱스, 분리자 351 | - 마지막 엘리먼트는 분리자를 연결하지 않음 352 | 353 | ```js 354 | var value = [1, 2, 3]; 355 | var result = value.join('##'); 356 | console.log(result); 357 | 358 | >>> 359 | 1##2##3 360 | 361 | console.log(typeOf(result)); 362 | 363 | >>> string 364 | 365 | // join에 문자열을 넣음에 따라, 배열이 아닌 string 타입으로 바뀌게 됨 366 | ``` 367 | 368 | 파라미터를 작성하지 않으면 콤마로 분리 369 | 파라미터에 빈 문자열 작성 370 | 371 | ```js 372 | var value = [1,2,3]; 373 | var result = value.joun(""); 374 | console.log(result); 375 | 376 | >>> 377 | 123 378 | 379 | console.log(typeOf(result)); 380 | >>> 381 | string 382 | 383 | // ""라는 화이트 스페이스를 조인하면서 배열이 아닌 string 타입으로 바뀌게 됨 384 | ``` 385 | 386 |
387 | 388 | ## 엘리먼트 삭제 389 | 390 | ### shift() 391 | 392 | 배열의 첫 번째 엘리먼트 삭제
393 | 삭제한 엘리먼트 값이 undefined로 남지 않고 완전히 삭제됨
394 | 395 | - length 값이 하나 줄어 듬 396 | 397 | ```js 398 | var value = [1,2, 34]; 399 | console.log(value.shift()); 400 | 401 | >>> 1 // shift()된 요소(엘리먼트) 출력 402 | 403 | console.log(value); 404 | 405 | >>> [2, 34]; 406 | ``` 407 | 408 | 빈 배열이면 undefined가 반환 됨 409 | 410 | ### pop() 411 | 412 | 배열의 마지막 엘리먼트 삭제
413 | 삭제한 엘리먼트 값이 undefined로 남지 않고 완전히 삭제됨 414 | 415 | - length 값이 하나 줄어 듬 416 | 417 | ```js 418 | var value = [1,2,34]; 419 | 420 | console.log(value.pop()); 421 | >>>> 34 422 | 423 | console.log(value); 424 | >>> [1,2] 425 | ``` 426 | 427 | 빈 배열이면 undefined 반환 428 | 429 | ### splice() 430 | 431 | 엘리먼트를 삭제하고 삭제한 엘리먼트 반환
432 | 삭제한 위치에 세 번째 파라미터 삽입
433 | 434 | ```js 435 | var value = [1,2,3,4,5]; 436 | console.log(value.splice(1,3)); // 1 > 인덱스, 3 삭제할 엘리먼트 수 437 | 438 | >>> [2,3,4] 439 | 440 | console.log(value); // 남은 value 값 출력 441 | >>> [1,5] 442 | 443 | ``` 444 | 445 |
446 | 447 | ### sort(분류) 448 | 449 | 엘리먼트 값을 Unicode 포인트 순으로 정렬 450 | 451 | - 코드 포인트가 작으면 앞에 오고 크면 뒤에 옵니다 452 | 453 | ```js 454 | var value = [4,2,3,1]; 455 | console.log(value.sort()); 456 | >>> [1,2,3,4]; 457 | 458 | console.log(value); 459 | >>> [1,2,3,4] 460 | ``` 461 | 462 | sort 대상 배열도 정렬됨 (코드에서는 value)
463 | 값이 undefined 이면 끝으로 이동 464 | 465 |
466 | 467 | 다음 섹션으로 468 | -------------------------------------------------------------------------------- /BASIC/SECTION12/test.js: -------------------------------------------------------------------------------- 1 | var list = [[12, 34, 56]]; 2 | for (var k = 0; k < list.length; k++) { 3 | var one = list[k]; 4 | for (var m = 0; m < one.length; m++) { 5 | console.log(one[m]); 6 | } 7 | } 8 | 9 | var value = [56, 2, 34]; 10 | var result = value.shift(); 11 | 12 | console.log('shift한 엘리먼트 출력: ', result); 13 | console.log(value); // 배열 자체에서 인덱스[0] 번 엘리먼트가 사라짐 14 | -------------------------------------------------------------------------------- /BASIC/SECTION13/readme.md: -------------------------------------------------------------------------------- 1 | ## 🌟 Array 오브젝트 (ES5) 2 | 3 | ### 프로퍼티 리스트(ES5) 4 | 5 | | 이름 | 개요 | 6 | | :-----------------: | :-------------------------------------------------------------: | 7 | | Array 함수 | 8 | | isArray() | 배열 여부 반환, 배열이면 true 아니면 false 반환 | 9 | | Array.prototype | 10 | | indexOf() | 지정한 값에 일치하는 엘리먼트 인덱스 반환 | 11 | | lastIndexOf() | indexOf()와 같으며, 마지막 인덱스 반환 | 12 | | forEach() ✔️ ℹ️ | 배열을 반복하면서 콜백 함수 실행 | 13 | | every() ✔️ ℹ️ | 반환 값이 false일 때까지 콜백 함수 실행 | 14 | | some() ✔️ ℹ️ | 반환 값이 true일 때까지 콜백 함수 실행 | 15 | | filter() ✔️ ℹ️ | 콜백 함수에서 true를 반환한 엘리먼트 반환 (false인 값은 없어짐) | 16 | | map() ✔️ ℹ️ | 콜백 함수에서 반환한 값을 새로운 배열로 반환 | 17 | | reduce() ✔️ ！ | 콜백 함수의 반환 값을 파라미터 값으로 사용 (왼 > 오) | 18 | | reduceRight() ✔️ ！ | reduce()와 같음 단, 배열의 끝에서 앞으로 진행 (오 > 왼) | 19 | 20 |
21 | - ✔️ 배열을 반복할 때마다 콜백 함수를 실행
22 | - ℹ️ 파라미터를 3개를 넘겨줌
23 | - ！ 파라미터가 4개 24 | 25 | ### isArray() 26 | 27 | 체크 대상이 배열이면 true, 아니면 false
28 | isArray()는 함수이다. (isArray 와 같은 프로퍼티가 아님) 29 | 30 | ```js 31 | console.log(Array.isArray([1, 2])); >>> true; 32 | console.log(Array.isArray(123)); >>> false; 33 | 34 | //isArray()가 함수인 이유 35 | 36 | console.log(typeOf[1,2]) >>> object 37 | 38 | // 타입오브 연산자로 배열임을 확인할 수 없기 때문에 배열임을 확인하기 위해 isArray() 함수가 추가됨 39 | ``` 40 | 41 |
42 | 43 | ## index 처리 메소드 44 | 45 | ### indexOf() 46 | 47 | 파라미터 값과 같은 엘리먼트의 인덱스를 반환 48 | 49 | - 왼쪽에서 오른쪽으로 검색 50 | - 값이 같은 엘리먼트가 있으면 검색 종료 51 | - 데이터 타입까지 체크 (===) 52 | 53 | ```js 54 | var value = [1, 2, 3, 4, 5]; 55 | console.log(value.indexOf(2)); >>> 1; 56 | 57 | // why? value 값이 2인 인덱스 value[1] 을 반환해줬다. 58 | ``` 59 | 60 | ```js 61 | var value = [1, 2, 3, 4, 5]; 62 | console.log(value.indexOf('-2')); >>> -1 63 | 64 | // why? value에 -2라는 값이 없고, 타입까지 비교하기 때문에 string 타입이 없어 -1을 반환함 65 | ``` 66 | 67 | 파라미터가 두 개일 경우, 두 번째 파라미터의 인덱스부터 검색 68 | 69 |
70 | 71 | ## 콜백 함수를 가진 Array 메소드 72 | 73 | ### 지금부터 다루는 7개의 메소드는 모두 콜백 함수를 호출합니다. 키워드는 시멘틱과 독립성입니다. 74 | 75 | ### forEach() 76 | 77 | 배열의 엘리먼트를 하나씩 읽어 가면서 콜백 함수 호출
78 | 콜백 함수 파라미터 (엘리먼트(요소) 값, 인덱스, 배열 전체)
79 | 80 | ```js 81 | code 1: 콜백 함수의 파라미터 element, index, all 82 | var list = ["A", "B", "C"]; 83 | list.forEach(function(el, index, all){ 84 | console.log(el + ":" + index + ":" + all); 85 | }); 86 | 87 | >>> 88 | A:0:A,B,C 89 | B:0:A,B,C 90 | C:0:A,B,C 91 | ``` 92 | 93 | break, continue 사용 불가 (무조건 배열 전체를 돌아야 함)
94 | 콜백 함수 분리
95 | 96 | ```js 97 | code 2: 콜백 함수 분리 98 | var list = ["A", "B", "C"]; 99 | var func1 = function(el, index, all){ 100 | console.log(el + ":" + index + ":" + all); 101 | }; 102 | list.forEach(func1); 103 | 104 | >>> 105 | A:0:A,B,C 106 | B:0:A,B,C 107 | C:0:A,B,C 108 | 109 | /* 110 | 콜백함수 func1을 따로 분리하여 forEach()문을 사용 111 | 이렇게 forEach()문처럼 콜백 함수와 관계없이 바로 뜻을 확인할 수 있는 것을 시멘틱이라 합니다. 112 | */ 113 | 114 | ``` 115 | 116 | this로 오브젝트 참조가능
117 | 118 | ```js 119 | code 3: this 오브젝트 참조 120 | 121 | var list = [1,2]; 122 | var fn = function(el, index, all){ 123 | console.log(el + this.ten); 124 | }; 125 | list.forEach(fn, {ten : 10}); 126 | 127 | >>> 128 | 11 129 | 12 130 | 131 | // this 를 통해 {ten : 10} 프로퍼티를 forEach()문의 파라미터로 넣어주었다. 132 | ``` 133 | 134 |
135 | 136 | ## for() 문과 forEach()의 차이 137 | 138 | ### forEach() 139 | 140 | forEach()를 시작할 때 반복 범위 결정
141 | 엘리먼트를 추가하더라도 처리하지 않음
142 | 143 | ```js 144 | var list = [1, 2, 3]; 145 | var fn = function (el, index, all) { 146 | if (index === 0) { 147 | list.push('AB'); 148 | } 149 | console.log(el); 150 | }; 151 | list.forEach(fn); 152 | 153 | >>> 154 | 1 155 | 2 156 | 3 157 | 158 | /* 159 | 1 2 3 AB 라고 생각할 수 있지만, 시작할 때 이미 인덱스가 3개로 범위가 정해졌기 때문에 추가하더라도 반영되지 않습니다. 160 | forEach()문의 특징입니다. 161 | */ 162 | ``` 163 | 164 | 현재 인덱스보다 큰 인덱스의 값을 변경하면 변경된 값을 사용
165 | 166 | ```js 167 | var list = [1, 2, 3]; 168 | var fn = function (el, index, all) { 169 | if (index === 0) { 170 | list[2] = 345; 171 | } 172 | console.log(el); 173 | }; 174 | list.forEach(fn); 175 | 176 | >>> 177 | 1 178 | 2 179 | 345 180 | 181 | /* 182 | code 1과 달리 index 내의 변화는 변경이 가능하다. 183 | list[2] 현재 존재하는 인덱스와 값이 있기 때문에, 이를 변경하였고 184 | 결과적으로 element가 변화됐음을 알 수 있다. 185 | */ 186 | ``` 187 | 188 | 현재 인덱스보다 큰 인덱스의 엘리먼트를 삭제하면 배열에서 삭제되므로, 반복에서 제외됨 189 | 190 | - 추가는 처리하지 않지만, 삭제는 반영된다. 191 | 192 | ### for() 와 forEach() 193 | 194 | forEach()는 시멘틱 접근이다. (코드를 읽어보지 않더라도 어떤 의미인지 알아야 함) 195 | 196 | - 처음부터 끝까지 반복한다는 시맨틱 197 | - 반복 중간에 끝나지 않는다는 시멘틱 198 | 199 | for()는 함수 코드를 읽어야 알 수 있다 200 | 201 | - break, continue가 있기 때문에 무조건 반복하는 것이 아니다 202 | - 조건에 따라 나올 수 있기 때문에 203 | 204 | forEach()는 반복만 하며 콜백 함수에서 기능을 처리한다.
205 | 206 | forEach()는 인덱스 0부터 시작 207 | 208 | - for()와 같이 인덱스 증가 값을 조정할 수 없음 209 | 210 | ```js 211 | for(var k = 2; ... ; k++){ 212 | 과 같이 초기 시작 인덱스를 정해줄 수 없다는 의미 213 | } 214 | ``` 215 | 216 |
217 | 218 | ## true, false를 반환하는 메소드 219 | 220 | ### every(), some() 221 | 222 | 서로 정 반대되는 의미를 가지기 때문에 한 번에 처리함
223 | forEach()처럼 시멘틱 접근 224 | 225 | - false를 반환할 때까지 콜백 함수 호출 226 | - 즉, false가 반환되면 반복 종료 227 | - false를 반환하지 않으면 true 반환 228 | 229 | ```js 230 | var value = [20, 10, 30, 40]; 231 | var fn = function (el, index, all) { 232 | console.log(el); 233 | return el > 15; // 10을 만나는 순간 false가 되기 때문에 더이상 진행하지않고 나옴 234 | }; 235 | var result = value.every(fn); 236 | console.log('결과', result); // 콘솔창에 '결과'를 찍게됨 237 | >>> 238 | 239 | 20 240 | 10 241 | 결과 : false 242 | ``` 243 | 244 | false가 되는 조건이 배열의 앞에 있을 때 효율성이 높다. 245 | 246 |
247 | 248 | ## filter(), map() 249 | 250 | ### filter() 251 | 252 | forEach()처럼 시멘틱 접근이다
253 | 배열의 엘리먼트를 하나씩 읽어가면서 콜백 함수에서 true를 반환하면 현재 읽은 엘리먼트를 반환
254 | 조건에 맞는 엘리먼트를 추려낼 때 유용하다. 255 | 256 | ```js 257 | var value = [10, 20, 30, 40]; 258 | var fn = function (el, index, all) { 259 | return el > 15; 260 | }; 261 | var result = value.filter(fn); 262 | 263 | console.log(result); 264 | 265 | >>> 266 | [20, 30, 40] 267 | 268 | /* 269 | return 문이 포함된 콜백함수의 조건에 맞게 filter링되었다. 270 | 조건문이 true인 값만 거르고 false를 제거한다. 271 | */ 272 | ``` 273 | 274 | ### map() 275 | 276 | forEach()처럼 시맨틱 접근
277 | 배열의 엘리먼트를 하나씩 읽어가면서 콜백 함수에서 반환한 값을 새로운 배열에 첨부하여 반환 278 | 279 | ```js 280 | var value = [10, 20, 30]; 281 | var fn = function (el, index, all) { 282 | return el + this.num1; 283 | }; 284 | var point = { num1: 100 }; 285 | var result = value.map(fn, point); 286 | 287 | >>> 288 | 289 | 110 290 | 120 291 | 130 292 | ``` 293 | 294 |
295 | 296 | 다음 섹션으로 297 | -------------------------------------------------------------------------------- /BASIC/SECTION14/readme.md: -------------------------------------------------------------------------------- 1 | ## 🌟 자바스크립트 특징 2 | 3 | ### 자바스크립트 특징 4 | 5 | 자바스크립트는 스크립팅 언어입니다
6 | 스크립팅 언어의 특징 7 | 8 | - 소스 파일의 코드를 사전에 컴파일하여 실행 파일을 만들어 놓지 않고 9 | - 사용하는 시점에 컴파일하고 실행 10 | 11 | ```js 12 | var value = 123; 13 | var book = function () { 14 | // function 키워드를 만나면 오브젝트를 생성 15 | // 안의 코드는 컴파일하지 않음 16 | var point = 456; 17 | var getPoint = function () { 18 | return point; 19 | }; 20 | getPoint(); 21 | }; 22 | book(); // book() 메소드를 호출할 때 해당 function을 컴파일하기 시작함 23 | ``` 24 | 25 |
26 | 컴파일 순서 27 | - 소스 파일의 위에서부터 아래로 컴파일 28 | - function 키워드를 만나면 function 오브젝트를 생성 29 | 30 | ### JS와 객체지향 31 | 32 | 객체 지향 프로그래밍 언어 33 | 34 | - OOP: Object Oriented Programming 35 | 36 | 자바스크립트는 객체 지향 언어입니다
37 | 38 | 자바스크립트의 OOP 구현 39 | 40 | - 다른 언어의 OOP 구현과 차이가 있음 41 | - JS의 특징이 반영된 OOP 구현 42 | 43 | ### OOP의 객체 44 | 45 | 객체(Object) 46 | 47 | - 개념적 접근 (실체 x) 48 | - 행위와 속성으로 구성 49 | - 행위 : 먹다, 마시다 50 | - 속성: 밥, 사이다 51 | 52 | > 객체를 형성화하면 53 | 54 | - 행위가 메소드가 되고 55 | - 속성이 프로퍼티가 됩니다. 56 | - 객체가 클래스로 됩니다. 57 | 58 |
59 | 60 | > 클래스 Class 61 | 62 | - 행위와 속성을 정의한 것으로 63 | - 인스턴스로 생성하여 프로그램에서 사용 64 | - 클래스는 new 연산자(생성자)를 사용하여 인스턴스를 생성해야함 65 | 66 |
67 | 68 | ## 자바스크립 객체 형태 69 | 70 | ### JS 객체 형태 71 | 72 | 1. Object 오브젝트 형태 73 | 74 | ```js 75 | var book = { read: function(params){ ... }} 76 | ``` 77 | 78 | - 인스턴스를 생성할 수 없음 79 | 80 | 2. Function 오브젝트 형태 81 | 82 | ```js 83 | function readBook(params){...}; 84 | ``` 85 | 86 | - 객체이지만, OOP의 객체라고 하기에는 부족 87 | 88 | ### prototype 89 | 90 | JS의 OOP 구현 방법 91 | 92 | - prototype에 메소드 연결 93 | 94 | ```js 95 | var Book = function () {}; 96 | // 대문자인 것은 프로토 타입에 연결하여 쓰겠다는 시멘틱적 표현입니다. 97 | 98 | Book.prototype.getBook = function () { 99 | return 'JS북'; 100 | }; 101 | ``` 102 | 103 | - 다른 언어는 class 안에 메소드와 프로퍼티를 작성하지만 104 | - 자바스크립트는 prototype에 메소드를 연결하여 작성합니다. 105 | - ES6에서는 class에 메소드를 작성합니다. 106 | - 하지만, JS 엔진 내부에서 prototype에 연결합니다. 107 | 108 | ```js 109 | class Book { 110 | constructor(title) { 111 | this.title = title; 112 | } 113 | getBook() { 114 | return this.title; 115 | } 116 | } 117 | ``` 118 | 119 |
120 | 121 | ## 자바스크립트 인스턴스 122 | 123 | ### 인스턴스 124 | 125 | - class를 new 연산자로 생성한 것
126 | - ES5에는 클래스가 없지만, 프로토타입으로 연결된 것이 있다면 class로 봅니다.
127 | 128 | ### 인스턴스 목적 129 | 130 | - Class에 작성된 메소드 사용 131 | - 인스턴스마다 프로퍼티 값을 유지 132 | - 축구 경기에서 각 팀에 적용되는 규칙(= 메소드)은 같지만, 팀마다 점수(= 프로퍼티의 값)는 다릅니다. 133 | 134 | ### new 연산자 135 | 136 | 인스턴스를 생성하여 반환 137 | 138 | ```js 139 | var Book = function (point) { // 2. 전달 받은 파라미터를 point 에 넣어줌 this.point = 200; 140 | this.point = point; 141 | }; 142 | 143 | Book.prototype.getPoint = function () { 144 | return this.point + 100; // 3. getPoint함수를 실행할 때, 전달받은 파라미터를 넘겨주고 반환 145 | }; 146 | 147 | var oneInstance = new Book(200); // 1. new 생성자를 이용해 인스턴스 생성 및 파라미터 전달(200) 148 | 149 | console.log(oneInstace.getPoint()); // 4. 결과값 출력 150 | 151 | >>> 152 | 300 153 | ``` 154 | 155 |
156 | 157 | ## 메소드 형태 158 | 159 | 1. 데이터 형태 160 | 161 | - 배열: ["book", "책", 123]; 162 | 163 | 2. OOP의 일반적인 형태 164 | 165 | ```js 166 | var data = ['book', '책', 123]; 167 | var obj = new Array(); // obj의 엘리먼트는 아직 선언하지 않았기 때문에 빈 배열 상태 168 | var result = obj.concat(data); 169 | console.log(result); 170 | 171 | >>> 172 | [book, 책, 123] 173 | ``` 174 | 175 | 3. 자바스크립트 형태 176 | > 데이터로 메소드 호출 177 | 178 | ```js 179 | var data = ['book', '책', 123]; 180 | var result = data.concat(); 181 | console.log(result); 182 | 183 | >>> 184 | [book, 책, 123] 185 | 186 | /* 187 | JS 엔진이 data 타입에 따라 오브젝트를 결정 188 | data가 배열이므로 Array의 프로토타입인 concat() 호출, data를 파라미터로 넘겨줌 189 | 일반적인 OOP로는 말이 안됨 why? Array() 오브젝트를 통해 인스턴스를 만들어주지 않았기 때문 190 | but JS 엔진에 의해 가능 (JS OOP의 특징) 191 | */ 192 | ``` 193 | 194 | > 오브젝트 함수 호출 195 | 196 | ```js 197 | var data = ['book', '책', 123]; 198 | var bookObj = { 199 | concat: function (data) { 200 | return data.concat(); 201 | }, 202 | }; 203 | 204 | console.log(bookObj.concat(data)); 205 | >>> 206 | [book, 책, 123] 207 | ``` 208 | 209 | > 인스턴스의 메소드 호출 210 | 211 | ```js 212 | var data = ['book', '책', 123]; 213 | var Book = function (data) { 214 | this.data = data; 215 | }; 216 | Book.prototype.concat = function () { 217 | return this.data.concat(); 218 | }; 219 | var oneInstance = new Book(data); 220 | console.log(oneInstance.concat()); 221 | ``` 222 | 223 |
224 | 225 | 다음 섹션으로 226 | -------------------------------------------------------------------------------- /BASIC/SECTION15/parse.js: -------------------------------------------------------------------------------- 1 | var value = '123'; 2 | try { 3 | var result = JSON.parse(value); 4 | } catch (e) { 5 | console.log('JSON 파싱 에러'); 6 | } 7 | console.log(result); 8 | console.log(typeof result); 9 | 10 | var value2 = true; 11 | var result2 = JSON.parse(value2); 12 | console.log(result2); 13 | console.log(typeof result2); 14 | 15 | var value3 = { point: '123' }; 16 | var result3 = JSON.parse(value3); 17 | console.log(result3); 18 | -------------------------------------------------------------------------------- /BASIC/SECTION15/readme.md: -------------------------------------------------------------------------------- 1 | ## 🌟 JSON 오브젝트 2 | 3 | ### JSON 오브젝트 개요 4 | 5 | JavaScript Object Notation 6 | 7 | - 빌트인 오브젝트 8 | - new 연산자로 인스턴스 생성 불가 9 |
10 | 11 | JSON 주요 기능 12 | 13 | - 데이터 송수신의 변환 기준 14 | > XML 에서 JSON 으로 차차 변화 15 | - 텍스트이므로 전송 속도가 빠르다 16 | > XML은 파일이기 때문에 상대적으로 무거웠음 17 | - 파일 확장자: .json, .txt 도 사용 가능 18 | 19 |
20 | 21 | JS 데아터 타입 지원 22 | 23 | - 다른 언어도 사용하지만, 완전하게 같지 않을 수도 있음 24 | 25 | ### stringify() 26 | 27 | JS 타입을 JSON 타입의 문자열로 변환 28 | 29 | - JSON.stringify() 형태로 호출 30 | 31 | ### 1. 파라미터가 하나일 때 32 | 33 | ```js 34 | code 1: 큰 따옴표 안에 작성됨 35 | 36 | var value = { book: '책', title: 123 }; 37 | 38 | var result = JSON.stringify(value); 39 | console.log(result); 40 | 41 | >>> 42 | {"book" : "책", "title" : 123 } 43 | ``` 44 | 45 | ```js 46 | code 2: 배열 변환 47 | 48 | var value = { 'book', '책', 123}; 49 | var result = JSON.stringify(value); 50 | console.log(result); 51 | 52 | >>> 53 | ["book", "책", 123] 54 | ``` 55 | 56 | ```js 57 | code 3 : 특수한 값 변환 58 | 59 | console.log(JSON.stringify([Infinity, NaN, null])); 60 | console.log(JSON.stringify([true, false])); 61 | 62 | >>> 63 | [null, null, null] 64 | [true, false] 65 | 66 | /* 67 | Infinity, NaN, null 은 null로 변환됩니다. 68 | true, false는 변환하지 않습니다. 69 | */ 70 | ``` 71 | 72 | ```js 73 | code 4: undefined 변환 74 | 75 | console.log(JSON.stringify(undefined)); 76 | console.log(JSON.stringify([undefined])); 77 | console.log(JSON.stringify({ value : undefined })); 78 | 79 | >>> 80 | undefined 81 | [null] 82 | {} 83 | 84 | /* 85 | 값이 하나면 그대로 변환 86 | undefined가 배열 안에 있으면 null로 변환 87 | 프로퍼티 값이면 해당 프로퍼티를 제외시킴 >>> {key: value}의 프로퍼티 전체를 제외 88 | */ 89 | ``` 90 | 91 | ### 2. 파라미터가 두 개일 때 92 | 93 | ```js 94 | code 1 : 두 번째 파라미터에 함수 작성 95 | 96 | var data = { book: '책', point: 65 }; 97 | function replace(key, value) { 98 | return key === 'point' ? 11 : value; 99 | } 100 | 101 | var result = JSON.stringify(data, replace); 102 | console.log(result); 103 | >>> 104 | {"book": "책", "point" : 11} 105 | ``` 106 | 107 | ```js 108 | code 2: 두 번째 파라미터에 배열 작성 109 | 110 | var data = { book: '책', point: 65, amount : 90 }; 111 | var result = JSON.stringify(data, ['book', 'amount']); 112 | console.log(result); 113 | 114 | >>> 115 | {"book" : "책", "amount" : 90} 116 | /* 117 | stringify() 의 두 번쨰 파라미터 배열에 포함된 프로퍼티{key: value}만 출력합니다. 118 | */ 119 | ``` 120 | 121 | ### 2. 파라미터가 세 개일 때 122 | 123 | ```js 124 | code 1: 세 번째 파라미터에 줄 분리 작성 125 | 126 | var data = {sports: 'soccer', time: 90}; 127 | var result = JSON.stringify(data, "", '\n'); 128 | console.log(result); 129 | 130 | >>> 131 | { 132 | "sports" : "soccer", 133 | "time" : 90 134 | } 135 | ``` 136 | 137 | ```js 138 | code 2: 들여쓰기 숫자 작성 139 | 140 | var data = {sports: 'soccer', time: 90}; 141 | var result = JSON.stringify(data, "", 4); // 세 번째 파라미터에 숫자는 들여쓰기 자릿수입니다. 142 | console.log(result); 143 | 144 | >>> 145 | { 146 | "sports" : "soccer", 147 | "time": 90 148 | } 149 | 150 | ``` 151 | 152 |
153 | 154 | ## JSON 타입 파싱 ( parse( ) ) 155 | 156 | JSON 타입을 JS 타입으로 변환 157 | 158 | ```js 159 | code 1 : JSON 값이 숫자일 때, 160 | 161 | var value= "123"; 162 | try { 163 | var result = JSON.parse(value); 164 | } catch(e){ 165 | console.log("JSON 파싱 에러"); 166 | } 167 | console.log(result); 168 | console.log(typeof result); 169 | 170 | >>> 171 | 123 172 | number 173 | /* 174 | - JS 엔진에 의해 " " 문자열로 작성되었더라도 number 타입으로 파싱해줍니다. 175 | - 이는 JS의 특징입니다. 176 | - 또한 try{} catch{} 문으로 감싸주는 이유는 177 | - 일반적으로 JSON.parse()를 사용하는 경우가 서버나 JSON으로 작성된 API문서를 가져올 떄이기 때문에 178 | - 처음 넘어올 때 오류가 발생하지 않는지 try/catch 문으로 감싸주는 것이 좋습니다. 179 | */ 180 | ``` 181 | 182 | ```js 183 | code 2 : JSON 타입이 true, false 일 때 184 | 185 | var value = true; 186 | var result = JSON.parse(value); 187 | console.log(result); 188 | console.log(typeof result;) 189 | 190 | >>> 191 | true 192 | boolean 193 | ``` 194 | 195 | ```js 196 | code 3: 배열에 작성 197 | 198 | var value = ['ABC', '가나', '12']; 199 | var result = JSON.parse(value); 200 | console.log(result); 201 | >>> 202 | ['ABC', '가나', '12'] 203 | // 배열에 작성된 String 타입의 숫자는 숫자로 변환하지 않습니다. 204 | ``` 205 | 206 | ```js 207 | code 4: Object 에 작성 208 | 209 | var value = {"point" : "123"}; 210 | var result = JSON.parse(value); 211 | console.log(result); 212 | 213 | >>> 214 | {point: "123"} 215 | // 일반적인 형변환과 같이 Object 안에 작성된 String 타입의 숫자는 변환하지 않습니다. 216 | ``` 217 | 218 |
219 | 220 | 처음으로 221 | -------------------------------------------------------------------------------- /BASIC/chapter2.js: -------------------------------------------------------------------------------- 1 | // case 1 삼각형 반복문 2 | 3 | // var result = ""; 4 | // for (var i = 0; i < 7; i++) { 5 | // result += "*"; 6 | // console.log(result); 7 | // } 8 | 9 | // case 2 피즈버즈 10 | // function FizzBuzz(n) { 11 | // for (var k = 1; k <= n; k++) { 12 | // if (k % 15 == 0) { 13 | // console.log("FizzBuzz"); 14 | // } else if (k % 5 == 0) { 15 | // console.log("buzz"); 16 | // } else if (k % 3 == 0) { 17 | // console.log("Fizz"); 18 | // } else { 19 | // console.log(k); 20 | // } 21 | // } 22 | // } 23 | 24 | // FizzBuzz(100); 25 | 26 | // case 3 체스보드 내 답 27 | var turn = 0; 28 | while (turn < 8) { 29 | turn++; 30 | if (turn % 2 == 0) { 31 | console.log(" # # # #"); 32 | } else { 33 | console.log("# # # # "); 34 | } 35 | } 36 | 37 | // case 3 체스보드 솔루션 38 | /* 39 | let size = 8; 40 | let board = ""; 41 | 42 | for (let y = 0; y < size; y++) { 43 | for (let x = 0; x < size; x++) { 44 | if ((x + y) % 2 == 0) { 45 | board += " "; 46 | } else { 47 | board += "#"; 48 | } 49 | } 50 | board += "\n"; 51 | } 52 | 53 | console.log(board); 54 | */ 55 | -------------------------------------------------------------------------------- /BASIC/chapter3.js: -------------------------------------------------------------------------------- 1 | let x = 10; 2 | if (true) { 3 | let y = 20; 4 | var z = 30; 5 | console.log(x + y + z); 6 | } 7 | 8 | console.log(x + z); 9 | -------------------------------------------------------------------------------- /BASIC/ex.js: -------------------------------------------------------------------------------- 1 | /* 프로퍼티 */ 2 | 3 | // const person1 = { 4 | // name: "LEE JUN HEE", 5 | // age: 25, 6 | // }; 7 | 8 | // console.log(person1.name); 9 | 10 | // let doh = "Doh"; 11 | 12 | // console.log(typeof doh.toUpperCase); 13 | 14 | // console.log(doh.toUpperCase()); 15 | 16 | /* 함수와 메소드 */ 17 | 18 | // function AnythingCanUpper(string) { 19 | // let result = string.toUpperCase(string); 20 | // console.log(result); 21 | // } 22 | 23 | // AnythingCanUpper("upper2"); 24 | 25 | // var upper = "upper"; 26 | 27 | // console.log(upper.toUpperCase()); 28 | 29 | /* 객체의 접근 */ 30 | 31 | /* 32 | let day1 = { 33 | squirrel: false, 34 | events: ["work", "touched tree", "pizza", "running"], 35 | morning: { 36 | squirrel: false, 37 | events: ["work", "touched tree"], 38 | inner: { 39 | events: { 40 | work() { 41 | return "work"; 42 | }, 43 | touchedTree() { 44 | return "touched tree"; 45 | }, 46 | }, 47 | }, 48 | }, 49 | }; 50 | console.log(day1.squirrel); 51 | 52 | console.log(day1.wolf); // 객체내에 정의되지 않음 53 | 54 | console.log(day1.morning.inner.events.touchedTree()); 55 | */ 56 | 57 | /* 객체의 변형과 참조 */ 58 | 59 | /* 60 | // case 1, 동일한 객체에 두개의 참조가 있는 경우 61 | const object1 = { value: 10 }; 62 | const object2 = object1; 63 | 64 | // case 2, 다른 객체가 같은 속성 { value : 10 }을 가지고 있는 경우 65 | const object3 = { value: 10 }; 66 | 67 | console.log(object1 == object2); 68 | 69 | console.log(object1 === object2); 70 | 71 | console.log(object1 == object3); 72 | 73 | // value 의 값을 변경 74 | object1.value = 15; 75 | 76 | console.log(object1.value); 77 | 78 | console.log(object2.value); 79 | 80 | console.log(object3.value); 81 | */ 82 | 83 | /* 84 | const score = { visitors: 0, home: 0 }; 85 | 86 | score.visitors = 1; 87 | 88 | console.log(score); 89 | 90 | score = { visitors: 1, home: 1 }; 91 | 92 | console.log(score); 93 | */ 94 | 95 | /* 96 | Queue를 통해 관리하는 Array객체의 메서드 unshift, shift 97 | 98 | let todoList = []; 99 | function remember(task) { 100 | todoList.push(task); 101 | } 102 | function getTask() { 103 | return todoList.shift(); 104 | } 105 | function rememberUrgently(task) { 106 | todoList.unshift(task); 107 | } 108 | 109 | remember("멍멍이"); 110 | console.log(todoList); 111 | remember("야옹이"); 112 | console.log(todoList); 113 | 114 | console.log(getTask()); 115 | console.log(todoList); 116 | rememberUrgently("멍멍이"); 117 | console.log(todoList); 118 | */ 119 | 120 | /* 121 | JSON 객체 사용 122 | 123 | let string = JSON.stringify({ squirrel: false, events: ["weekend"] }); 124 | 125 | console.log(string); 126 | 127 | console.log(JSON.parse(string).squirrel); 128 | console.log(JSON.parse(string).events); 129 | */ 130 | 131 | /* 132 | var let const 133 | 134 | const halve = function (n) { 135 | return n / 2; 136 | }; 137 | console.log(halve(100)); 138 | var n = 10; 139 | console.log(halve(n)); 140 | var n = 20; 141 | console.log(halve(n)); 142 | */ 143 | 144 | /* 145 | function speak(line) { 146 | console.log(`The ${this.type} rabbits says '${line}'`); 147 | } 148 | 149 | let whiteRabbit = { type: "white", speak }; 150 | let hungryRabbit = { type: "hungry", speak }; 151 | 152 | whiteRabbit.speak("Oh my ears and whiskers, " + "how late it's getting"); 153 | 154 | hungryRabbit.speak("I could use a carrot right now."); 155 | */ 156 | 157 | /* 158 | function normalize() { 159 | console.log(this.coords.map((n) => n / this.length)); 160 | } 161 | 162 | normalize.call({ coords: [0, 2, 3], length: 5 }); 163 | */ 164 | 165 | /* 166 | let empty = {}; 167 | 168 | console.log(empty.toString); 169 | // function toString(){...} 170 | 171 | console.log(empty.toString()); 172 | // [object object] 173 | */ 174 | 175 | /* 176 | let protoRabbit = { 177 | speak(line) { 178 | console.log(`The ${this.type} rabbit says '${line}'`); 179 | }, 180 | }; 181 | 182 | let killerRabbit = Object.create(protoRabbit); 183 | 184 | killerRabbit.type = "killer"; 185 | // type을 설정 186 | killerRabbit.speak(" SKREEEEE! "); 187 | // speak()에 인수로 문자열 " SKREEEEE! " 를 넣어주고 호출했기 때문에 해당 함수가 실행된다. 188 | 189 | killerRabbit.type; 190 | killerRabbit.speak(" SKRRRR! SKRRRR! "); 191 | */ 192 | 193 | /* 194 | function Rabbit(type) { 195 | this.type = type; 196 | } 197 | Rabbit.prototype.speak = function (line) { 198 | console.log(`The ${this.type} rabbit says '${line}'`); 199 | }; 200 | 201 | let weirdRabbit = new Rabbit("Weird"); 202 | weirdRabbit.speak("bow wow!"); 203 | */ 204 | 205 | // console.log("toString" in Object("Jack")); 206 | 207 | /* 208 | // Human class 209 | class Human { 210 | constructor(name, age, sex) { 211 | this.name = name; 212 | this.age = age; 213 | this.sex = sex; 214 | } 215 | sleep() { 216 | console.log("zzz"); 217 | } 218 | eat() { 219 | console.log("냠냠"); 220 | } 221 | } 222 | // Human class의 자식 class인 Student class 223 | // Human class가 가지고 있는 속성인 name, sex, age를 super를 통해 가지고 오고, 고유의 속성인 grade와 school이 추가 되었다. 224 | class Student extends Human { 225 | constructor(name, sex, age, grade, school) { 226 | super(name, sex, age); 227 | this.grade = grade; 228 | this.school = school; 229 | } 230 | // 공부하는 기능도 추가되었다. 231 | study() { 232 | console.log( 233 | `${this.school}에 다니는 ${this.grade} ${this.name}은(는) 열심히 공부합니다` 234 | ); 235 | } 236 | } 237 | 238 | const student1 = new Student("영수", "남성", 19, "고 3", "인덕원 고등학교"); 239 | 240 | student1.eat(); 241 | 242 | student1.study(); 243 | */ 244 | 245 | /* 246 | function canYouSpotTheProblem() { 247 | "use strict"; 248 | for (counter = 0; counter < 10; counter++) { 249 | console.log("Happy happy"); 250 | } 251 | } 252 | canYouSpotTheProblem(); 253 | */ 254 | 255 | /* 256 | "use strict"; 257 | function Person(name) { 258 | this.name = name; 259 | } 260 | let ferdinand = new Person("Ferdinand"); 261 | console.log(ferdinand.name); 262 | */ 263 | 264 | /* 265 | function promptDirection(question) { 266 | let result = prompt(question); 267 | if (result.toLocaleLowerCase() == "left") return "L"; 268 | if (result.toLocaleLowerCase() == "right") return "R"; 269 | throw new Error("Invalid direction: " + result); 270 | } 271 | 272 | function lock() { 273 | if (promptDirection("Which way?") == "L") { 274 | return "a house"; 275 | } else { 276 | return "two angry bears"; 277 | } 278 | } 279 | 280 | try { 281 | console.log("You see", look()); 282 | } catch (error) { 283 | console.log("Something went wrong: " + error); 284 | } 285 | */ 286 | 287 | /* 288 | function square(x) { 289 | if (arguments.length > 1) { 290 | console.log(arguments[1]); 291 | console.log(arguments[2]); 292 | } 293 | return x * x; 294 | } 295 | 296 | console.log(square(4, true, "Hedge hog")); 297 | */ 298 | 299 | /* 300 | let sequence = [1, 2, 3]; 301 | 302 | console.log(sequence.push(4)); 303 | */ 304 | -------------------------------------------------------------------------------- /BASIC/public/Async_Sync.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/BASIC/public/Async_Sync.png -------------------------------------------------------------------------------- /BASIC/public/async.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/BASIC/public/async.png -------------------------------------------------------------------------------- /BASIC/public/async2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/BASIC/public/async2.png -------------------------------------------------------------------------------- /BASIC/public/http.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/BASIC/public/http.png -------------------------------------------------------------------------------- /BASIC/public/polymorphism.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/BASIC/public/polymorphism.png -------------------------------------------------------------------------------- /BASIC/public/promise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/BASIC/public/promise.png -------------------------------------------------------------------------------- /BASIC/public/url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/BASIC/public/url.png -------------------------------------------------------------------------------- /BASIC/public/www.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/BASIC/public/www.png -------------------------------------------------------------------------------- /DEEPDIVE/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules -------------------------------------------------------------------------------- /DEEPDIVE/MDN.js: -------------------------------------------------------------------------------- 1 | /* 2 | 정적 메서드만 지원하는 Math 빌트인 객체의 경우 인스턴스를 생성하지 않더라도 사용이 가능하다. 3 | 4 | - Math.floor() 5 | - Math.max() 6 | - Math.ceil() 7 | ... 8 | */ 9 | 10 | // console.log(Math.floor(2.5)); 11 | 12 | // const num1 = 2.5; 13 | // console.log(Math.floor(num1)); 14 | 15 | // console.log(typeof num1); 16 | 17 | /* 18 | 하지만 19 | 20 | String.prototype.toUpperCase() 21 | String.prototype.toLowerCase() 22 | 23 | 와 같이 프로토타입 프로퍼티에 속해있는 메서드인 경우 인스턴스를 생성하지 않으면 사용이 불가능하다. 24 | 25 | console.log(String.toUpperCase("hi")); // String.toUpperCase is not a function 26 | */ 27 | 28 | /* 일반적인 변수 선언 */ 29 | 30 | const UPPER = "hi"; 31 | 32 | console.log(UPPER); 33 | 34 | console.log("typeof:", typeof UPPER); // typeof: string why ? 자바스크립트 엔진에 의해 문자열로 암묵적 형변환이 되었다 35 | 36 | console.log("UPPER.prototype: ", UPPER.prototype); // undefined new 연산자를 통해 생성한 인스턴스가 아니기 때문에 prototype 프로퍼티를 갖지는 않는다 37 | 38 | console.log("UPPER.constructor:", UPPER.constructor); // [Function: String] 39 | 40 | console.log("UPPER.toUpperCase():", UPPER.toUpperCase()); // UPPER.toUpperCase(): HI 41 | 42 | console.log("------------------------------------"); 43 | 44 | /* new 연산자를 통해 생성자 함수로 인스턴스 생성 */ 45 | 46 | const LOWER = new String("HI"); 47 | 48 | console.log(LOWER); // [String: 'HI'] 49 | 50 | console.log(typeof LOWER); // object 51 | 52 | console.log(LOWER.prototype); // undefined 53 | 54 | console.log(LOWER.constructor); // [Function: String] 55 | 56 | console.log(LOWER.toLowerCase()); // hi 57 | 58 | /* 59 | 21.3 원시값과 래퍼 객체 60 | */ 61 | -------------------------------------------------------------------------------- /DEEPDIVE/ajax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 41 | 42 | -------------------------------------------------------------------------------- /DEEPDIVE/callback.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 37 | 38 | -------------------------------------------------------------------------------- /DEEPDIVE/callbackhell.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 

11 |   
45 | 
46 | 


--------------------------------------------------------------------------------
/DEEPDIVE/captureBubble.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
19 | 
20 |   
Click me

21 | 
22 | 
54 | 
55 | 
56 | 


--------------------------------------------------------------------------------
/DEEPDIVE/closure.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | let num = 0;
 3 | 
 4 | function plusNum() {
 5 |   num++;
 6 | }
 7 | 
 8 | console.log(num);
 9 | plusNum();
10 | console.log(num);
11 | 
12 | // 수억개의 코드
13 | 
14 | num = 200;
15 | 
16 | console.log(num); // num 값이 쉽게 변경됨
17 | */
18 | 
19 | function closure() {
20 |   let num = 10;
21 | 
22 |   function plusNum() {
23 |     num += 1;
24 |   }
25 | 
26 |   function printNum() {
27 |     console.log(num);
28 |   }
29 | 
30 |   function setNum(val) {
31 |     num = val;
32 |   }
33 | 
34 |   // 함수를 객체 형식으로 리턴하는 이유는 새로 생성한 변수를 (.) 연산자를 통해 (객체와 같은 방식으로) 접근하기 위해서
35 |   // 함수뿐만 아니라 지역 변수도 리턴이 가능하다 (하지만 추천하지 않음)
36 |   // 객체 형식으로 담아서 리턴될 경우에, closure 내부에 정의된 함수 외에도 지역 변수의 값을 변경하는 경우가 생기기 때문에 (객체는 가변성의 성질을 가지므로)
37 | 
38 |   return { num, plusNum, printNum, setNum };
39 | }
40 | 
41 | // console.log("num is:", num); // num is not defined, 상위 스코프에서 하위 스코프로 식별자 검색을 할 수 없음
42 | 
43 | const newNum = closure(); // closure 함수로 newNum 함수를 생성한다.
44 | 
45 | console.log(newNum); // 생성된 함수객체 newNum은 closure 함수가 리턴하는 객체 형식의 프로퍼티와 메서드가 들어있음
46 | 
47 | console.log((newNum.num = 20)); // newNum.num 에 값을 할당 (closure 함수의 메서드를 사용하지 않고 직접 변경)
48 | console.log(newNum); // 객체형식으로 리턴되는 newNum의 특성상 newNum의 프로퍼티인 num의 값이 재할당됨
49 | 
50 | newNum.printNum(); // 하지만 printNum 메서드를 사용하면 기존의 10 출력
51 | 
52 | newNum.setNum(100); // 따라서 지역 변수 num을 변경하기 위해서는 새로운 메서드를 정의하여 값을 전달함으로서 부수효과를 줄어야함
53 | 
54 | newNum.printNum(); // 100 출력
55 | 
56 | // 하지만 지역 변수를 리턴하더라도 원시 타입의 값은 불변성의 성질을 가지기 때문에, 재할당하지 않는 이상 값을 변화시킬 수 없다.
57 | // 따라서 함수를 통해 반환하여 사용하는 것이 올바르다.
58 | 


--------------------------------------------------------------------------------
/DEEPDIVE/debounce.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   

 6 |   
29 | 
30 | 
31 | 


--------------------------------------------------------------------------------
/DEEPDIVE/error.js:
--------------------------------------------------------------------------------
1 | try {
2 |   // 에러 객체를 던지면 catch 코드 블록이 실행되기 시작한다.
3 |   throw new Error("something wrong");
4 | } catch (error) {
5 |   console.log(error);
6 | }
7 | 


--------------------------------------------------------------------------------
/DEEPDIVE/event.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 | 	
  5 | 	Event Delegation
  6 | 	
  7 | 	
 58 | 	
 59 | 	
 62 | 
 63 | 
 64 | 	

 65 | 		
 69 | 		
 73 | 		
 77 | 	

 78 | 
 79 | 	
 98 | 
 99 | 
100 | 
101 | 


--------------------------------------------------------------------------------
/DEEPDIVE/event2.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 |   
39 | 
40 | 
41 |   

42 |     DIV1
43 |     

44 |       DIV2
45 |       
DIV3

46 |     

47 |   

48 |   
58 | 
59 | 
60 | 
61 | 
62 | 


--------------------------------------------------------------------------------
/DEEPDIVE/eventDelegation.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 	eventDelegation
 6 | 	
 7 |   
15 | 
16 | 
17 | 
18 | 	

19 | 		
20 | 		
21 | 		
22 | 		
23 | 		
24 | 	

25 | 	
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/DEEPDIVE/evntloop.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   
35 | 
36 | 


--------------------------------------------------------------------------------
/DEEPDIVE/ex.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
26 |   
27 |     
28 |     

29 |       
30 |     

31 |     
61 |   
62 | 


--------------------------------------------------------------------------------
/DEEPDIVE/ex.js:
--------------------------------------------------------------------------------
 1 | var foo;
 2 | console.log(typeof foo); // undefined
 3 | 
 4 | foo = 3;
 5 | console.log(typeof foo); // number
 6 | 
 7 | foo = "Hello";
 8 | console.log(typeof foo); // string
 9 | 
10 | foo = true;
11 | console.log(typeof foo); // boolean
12 | 
13 | foo = null;
14 | console.log(typeof foo); // object
15 | 
16 | foo = Symbol(); // 심벌
17 | console.log(typeof foo); // symbol
18 | 
19 | foo = {}; // 객체
20 | console.log(typeof foo); // object
21 | 
22 | foo = []; // 배열
23 | console.log(typeof foo); // object
24 | 
25 | foo = function () {}; // 함수
26 | console.log(typeof foo); // function
27 | 
28 | let foo2 = 10;
29 | console.log(foo2);
30 | 
31 | const foo3 = 20;
32 | console.log(foo3);
33 | 


--------------------------------------------------------------------------------
/DEEPDIVE/ex2.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
11 |   
12 | 


--------------------------------------------------------------------------------
/DEEPDIVE/ex3.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
21 | 
22 | 
23 | 


--------------------------------------------------------------------------------
/DEEPDIVE/fetch.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   

11 |   
70 | 
71 | 


--------------------------------------------------------------------------------
/DEEPDIVE/fetchResponse.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   
19 | 
20 | 


--------------------------------------------------------------------------------
/DEEPDIVE/gitFetch.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   

11 |   
22 | 
23 | 


--------------------------------------------------------------------------------
/DEEPDIVE/images/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/11_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/11_1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/11_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/11_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/11_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/11_3.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/11_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/11_4.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/11_7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/11_7.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/11_8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/11_8.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/11_9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/11_9.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/12_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/12_1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/12_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/12_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/12_5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/12_5.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/12_6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/12_6.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/12_7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/12_7.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/12_8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/12_8.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/13_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/13_1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/13_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/13_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/13_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/13_3.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/15_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/15_3.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/19_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/19_1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/19_10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/19_10.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/19_11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/19_11.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/19_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/19_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/19_9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/19_9.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/25_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/25_1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/25_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/25_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/26.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/26.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/26_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/26_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/27.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/27.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/27_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/27_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/28.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/28.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/29_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/29_1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/29_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/29_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/30_1.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/30_1.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/30_10.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/30_10.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/30_11.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/30_11.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/30_12.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/30_12.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/30_13.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/30_13.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/30_2.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/30_2.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/30_3.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/30_3.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/30_4.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/30_4.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/30_5.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/30_5.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/30_6.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/30_6.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/30_7.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/30_7.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/30_8.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/30_8.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/30_9.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/30_9.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/31_1.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/31_1.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/31_2.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/31_2.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/31_3.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/31_3.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/31_4.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/31_4.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/31_5.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/31_5.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/32_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/32_1.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/32_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/32_2.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/33_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/33_1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/33_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/33_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/33_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/33_3.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/33_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/33_4.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/34_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/34_1.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/35_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/35_1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/35_10.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/35_10.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/35_11.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/35_11.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/35_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/35_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/35_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/35_3.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/35_4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/35_4.jpeg


--------------------------------------------------------------------------------
/DEEPDIVE/images/35_5.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/35_5.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/35_7.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/35_7.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/35_8.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/35_8.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/35_9.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/35_9.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/36_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/36_1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/36_10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/36_10.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/36_11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/36_11.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/36_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/36_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/36_3.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/36_3.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/36_4.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/36_4.JPG


--------------------------------------------------------------------------------
/DEEPDIVE/images/36_5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/36_5.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/36_6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/36_6.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/36_7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/36_7.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/36_8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/36_8.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/36_9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/36_9.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/37_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/37_1.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/37_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/37_2.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/37_3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/37_3.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/37_4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/37_4.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/37_5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/37_5.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/37_6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/37_6.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/38_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/38_1.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/38_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/38_2.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/39_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/39_1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/39_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/39_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/39_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/39_3.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/39_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/39_4.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/39_5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/39_5.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/40_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/40_1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/40_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/40_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/40_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/40_3.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/40_4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/40_4.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/41_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/41_1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/41_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/41_2.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/41_3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/41_3.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/41_4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/41_4.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/41_5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/41_5.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/41_6.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/41_6.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/42_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/42_1.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/4_9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/4_9.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/5_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/5_2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/async.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/async.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/closure1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/closure1.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/closure2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/closure2.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/closure3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/closure3.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/coca.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/coca.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/debounce.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/debounce.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/debounce2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/debounce2.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/delete.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/delete.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/dir.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/dir.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/get.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/get.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/get_one.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/get_one.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/gocha1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/gocha1.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/gocha2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/gocha2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/loopResult.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/loopResult.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/memory.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/memory.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/memory2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/memory2.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/memory3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/memory3.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/nonSleep.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/nonSleep.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/patch.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/patch.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/pepsi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/pepsi.png


--------------------------------------------------------------------------------
/DEEPDIVE/images/post.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/post.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/proto21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/proto21.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/proto22.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/proto22.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/proto23.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/proto23.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/proto24.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/proto24.jpg


--------------------------------------------------------------------------------
/DEEPDIVE/images/put.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/put.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/sleep.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/sleep.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/throttle.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/throttle.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/throttle2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/throttle2.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/timer.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/timer.gif


--------------------------------------------------------------------------------
/DEEPDIVE/images/window_console.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junh0328/upgrade_javascript/045b5dca6c23c7d95fe1572f7af9a1986ee9b966/DEEPDIVE/images/window_console.png


--------------------------------------------------------------------------------
/DEEPDIVE/loop.js:
--------------------------------------------------------------------------------
 1 | function printNum(n) {
 2 |   console.log(n);
 3 | }
 4 | 
 5 | printNum(1);
 6 | setTimeout(() => printNum(2), 3000);
 7 | setTimeout(() => printNum(3), 2000);
 8 | setTimeout(() => printNum(4), 1000);
 9 | printNum(5);
10 | 


--------------------------------------------------------------------------------
/DEEPDIVE/mouse.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   
11 |   
12 |   
13 |   
26 | 
27 | 


--------------------------------------------------------------------------------
/DEEPDIVE/nodeFetch.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   

11 |   
24 | 
25 | 


--------------------------------------------------------------------------------
/DEEPDIVE/promise.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   

11 |   
43 | 
44 | 


--------------------------------------------------------------------------------
/DEEPDIVE/scope.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   
19 | 
20 | 


--------------------------------------------------------------------------------
/DEEPDIVE/serial.js:
--------------------------------------------------------------------------------
 1 | const obj = {
 2 |   name: "Lee",
 3 |   age: 20,
 4 |   alive: true,
 5 |   hobby: ["traveling", "tennis"],
 6 | };
 7 | 
 8 | // 객체를 JSON 포맷의 문자열로 변환한다.
 9 | const json = JSON.stringify(obj);
10 | console.log(typeof json, json);
11 | 
12 | // 객체를 JSON 포맷의 문자열로 변환하면서 들여쓰기 한다.
13 | const prettyJson = JSON.stringify(obj, null, 2);
14 | console.log(typeof prettyJson, prettyJson);
15 | 
16 | // replacer 함수. 값의 타입이 Number이면 필터링되어 반환되지 않는다.
17 | function filter(key, value) {
18 |   return typeof value === "number" ? undefined : value;
19 | }
20 | 
21 | const strFilteredObject = JSON.stringify(obj, filter, 2);
22 | console.log(typeof strFilteredObject, strFilteredObject);
23 | 


--------------------------------------------------------------------------------
/DEEPDIVE/taskQueue.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   

11 |   
36 | 
37 | 


--------------------------------------------------------------------------------
/DEEPDIVE/throttle.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
17 | 
18 | 
19 |   

20 |     

21 |   

22 |   

23 |     일반 이벤트 핸들러가 scroll 이벤트를 처리한 횟수:
24 |     0
25 |   

26 |   

27 |     스로틀 이벤트 핸들러가 scroll 이벤트를 처리한 횟수:
28 |     0
29 |   

30 | 
31 |   
62 | 
63 | 
64 | 


--------------------------------------------------------------------------------
/DEEPDIVE/time.js:
--------------------------------------------------------------------------------
 1 | (function printNow() {
 2 |   const today = new Date();
 3 | 
 4 |   const dayNames = [
 5 |     "(일요일)",
 6 |     "(월요일)",
 7 |     "(화요일)",
 8 |     "(수요일)",
 9 |     "(목요일)",
10 |     "(금요일)",
11 |     "(토요일)",
12 |   ];
13 |   // getDay 메서드는 해당 요일(0 ~ 6)을 나타내는 정수를 반환한다.
14 |   const day = dayNames[today.getDay()];
15 | 
16 |   const year = today.getFullYear();
17 |   const month = today.getMonth() + 1;
18 |   const date = today.getDate();
19 |   let hour = today.getHours();
20 |   let minute = today.getMinutes();
21 |   let second = today.getSeconds();
22 |   const ampm = hour >= 12 ? "PM" : "AM";
23 | 
24 |   // 12시간제로 변경
25 |   hour %= 12;
26 |   hour = hour || 12; // hour가 0이면 12를 재할당
27 | 
28 |   // 10미만인 분과 초를 2자리로 변경
29 |   minute = minute < 10 ? "0" + minute : minute;
30 |   second = second < 10 ? "0" + second : second;
31 | 
32 |   const now = `${year}년 ${month}월 ${date}일 ${day} ${hour}:${minute}:${second} ${ampm}`;
33 | 
34 |   console.log(now);
35 | 
36 |   // 1초마다 printNow 함수를 재귀 호출한다. 41.2.1절 "setTimeout / clearTimeout" 참고
37 |   setTimeout(printNow, 1000);
38 | })();
39 | 


--------------------------------------------------------------------------------
/DEEPDIVE/timer.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
일반 클릭 이벤트 카운터    0

 6 |   
디바운스 클릭 이벤트 카운터 0

 7 |   
스로틀 클릭 이벤트 카운터   0

 8 |   
45 | 
46 | 
47 | 
48 | 


--------------------------------------------------------------------------------
/DEEPDIVE/timer.js:
--------------------------------------------------------------------------------
 1 | let count = 1;
 2 | 
 3 | const timeoutId = setInterval(() => {
 4 |   console.log(count); // 1 2 3 4 5
 5 | 
 6 |   if (count++ === 5) clearInterval(timeoutId);
 7 | }, 1000);
 8 | 
 9 | console.log("timeoutId: ", timeoutId);
10 | 


--------------------------------------------------------------------------------
/ES6/SECTION01/readme.md:
--------------------------------------------------------------------------------
  1 | ## let, const 변수
  2 | 
  3 | ### 변수 구분
  4 | 
  5 | 로컬(지역)변수, 글로벌(전역)변수 

  6 | 변수를 구분하는 이유는?
  7 | 
  8 | - 기능과 목적이 다르기 때문
  9 | 
 10 | 글로벌 변수의 기능, 목적
 11 | 
 12 | - 다른 js 파일에서 변수의 값을 공유
 13 | - 파일에서 공통 변수 개념으로 사용
 14 | - 의도는 좋으나 처리 속도가 떨어짐
 15 | 
 16 | 로컬 변수의 기능, 목적
 17 | 
 18 | - 빠르게 식별자를 해결하기 위해 가까운 스코프의 변수를 사용하려는 것
 19 | - 스코프란 범위라는 뜻으로, 중괄호(=블럭) {...} 내부에 선언된 식(코드)를 말한다.
 20 | 
 21 | ```js
 22 | // "use strict";
 23 | value = 100;
 24 | function point() {
 25 |   value = 300;
 26 |   console.log('함수:', value);
 27 | }
 28 | point();
 29 | 
 30 | >>> 함수: 300
 31 | /*
 32 | 글로벌 변수로 값을 할당한 value는 다른 파일에서도 이 변수를 사용할 수 있기 때문에,
 33 | 함수 안에서 글로벌 변수의 값을 바꾸는 것은 좋지 않다.
 34 | but, 작동은 됨
 35 | */
 36 | ```
 37 | 
 38 | ```js
 39 | 'use strict';
 40 | 
 41 | debugger;
 42 | 
 43 | function point() {
 44 |   try {
 45 |     value = 300;
 46 |   } catch (e) {
 47 |     console.error(e);
 48 |     console.log('글로벌 변수 사용 불가');
 49 |   }
 50 | }
 51 | point();
 52 | 
 53 | >>> value is not defined;
 54 | >>> 글로벌 변수 사용 불가
 55 | 
 56 | /*
 57 | 따라서 규칙을 지켜주기 위해 'use strict'를 사용한다.
 58 | 결과는 적으로 글로벌 변수를 함수 안에서 값을 바꿔 사용하지 말라는 내용과 함께
 59 | 에러가 발생하게 된다.
 60 | */
 61 | ```
 62 | 
 63 | > ES6 부터는 이 'use strict'가 default environment이다
 64 | > 'use strict'를 선언하고 코드를 작성하는 것이 안정적일 것이다
 65 | 
 66 | 

 67 | 
 68 | ## 블록 스코프
 69 | 
 70 | 블록 기준
 71 | 
 72 | - 중괄호 {코드}
 73 | - function name(){코드}
 74 | - if(a===1){코드}
 75 | 
 76 | 블록 안과 밖이 스코프가 다름
 77 | 
 78 | - 변수이름이 같아도 값이 대체되지 않음
 79 | 
 80 | 스코프에 같은 이름 사용 불가
 81 | 
 82 | ### function 블록 스코프
 83 | 
 84 | function 안과 밖에 같은 이름의 let 변수 선언이 가능하다
 85 | 
 86 | - 스코프가 다르기 때문
 87 | 
 88 | ```js
 89 | let sports = '축구';
 90 | if (sports) {
 91 |   let sports = '농구';  // 블록 {...}, 안에서 생성된 변수는 밖의 변수명과 같아도 각각 존재하게 된다
 92 |   console.log('안: ', sports);
 93 | }
 94 | console.log('밖: ', sports);
 95 | 
 96 | >>>
 97 | 안 : 농구
 98 | 밖 : 축구
 99 | ```
100 | 
101 | function 밖의 let 변수를
102 | 
103 | - function 안에서 사용 가능(클로저)
104 | 
105 | ```js
106 | let sports = '축구';
107 | function show() {
108 |   console.log(sports);
109 | }
110 | show();
111 | 
112 | >>>
113 | 축구
114 | ```
115 | 
116 | ### try-catch 블록 스코프
117 | 
118 | try 블록 { } 기준으로 안과 밖에 같은 이름의 let 변수 선언이 가능 

119 | 하지만, catch() 문에서는 try 밖의 변수 사용 가능 

120 | 
121 | ```js
122 | let sports = '축구';
123 | try {
124 |   let sports = '농구';
125 |   console.log('안: ', sports);
126 |   abc = error;
127 | } catch (e) {
128 |   console.log('catch: ', sports);  // catch() 문에서는 try 밖의 변수 사용 가능
129 | }
130 | console.log('밖: ', sports);
131 | 
132 | >>>
133 | 안 : 농구
134 | catch : 축구
135 | 밖 : 축구
136 | ```
137 | 
138 | 

139 | 
140 | ## let 변수 개요
141 | 
142 | ```js
143 | let book = '책';
144 | if(book){
145 |   let book = "책방";
146 |   console.log(book);    >> 책방  // let 변수는 블록 스코프에 따라 값이 각각 존재한다.
147 | }
148 | console.log(book);      >> 책
149 | 
150 | /*
151 | var 변수였다면, 해당 값을 덮어 씌워서 마지막에 할당된 값 ("책방")이 출력됐을 것
152 | 이것이 블록 스코프를 가지는 let 변수의 특징이다.
153 | */
154 | ```
155 | 
156 | - 블록 스코프를 가진 변수
157 | - 변수가 선언된 블록이 스코프
158 | 
159 | 스코프 적용 기준
160 | 
161 | - 블록{}, 문, 표현식
162 | 
163 | 블록{}안과 밖이 스코프가 다름
164 | 
165 | - 변수 이름이 같아도 값이 대체되지 않음
166 | 
167 | ### let 변수 선언
168 | 
169 | 값을 할당하지 않고 변수만 선언할 수 있습니다. 

170 | 초깃값으로 undefined가 할당됩니다. 

171 | 콤마로 구분하여 다수를 선언할 수 있습니다.
172 | 
173 | ```js
174 | let book;
175 | let sport1, sport2;
176 | ```
177 | 
178 | ### let 변수와 this
179 | 
180 | 글로벌 오브젝트에서 let 변수를 this로 참조 불가

181 | 
182 | ```js
183 | var music = '음악';
184 | let sports = '축구';
185 | 
186 | console.log(this.music, this.sports);
187 | 
188 | >>>
189 | 음악, undefined
190 | 
191 | /*
192 | let 변수는 글로벌 오브젝트로 선언해도 window 오브젝트에 설정되지 않습니다.
193 | 
194 | var 변수는 선언되기 때문에 this 로 참조하여 음악이라는 값을 가져올 수 있지만,
195 | let 변수는 선언되지 않기 때문에 값을 할당하지 않았다는 undefined가 출력됩니다.
196 | */
197 | ```
198 | 
199 | ### 다수의 js 파일 사용 정리
200 | 
201 | 글로벌 오브젝트에 작성
202 | 
203 | ```js
204 | var globalVar = 'var 변수'; // 글로벌 오브젝트에 설정되어 window 오브젝트에 공유
205 | let globalLet = 'let 변수'; // Script에 설정되어 공유 (window 오브젝트에 저장되지는 않지만 값을 공유한다는 측면은 같음)
206 | 
207 | {
208 |   let globalBlock = 'block 변수'; // 블록 스코프에 작성되면 공유하지 않고, 블록 내부에서만 쓸 수 있는 변수로 만들어짐 (local 변수)
209 | }
210 | ```
211 | 
212 | - var 변수 : window 오브젝트에 설정, 공유
213 | - let 변수 : Script에 설정, 공유
214 | 
215 |   > window.sports = {...} 처럼 의도적으로 작성하지 않아도 됨
216 | 
217 | - { let 변수 } : Block {}에 설정, 공유하지 않음
218 |   > 글로벌 오브젝트에서만 사용하는 로컬 변수로 사용
219 | 
220 | 함수에 작성
221 | 
222 | ```js
223 | function showLocal() {
224 |   var localVar = 'var 변수';
225 |   let localLet = 'let 변수';
226 |   {
227 |     let blockLet = 'block 변수';
228 |     // 블록 스코프 안에서는 위에 선언한 localVar, localLet을 사용할 수 있지만, 위에서는 사용 불가
229 |     // why? 블록 내부에서만 선언된 지역(local) 변수이기 때문
230 |   }
231 | }
232 | ```
233 | 
234 | - var 변수, let 변수 : Local;
235 | - { let 변수} : Block;
236 | 
237 | 

238 | 
239 | ## 호이스팅
240 | 
241 | ES5의 실행 콘텍스트 처리 순서
242 | 
243 | - 1. 함수 선언문 설정
244 | - 2. 변수 이름을 바인딩 변숫값은 undefined
245 | - 3. 소스코드 실행
246 | 
247 | ```js
248 | console.log('music 변수: ', music);
249 | var music = '음악';
250 | 
251 | >>>
252 | music 변수 : undefined
253 | // music 이라는 변수를 사용해서 값을 구할 수는 있지만, 실제로 값이 함수보다 늦게 선언되었기 때문에 undefined가 나온다.
254 | // 이처럼 변수가 코드보다 밑에서 선언되더라도 변수값은 비어있지만 끌어다가 사용할 수 있는 것을 호이스팅이라고 합니다
255 | 
256 | /*
257 | 1. music 이라는 변수가 더 늦게 선언되었습니다.
258 | 2. 변수가 아래에 있지만 music 변수를 통해 값을 출력할 수는 있습니다. (실제로는 아직 변수가 밑에 있어서 할당되지 않음)
259 | 3. 아래에 선언된 변수 music을 위의 코드 console에서 땡겨 실행하는 것을 '호이스팅'이라고 합니다.
260 | 4. music이라는 변수의 식별자를 해결하지 못하면 에러가 발생합니다.
261 | */
262 | ```
263 | 
264 | let 변수는 호이스팅되지 않음
265 | 
266 | - 즉, let 변수 앞에서 변수 사용 불가
267 | 
268 | ```js
269 | try {
270 |   console.log(sports);
271 | } catch (e) {
272 |   console.error(e);
273 |   console.log('호이스팅 불가');
274 | }
275 | let sports = '축구';
276 | 
277 | >>>
278 | ReferenceError: Cannot access 'sports' before initialization
279 | 호이스팅 불가
280 | 
281 | // sports 변수가 초기화 되기 전에 접근할 수 없습니다
282 | ```
283 | 
284 | let 변수를 인식하는 시점
285 | 
286 | ```js
287 | 'use strict';
288 | debugger;
289 | 
290 | console.log('변수 호출 :', globalVar);
291 | debugger;
292 | 
293 | var globalVar = 'var 변수';
294 | debugger;
295 | 
296 | try {
297 |   console.log(globalLet);
298 | } catch (e) {
299 |   console.error(e);
300 |   console.log('globalLet 인식하지 못함');
301 | }
302 | 
303 | let globalLet = 'let 변수';
304 | debugger;
305 | 
306 | console.log(globalLet);
307 | debugger;
308 | 
309 | >>>
310 | 변수 호출 : undefined
311 | Cannot access 'globalLet' before initialization
312 | globalLet 인식하지 못함
313 | let 변수
314 | 
315 | /*
316 | var 로 선언한 변수는 선언문이 해당 변수를 부르는 메소드보다 밑에 있더라도 호이스팅에 의해 불러올 수 있다.(값은 undefined)
317 | let 으로 선언한 변수는 호이스팅이 되지 않기 때문에 아예 인식을 하지못하기 때문에 반드시 메소드보다 위에 작성해줘야 한다.
318 | */
319 | ```
320 | 
321 | 

322 | 
323 | ## const 변수
324 | 
325 | 값을 바꿀 수 없는 변수 선언

326 | name1 에 변수 이름 작성, 식별자로 사용
327 | 
328 | ```js
329 | const sports = '축구';
330 | try {
331 |   sports = '농구';
332 | } catch (e) {
333 |   console.error(e);
334 |   console.log('const 할당 불가');
335 | }
336 | 
337 | >>>
338 | Assignment to constant variable.
339 | const 할당 불가
340 | ```
341 | 
342 | value1, value2에 초깃값 작성
343 | 
344 | - 반드시 값을 작성, 변수 선언만 불가
345 | - 표현식 작성 가능, 평가 결과 사용
346 | 
347 | JS에서 상수는 대문자 사용이 관례

348 | 
349 | ```js
350 | const bonus = 100;
351 | const POINT = 200;
352 | ```
353 | 
354 | 우선 let이 아닌 const 사용 여부를 검토
355 | 
356 | - const > let > var 순서로 사용하자
357 | 
358 | ### const 변수
359 | 
360 | - const 변수 전체를 바꿀 수는 없지만,
361 | 
362 |   > Object의 프로퍼티 값을 바꿀 수 있음
363 | 
364 |   ```js
365 |   const book = { tilte: '책' };
366 |   try {
367 |     book = { title: '음악 책' };    // 프로퍼티 전체를 바꿀 수는 없습니다.
368 |   } catch {
369 |     console.log('const 전체 할당 불가');
370 |   }
371 |   book.title = '미술 책';           // 프로퍼티(ket: value)의 일부인 값(value)는 바꿀 수 있습니다. (한개 씩만 가능)
372 |   console.log(book.title);
373 | 
374 |   >>>
375 |   const 전체 할당 불가
376 |   미술 책
377 |   ```
378 | 
379 |   > 배열의 엘리먼트 값도 바꿀 수 있음
380 | 
381 |   ```js
382 |   const book = ['책'];
383 |   try {
384 |     book = ['음악 책'];
385 |   } catch (e) {
386 |     console.log('const 전체 할당 불가');
387 |   }
388 |   book[0] = '미술 책';
389 |   console.log(book[0]);
390 | 
391 |   >>>
392 |   const 전체 할당 불가
393 |   미술 책
394 |   ```
395 | 


--------------------------------------------------------------------------------
/ES6/SECTION02/arrow.js:
--------------------------------------------------------------------------------
 1 | // 화살표 함수에는 없는 것 : 함수 이름, this, arguments
 2 | 
 3 | const myFunc = function () {
 4 |   console.log(arguments);
 5 | };
 6 | 
 7 | // arrow func 에는 arguments가 존재하지 않음
 8 | function outter() {
 9 |   // 따라서 화살표 함수를 감싸는 함수 선언형 outter()를 만들어 감싸준다.
10 |   const myFunc2 = () => {
11 |     console.log(arguments);
12 |   };
13 |   myFunc2();
14 | }
15 | 
16 | // spread 연산자를 사용하여 arguments를 받아온다.
17 | const myFunc3 = (...args) => {
18 |   console.log(args);
19 | };
20 | 
21 | var myObj = {
22 |   count: 3,
23 |   setCounter: function () {
24 |     console.log(this.count);
25 |   },
26 | };
27 | 
28 | myObj.setCounter();
29 | 
30 | // case 1
31 | 
32 | myFunc(1, 2, 3, 4);
33 | 
34 | // arrow func 에는 arguments가 없기 때문에 함수 선언식으로 감싸주어 이를 호출한다. outer(5,6,7,8);
35 | // myFunc2(5, 6, 7, 8);
36 | 
37 | // case 2
38 | 
39 | outter(5, 6, 7, 8);
40 | 
41 | // case 3
42 | 
43 | myFunc3(9, 10, 11, 12);
44 | 


--------------------------------------------------------------------------------
/ES6/SECTION02/readme.md:
--------------------------------------------------------------------------------
  1 | ## Arrow Function
  2 | 
  3 | Arrow의 사전적 의미
  4 | 
  5 | - 화살, 화살표 =>
  6 | - 강좌에서는 화살표 함수로 표기
  7 | 
  8 | 코드 형태
  9 | 
 10 | - (param) => { ... }
 11 | 
 12 | ```js
 13 | 
 14 | const multiple = function (a, b) {
 15 |   return a * b;
 16 | };
 17 | 
 18 | const add = (a, b) => {
 19 |   return a + b;
 20 | };
 21 | 
 22 | var result2 = multiple(4, 5);
 23 | var result = add(1, 2);
 24 | 
 25 | console.log(result2);
 26 | console.log(result);
 27 | >>
 28 | 20
 29 | 3
 30 | ```
 31 | 
 32 | 

 33 | function(){...}의 축약 형태이지만 고려할 사항도 있음
 34 | - this 참조가 다름
 35 | 
 36 | ### 함수 블록 사용
 37 | 
 38 | 함수 블록과 return 작성 생략
 39 | 
 40 | ```js
 41 | const total = (one, two) => one + two;
 42 | 
 43 | // 함수 블록 {}과 return 을 생략한 형태로 { return one + two }의 결과값과 같습니다
 44 | ```
 45 | 
 46 | 함수 블록 {}만 작성한 형태
 47 | 
 48 | ```js
 49 | case 1:
 50 | const total = (one) => {};
 51 | console.log(total(1));
 52 | 
 53 | >>>
 54 | undefined
 55 | 
 56 | // why? 리턴문을 작성하지 않았기때문, return 문을 작성하지 않더라도 리턴될 값을 넣어주면 undefined가 아님
 57 | 
 58 | case 2:
 59 | const total = (one) => one;
 60 | console.log(total(1));
 61 | 
 62 | >>>
 63 | 1
 64 | ```
 65 | 
 66 | ### 파라미터 사용
 67 | 
 68 | 파라미터가 하나일 때
 69 | 
 70 | ```js
 71 | const get = param => param + 20;
 72 | console.log(get(10));
 73 | 
 74 | >>>
 75 | 30
 76 | ```
 77 | 
 78 | 파라미터가 없으면 소괄호만 작성
 79 | 
 80 | ```js
 81 | const get = () => 10 + 20;
 82 | console.log(get());
 83 | 
 84 | >>>
 85 | 30
 86 | ```
 87 | 
 88 | 

 89 | 
 90 | ## 화살표 함수 구조
 91 | 
 92 | function을 => (화살표)로 표기하는 것이 전부가 아님

 93 | 화살표 함수는 일반 함수와 구조가 다름
 94 | 
 95 | - 화살표 함수 나름의 특징이 있음
 96 | 
 97 | ```js
 98 | {
 99 |   debugger;
100 |   ('use strict');
101 | 
102 |   const book = function () {
103 |     return 100;
104 |   };
105 | 
106 |   debugger;
107 | 
108 |   const point = () => 100;
109 | 
110 |   debugger;
111 | }
112 | 
113 | /*
114 | 1. point 함수를 전개하면 prototype과 constructor가 없습니다.
115 | 2. prototype에 메소드를 연결하여 확장할 수 없습니다.
116 | 3. prototype이 없으므로 그만큼 가볍습니다.
117 | 4. 생성자 함수가 없으므로, new 연산자로 인스턴스를 생성할 수 없습니다.
118 | 5. 단독으로 가볍게 쓰기 위함입니다.
119 | 6. 이것이 화살표 함수의 특징이며 용도입니다.
120 | */
121 | ```
122 | 
123 | ### arguments 사용 불가
124 | 
125 | arguments를 사용할 수 없음 

126 | arguments 대신에 rest 파라미터 사용
127 | 
128 | 

129 | 
130 | ## 화살표 함수와 this
131 | 
132 | strict 모드에서 함수를 호출할 때
133 | 
134 | - 함수 앞에 오브젝트 작성은 필수
135 | 
136 | ```js
137 | 'use strict';
138 | function book() {
139 |   function getPoint() {
140 |     log(this);
141 |   }
142 |   getPoint();
143 | }
144 | 
145 | window.book();
146 | 
147 | /*
148 | 1. strict 모드에서는 window.book()처럼 호출하는 함수(book()) 앞에 오브젝트를 작성해야 합니다
149 | 2. 이렇게 하지 않으면 book() 함수 안에서 this 값이 undefined 입니다
150 | 3. 또한, getPoint()처럼 window를 앞에 작성하지 않으면 getPoint()안에서 this 값이 undefined 입니다.
151 | ```
152 | 
153 | - 화살표 함수로 해결
154 | 
155 | ```js
156 | 'use strict';
157 | var point = 100;  // 글로벌 오브젝트로 선언하여, window 오브젝트에 저장및 공유됨
158 | function sports() {
159 |   const getPoint = () => {
160 |     log(this.point);
161 |   };
162 |   getPoint();
163 | }
164 | window.sports();
165 | 
166 | >>>
167 | 100
168 | 
169 | /*
170 | 1. 화살표 함수로 작성하면 getPoint()로 호출할 수 있습니다.
171 | 2. 또한, getPoint() 화살표 함수 안에서 this가 undefined가 아니라 글로벌(window) 오브젝트를 참조합니다.
172 | 3. var point = 100; 을 작성했으므로 100이 출력됩니다.
173 | */
174 | ```
175 | 
176 | ### this 가 정적 스코프 참주
177 | 
178 | 화살표 함수에서 정적 스코프의 this를 사용

179 | 정적(Lexical) 스코프란
180 | 
181 | - 엔진이 해석할 때, 화살표 함수를 만나면
182 | - function 오브젝트를 생성하고
183 | - 화살표 함수가 속한 스코프를 생성한 오브젝트에 바인딩
184 | 
185 | 오브젝트에 바인딩된 스코프의 this를
186 | 
187 | - 화살표 함수에서 this로 사용
188 | 
189 | ```js
190 | var title = '책';
191 | const book = {
192 |   show: () => console.log(this.title);
193 | }
194 | book.show();
195 | 
196 | /*
197 | 1. 위에서 부터 아래로 읽음
198 | 2. book.show() 함수 호출
199 | 3. book에 들어있는 함수 show가 function 오브젝트를 생성하고
200 | 4. 화살표 함수가 속한 스코프 [ book.show() ]를 생성한 오브젝트에 바인딩
201 | 
202 | -- 멈춤
203 | */
204 | ```
205 | 
206 | ### 화살표 함수 특징
207 | 
208 | function 대신 =>를 사용, 함수 표현식 형태
209 | 
210 | - prototype이 없으므로 함수가 가볍다
211 | - constructor가 없으므로 new 연산자로 인스턴스를 생성할 수 없다.
212 | 
213 | 화살표 함수에 this가 없다.
214 | 
215 | - 화살표 함수로 Function 오브젝트를 생성할 때
216 | - 정적으로 화살표 함수가 속한 스코프의 this를 화살표 함수에 바인딩한다.
217 | - 바인딩된 this 참조가 바뀌지 않으며 화살표 함수에서 this로 사용한다.
218 | - 일반 함수는 call(), apply(), bind() 등으로 바꿀 수 있다.
219 | 
220 | 메소드보다 함수로 사용하는 것이 효율성이 높다.
221 | 
222 | - 메소드: 생성자 함수( new )에 의해 생성된 인스턴스가 prototype에게 제공받는 함수
223 | - 함수: 오브젝트(String, Number, Global , ...)에 속해 있는 단독의 함수
224 | 


--------------------------------------------------------------------------------
/ES6/SECTION03/readme.md:
--------------------------------------------------------------------------------
1 | ## Iteration
2 | 


--------------------------------------------------------------------------------
/ES6/SECTION04/readme.md:
--------------------------------------------------------------------------------
1 | ## Spread, Rest
2 | 


--------------------------------------------------------------------------------
/ES6/readme.md:
--------------------------------------------------------------------------------
 1 | # 🌟자바스크립트 개념 정리하기 (ES6 문법)🌟
 2 | 
 3 | ## 정리 방향
 4 | 
 5 | - ES6 문법의 기본 과정을 배웁니다
 6 | - 논리적으로 접근하여 근본을 다룹니다.
 7 | 
 8 | ### 기본 문법
 9 | 
10 | - let, const, 화살표 함수
11 | - Spread, Rest, Destructuring, default value
12 | - 연산자, getter/setter, Template
13 | 
14 | ### 오브젝트에 추가된 함수
15 | 
16 | - Number, String, Object
17 | - Array, Math, RegExp
18 | 
19 | ### ES6+에 새로 생긴 오브젝트
20 | 
21 | - Iterator, Generator, Symbol
22 | - Map, Set, WeakMap, WeakSet
23 | 
24 | 

25 | 
26 | ## 해당 챕터로 바로가기
27 | 
28 | ### 챕터 1, let, const 변수
29 | 
30 | ### 챕터 2, Arrow Function
31 | 


--------------------------------------------------------------------------------
/async/callback.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | console.log('1');
 4 | setTimeout(() => {
 5 |   console.log('2');
 6 | }, 1000);
 7 | console.log('3');
 8 | 
 9 | // Synchronous callback
10 | function printImmediately(print) {
11 |   print();
12 | }
13 | 
14 | printImmediately(() => {
15 |   console.log('hello');
16 | });
17 | // Asynchronous callback
18 | function printWithDelay(print, timeout) {
19 |   setTimeout(print, timeout);
20 | }
21 | 
22 | printWithDelay(() => {
23 |   console.log('async callback');
24 | }, 2000);
25 | 
26 | // Callback Hell example
27 | class UserStorage {
28 |   loginUser(id, password, onSuccess, onError) {
29 |     setTimeout(() => {
30 |       if (
31 |         (id === 'ellie' && password === 'dream') ||
32 |         (id === 'coder' && password === 'academy')
33 |       ) {
34 |         onSuccess(id);
35 |       } else {
36 |         onError(new Error('not found'));
37 |       }
38 |     }, 2000);
39 |   }
40 | 
41 |   getRoles(user, onSuccess, onError) {
42 |     setTimeout(() => {
43 |       if (user === 'ellie') {
44 |         onSuccess({ name: 'ellie', role: 'admin' });
45 |       } else {
46 |         onError(new Error('no access'));
47 |       }
48 |     }, 1000);
49 |   }
50 | }
51 | 
52 | const userStorage = new UserStorage();
53 | const id = prompt('enter your id');
54 | const password = prompt('enter your passrod');
55 | userStorage.loginUser(
56 |   id,
57 |   password,
58 |   (user) => {
59 |     userStorage.getRoles(
60 |       user,
61 |       (userWithRole) => {
62 |         alert(
63 |           `Hello ${userWithRole.name}, you have a ${userWithRole.role} role`
64 |         );
65 |       },
66 |       (error) => {
67 |         console.log(error);
68 |       }
69 |     );
70 |   },
71 |   (error) => {
72 |     console.log(error);
73 |   }
74 | );
75 | 


--------------------------------------------------------------------------------
/async/closure.js:
--------------------------------------------------------------------------------
 1 | // let cnt = 0;
 2 | // function cntPlus() {
 3 | //   cnt = cnt + 1;
 4 | // }
 5 | 
 6 | // console.log(cnt);
 7 | // cntPlus();
 8 | // console.log(cnt);
 9 | 
10 | /*
11 | -- 수 억개의 코드
12 | cnt = 100;
13 | -- 수 억개의 코드
14 | cntPlus();
15 | 
16 | console.log(cnt);
17 | */
18 | 
19 | function closer() {
20 |   let cnt = 0;
21 |   function cntPlus() {
22 |     cnt = cnt + 1;
23 |   }
24 |   function printCnt() {
25 |     console.log(cnt);
26 |   }
27 |   function setCnt(num) {
28 |     cnt = num;
29 |   }
30 |   return { cntPlus, printCnt, setCnt };
31 | }
32 | console.log(closer());
33 | 
34 | // const func1 = closer();
35 | 
36 | // console.log(func1);
37 | 
38 | // func1.printCnt();
39 | // func1.cntPlus();
40 | // func1.printCnt();
41 | // func1.setCnt(100);
42 | // func1.printCnt();
43 | 
44 | // let cnt = 10;
45 | 
46 | // function scope() {
47 | //   let cnt = 1;
48 | //   console.log(cnt);
49 | // }
50 | 
51 | // console.log(cnt);
52 | // scope();
53 | 


--------------------------------------------------------------------------------
/async/promise.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Promise is a JavaScript object for asynchronous operation
 4 | // Producer(제공) vs Consumer(소비)
 5 | 
 6 | // 1. Producer
 7 | 
 8 | // 새로운 프로미스가 만들어 질 때, executor 함수가 바로 실행된다.
 9 | // resolve 성공 <-> reject 실패
10 | const promise = new Promise((resolve, reject) => {
11 |   // doing some heavy work (network, read files)
12 |   console.log('doing something...');
13 |   setTimeout(() => {
14 |     resolve('ellie');
15 |     // reject(new Error('no network'));
16 |   }, 2000);
17 | });
18 | 
19 | // 2. Consumers: then, catch, finally
20 | // then : 프로미스의 콜백 함수를 정상 실행했을 때 넘어오는 resolve 값이 value로 넘어온다.
21 | // catch : 프로미스의 콜백 함수에 오류가 발생할 시 넘어오는 reject 값이 error로 넘어간다.
22 | // finally : 프로미스의 콜백 함수가 다 종료되면, 마지막으로 무조건 출력된다.
23 | promise
24 |   .then((value) => {
25 |     console.log(value);
26 |   })
27 |   .catch((error) => {
28 |     console.log(error);
29 |   })
30 |   .finally(() => {
31 |     console.log('done');
32 |   });
33 | 
34 | // 3. Promise chaining
35 | const fetchNumber = new Promise((resolve, reject) => {
36 |   setTimeout(() => resolve(1), 1000);
37 | });
38 | 
39 | fetchNumber
40 |   .then((num) => num * 2)
41 |   .then((num) => num * 3)
42 |   .then((num) => {
43 |     return new Promise((resolve, reject) => {
44 |       setTimeout(() => resolve(num - 1), 1000);
45 |     });
46 |   })
47 |   .then((num) => console.log(num));
48 | 
49 | // 4. Error Handling
50 | const getHen = () =>
51 |   new Promise((resolve, reject) => {
52 |     setTimeout(() => resolve('🔴'), 1000);
53 |   });
54 | const getEgg = (hen) =>
55 |   new Promise((resolve, reject) => {
56 |     setTimeout(() => resolve(`${hen} => 🟡`), 1000);
57 |   });
58 | const cook = (egg) =>
59 |   new Promise((resolve, reject) => {
60 |     setTimeout(() => resolve(`${egg} => 🟠`), 1000);
61 |   });
62 | 
63 | getHen()
64 |   .then((hen) => getEgg(hen))
65 |   .catch((error) => {
66 |     return '❤';
67 |   })
68 |   .then((egg) => cook(egg))
69 |   .then((meal) => console.log(meal));
70 | 
71 | /*
72 |   getHen()
73 |   .then(getEgg)
74 |   .then(egg)
75 |   .then(console.log;
76 |   */
77 | 


--------------------------------------------------------------------------------
/async/readme.md:
--------------------------------------------------------------------------------
 1 | # 동기, 비동기 작업
 2 | 
 3 | - 자바스크립트는 동기적인 언어이다.
 4 | - 호이스팅이 된 후에 코드가 작성한 순서에 맞춰 동기적으로 실행된다는 말이다.
 5 | - var, function과 같은 선언들이 코드의 제일 위로 올라가는 것을 호이스팅이라고 한다.
 6 | - 여기서 비동기 함수란 동기 함수와 다르게 호이스팅된 코드 사이에서 언제 실행될지 모르는 함수를 비동기 함수라고 한다.
 7 | 
 8 | ```js
 9 | 
10 | console.log('1');
11 | setTimeout(()=> {
12 |   console.log('2');
13 | }, 1000);
14 | console.log('3');
15 | 
16 | >>
17 | 1
18 | 3
19 | 2
20 | ```
21 | 
22 | - 자바스크립트의 호이스팅 성격을 바탕으로 생각해본다면 위에 선언된 함수부터 실행하여 1,2,3이 실행되는 것이 맞다.
23 | - 하지만, setTimeOut이라는 브라우저 API를 통해 두번째 문장인 setTimeout() 함수는 브라우저로 넘어간다.
24 | - 그렇기 때문에 뒷 문장으로 넘어가서 console.log('3')을 찍게 되고, 정해진 시간(1초) 후에 콜백 함수를 통해 호출된 console.log('2')가 찍히게 되는 것이다.
25 | 


--------------------------------------------------------------------------------
/esnext-project/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules


--------------------------------------------------------------------------------
/esnext-project/babel.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@babel/preset-env"],
3 |   "plugins": ["@babel/plugin-proposal-class-properties"]
4 | }


--------------------------------------------------------------------------------
/esnext-project/dist/js/lib.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | exports.power = power;
 7 | exports.Foo = exports.pi = void 0;
 8 | var _excluded = ["a", "b"];
 9 | 
10 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
11 | 
12 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
13 | 
14 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
15 | 
16 | function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
17 | 
18 | function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
19 | 
20 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
21 | 
22 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
23 | 
24 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
25 | 
26 | function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
27 | 
28 | function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
29 | 
30 | function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
31 | 
32 | function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
33 | 
34 | function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
35 | 
36 | // src/js/lib.js
37 | var pi = Math.PI; // ES6 모듈
38 | 
39 | exports.pi = pi;
40 | 
41 | function power(x, y) {
42 |   return Math.pow(x, y); // ES7: 지수 연산자
43 | } // ES6 클래스
44 | 
45 | 
46 | var _private = /*#__PURE__*/new WeakMap();
47 | 
48 | var Foo = /*#__PURE__*/function () {
49 |   function Foo() {
50 |     _classCallCheck(this, Foo);
51 | 
52 |     _classPrivateFieldInitSpec(this, _private, {
53 |       writable: true,
54 |       value: 10
55 |     });
56 |   }
57 | 
58 |   _createClass(Foo, [{
59 |     key: "foo",
60 |     value: // stage 3: 클래스 필드 정의 제안
61 |     function foo() {
62 |       // stage 4: 객체 Rest/Spread 프로퍼티 제안
63 |       var _a$b$c$d = _objectSpread(_objectSpread({}, {
64 |         a: 1,
65 |         b: 2
66 |       }), {}, {
67 |         c: 3,
68 |         d: 4
69 |       }),
70 |           a = _a$b$c$d.a,
71 |           b = _a$b$c$d.b,
72 |           x = _objectWithoutProperties(_a$b$c$d, _excluded);
73 | 
74 |       return {
75 |         a: a,
76 |         b: b,
77 |         x: x
78 |       };
79 |     }
80 |   }, {
81 |     key: "bar",
82 |     value: function bar() {
83 |       return _classPrivateFieldGet(this, _private);
84 |     }
85 |   }]);
86 | 
87 |   return Foo;
88 | }();
89 | 
90 | exports.Foo = Foo;


--------------------------------------------------------------------------------
/esnext-project/dist/js/main.js:
--------------------------------------------------------------------------------
 1 | // src/js/main.js
 2 | import "@babel/polyfill";
 3 | import { pi, power, Foo } from "./lib";
 4 | 
 5 | console.log(pi);
 6 | console.log(power(pi, pi));
 7 | 
 8 | const f = new Foo();
 9 | console.log(f.foo());
10 | console.log(f.bar());
11 | 
12 | // polyfill이 필요한 코드
13 | console.log(
14 |   new Promise((resolve, reject) => {
15 |     setTimeout(() => resolve(1), 100);
16 |   })
17 | );
18 | 
19 | // polyfill이 필요한 코드
20 | console.log(Object.assign({}, { x: 1 }, { y: 2 }));
21 | 
22 | // polyfill이 필요한 코드
23 | console.log(Array.from([1, 2, 3], (v) => v + v));
24 | 


--------------------------------------------------------------------------------
/esnext-project/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   Document
 6 | 
 7 | 
 8 |   
 9 | 
10 | 


--------------------------------------------------------------------------------
/esnext-project/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "esnext-project",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "webpack -w"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "@babel/polyfill": "^7.12.1"
15 |   },
16 |   "devDependencies": {
17 |     "@babel/cli": "^7.15.4",
18 |     "@babel/core": "^7.15.5",
19 |     "@babel/plugin-proposal-class-properties": "^7.14.5",
20 |     "@babel/preset-env": "^7.15.4",
21 |     "babel-loader": "^8.2.2",
22 |     "webpack": "^5.52.0",
23 |     "webpack-cli": "^4.8.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/esnext-project/src/js/lib.js:
--------------------------------------------------------------------------------
 1 | // src/js/lib.js
 2 | export const pi = Math.PI; // ES6 모듈
 3 | 
 4 | export function power(x, y) {
 5 |   return x ** y; // ES7: 지수 연산자
 6 | }
 7 | 
 8 | // ES6 클래스
 9 | export class Foo {
10 |   #private = 10; // stage 3: 클래스 필드 정의 제안
11 | 
12 |   foo() {
13 |     // stage 4: 객체 Rest/Spread 프로퍼티 제안
14 |     const { a, b, ...x } = { ...{ a: 1, b: 2 }, c: 3, d: 4 };
15 |     return { a, b, x };
16 |   }
17 | 
18 |   bar() {
19 |     return this.#private;
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/esnext-project/src/js/main.js:
--------------------------------------------------------------------------------
 1 | // src/js/main.js
 2 | import { pi, power, Foo } from "./lib";
 3 | 
 4 | console.log(pi);
 5 | console.log(power(pi, pi));
 6 | 
 7 | const f = new Foo();
 8 | console.log(f.foo());
 9 | console.log(f.bar());
10 | 


--------------------------------------------------------------------------------
/esnext-project/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | 
 3 | module.exports = {
 4 |   // entry file
 5 |   // https://webpack.js.org/configuration/entry-context/#entry
 6 |   entry: ["@babel/polyfill", "./src/js/main.js"],
 7 |   // 번들링된 js 파일의 이름(filename)과 저장될 경로(path)를 지정
 8 |   // https://webpack.js.org/configuration/output/#outputpath
 9 |   // https://webpack.js.org/configuration/output/#outputfilename
10 |   output: {
11 |     path: path.resolve(__dirname, "dist/js"),
12 |     filename: "bundle.js",
13 |   },
14 |   // https://webpack.js.org/configuration/module
15 |   module: {
16 |     rules: [
17 |       {
18 |         test: /\.js$/,
19 |         include: [path.resolve(__dirname, "src/js")],
20 |         exclude: /node_modules/,
21 |         use: {
22 |           loader: "babel-loader",
23 |           options: {
24 |             presets: ["@babel/preset-env"],
25 |             plugins: ["@babel/plugin-proposal-class-properties"],
26 |           },
27 |         },
28 |       },
29 |     ],
30 |   },
31 |   devtool: "source-map",
32 |   // https://webpack.js.org/configuration/mode
33 |   mode: "development",
34 | };
35 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     
 5 |     
 6 |     Document
 7 |     
 8 | 
 9 | 
10 |     
11 | 
12 | 


--------------------------------------------------------------------------------
/json-server-exam/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules


--------------------------------------------------------------------------------
/json-server-exam/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "todos": [
 3 |     {
 4 |       "id": 1,
 5 |       "content": "HTML",
 6 |       "completed": true
 7 |     },
 8 |     {
 9 |       "id": 2,
10 |       "content": "CSS",
11 |       "completed": false
12 |     },
13 |     {
14 |       "id": 3,
15 |       "content": "Javascript",
16 |       "completed": true
17 |     }
18 |   ]
19 | }


--------------------------------------------------------------------------------
/json-server-exam/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "json-server-exam",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start" : "json-server --watch db.json",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "json-server": "^0.16.3"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/json-server-exam/public/delete.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   

11 |   
26 | 
27 | 


--------------------------------------------------------------------------------
/json-server-exam/public/get_All.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   

 5 |   
20 | 
21 | 
22 | 


--------------------------------------------------------------------------------
/json-server-exam/public/get_one.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   

11 |   
30 | 
31 | 


--------------------------------------------------------------------------------
/json-server-exam/public/patch.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   

11 |   
28 | 
29 | 


--------------------------------------------------------------------------------
/json-server-exam/public/post.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   

11 |   
31 | 
32 | 


--------------------------------------------------------------------------------
/json-server-exam/public/put.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 |   Document
 8 | 
 9 | 
10 |   

11 |   
28 | 
29 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # 자바스크립트 정리하기
 2 | 
 3 | ```
 4 | ① ELOQUENT JAVASCRIPT
 5 | ② 인프런 강의(김영보)
 6 | ③ 모던 자바스크립트 deep dive
 7 | 
 8 | 를 바탕으로 만들어진 자바스크립트 스킬업 개념 정리입니다
 9 | 
10 | 처음에는 한 readme에 전부 작성하여 검색 (ctrl F)을 통해 모를 때마다 찾아보려 했으나,
11 | 
12 | 너무 길어져서 가독성을 위해 섹션 별로 구분하였습니다.
13 | 
14 | 섹션도 큰 차이는 없지만 같이 보면 좋은 방향으로 묶어두었습니다 😃
15 | ```
16 | 
17 | ## 🔥 [velog에서 정리본 보기](https://velog.io/@junh0328/DEEP-DIVE-%ED%95%9C-%EC%9E%A5-%EC%9A%94%EC%95%BD-02.-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%9E%80)
18 | 
19 | ## 목차
20 | 
21 | ### 🔥 [섹션 1](https://github.com/junh0328/upgrade_javascript/blob/master/DEEPDIVE/readme.md)
22 | 
23 | - 프로그래밍
24 | - 자바스크립트란?
25 | - 자바스크립트 개발 환경과 실행 방법
26 | - 변수
27 | - 표현식과 문
28 | - 데이터 타입
29 | - 제어문
30 | - 타입변환과 단축 평가
31 | - 객체 리터럴
32 | - 원시 값과 객체 비교
33 | - 함수
34 | - 스코프
35 | - 전역 변수의 문제점
36 | - let, const 키워드와 블록 레벨 스코프
37 | 
38 | ### 🔥 [섹션 2](https://github.com/junh0328/upgrade_javascript/blob/master/DEEPDIVE/readme2.md)
39 | 
40 | - 생성자 함수에 의한 객체 생성
41 | - 함수와 일급 객체
42 | - 프로토타입
43 | - strict mode
44 | - 빌트인 객체
45 | - this
46 | - 실행 컨텍스트
47 | 
48 | ### 🔥 [섹션 3](https://github.com/junh0328/upgrade_javascript/blob/master/DEEPDIVE/readme3.md)
49 | 
50 | - 클로저
51 | - 클래스
52 | - ES6 함수의 추가 기능
53 | 
54 | ### 🔥 [섹션 4](https://github.com/junh0328/upgrade_javascript/blob/master/DEEPDIVE/readme4.md)
55 | 
56 | - 배열
57 | - Number
58 | - Math
59 | - Date
60 | - RegExp
61 | - String
62 | 
63 | ### 🔥 [섹션 5](https://github.com/junh0328/upgrade_javascript/blob/master/DEEPDIVE/readme5.md)
64 | 
65 | - Symbol
66 | - 이터러블
67 | - 스프레드(...) 문법
68 | - 디스트럭처링 할당(구조 분해 할당)
69 | 
70 | ### 🔥 [섹션 6](https://github.com/junh0328/upgrade_javascript/blob/master/DEEPDIVE/readme6.md)
71 | 
72 | - 브라우저 렌더링 과정
73 | - DOM
74 | - 이벤트
75 | 
76 | ### 🔥 [섹션 7](https://github.com/junh0328/upgrade_javascript/blob/master/DEEPDIVE/readme7.md)
77 | 
78 | - 타이머
79 | - 비동기 프로그래밍
80 | - Ajax
81 | - REST API
82 | - Promise
83 | - 제너레이터와 async/await
84 | 
85 | ### 🔥 [섹션 8](https://github.com/junh0328/upgrade_javascript/blob/master/DEEPDIVE/readme8.md)
86 | 
87 | - [에러처리](https://github.com/junh0328/upgrade_javascript/blob/master/DEEPDIVE/readme8.md#47%EC%9E%A5-%EC%97%90%EB%9F%AC%EC%B2%98%EB%A6%AC)
88 | - [모듈](https://github.com/junh0328/upgrade_javascript/blob/master/DEEPDIVE/readme8.md#48%EC%9E%A5-%EB%AA%A8%EB%93%88)
89 | 


--------------------------------------------------------------------------------