You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[JS] 📚 자바스크립트 실행 컨텍스트 원리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWuLYP%2FbtrfU41mHjv%2FqFww4qi7966Hikg9QLsOJ1%2Fimg.webp)
[JS] 📚 자바스크립트 실행 컨텍스트 원리
실행 컨텍스트 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트를 바로 이해하지 못하면 코드 독해가 어려워지며 디버깅도 매우 곤란해 질 것이다. 자바스크립트 엔진은 코드를 실행하기 위하여 실행에 필요한 여러가지 정보를 알고 있어야 한다. 실행에 필요한 여러가지 정보란 아래와 같은 것들이 있다. 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티 함수 선언 변수의 유효범위(Scope) this 이와 같이 실행에 필요한 정보를 형상화하고 구분하기 위해 자바스크립트 엔진은 실행 컨텍스트를 물리적 객체의 형태로 관리한다. 아래의 코드를 살펴보자. var x..
![[JS] 📚 제너레이터 - 이터레이터 강화판](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEHEcr%2FbtrgMATDqp6%2FYB5KE0M4S5MikxmOEYtUZ1%2Fimg.jpg)
[JS] 📚 제너레이터 - 이터레이터 강화판
제네레이터란? 이터러블이며 동시에 이터레이터 = 이터레이터를 리턴하는 함수 (async가 Promise를 리턴하는 함수듯이, 제너레이터는 이터레이터를 리턴하는 함수다.) 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 구현할 수 있다. (Promise와 async 관계와 비슷하게 보면 된다.) 이터러블 프로토콜 방식 let range = { from: 1, to: 5, [Symbol.iterator]() { return { current: this.from, last: this.to, next() { if (this.current generatorObj.next() -> yield 2 -> ... -> end ● 제너레이터의 실행 결과가 이터레이이터..
![[JS] 📚 이터러블 & 이터레이터 - 💯완벽 이해](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbN5cj4%2FbtrgXqVWxha%2FaPP3oGTyORu4fjRd76NUck%2Fimg.jpg)
[JS] 📚 이터러블 & 이터레이터 - 💯완벽 이해
이터러블(interable) 이터러블(interable)이란 자료를 반복할 수 있는 객체를 말하는 것이다. 우리가 흔히 쓰는 배열 역시 이터러블 객체이다. 그럼 만일 이 배열에게 이터러블 표식을 없애버리면 어떻게 될까? let arr = [1,2,3] for(const a of arr) console.log (a) // 정상작동 1,2,3 arr[Symbol.iterator] = null; // 이렇게 하면 순회가 되지 않는다 for(const a of arr) console.log (a) // Uncaught TypeError: arr is not iterable 멀쩡한 배열임에 불구하고 for..of로 순회할수가 없게 되었다. 저 [Symbol.iterator] 라는 코드가 눈에 띈다. 이제 저것이 ..
![[JS] 📚 자바스크립트 자료형 Symbol 🚩 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb0V0DK%2FbtrgJYfYxnd%2FVdslud2zD3nXziO4hT8f80%2Fimg.jpg)
[JS] 📚 자바스크립트 자료형 Symbol 🚩 정리
Symbol이란? 1997년 자바스크립트가 ECMAScript로 처음 표준화된 이래로 자바스크립트는 6개의 타입을 가지고 있었습니다. [원시 타입 (primitive data type)] Boolean null undefined Number String [객체 타입 (Object type)] Object 심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값입니다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용합니다. Symbol의 생성 심볼은 3가지 방법으로 생성할 수 있습니다. Symbol() Symbol.for() Symbol.iterator Symbol() Symbol은 Symbol() 함수로 ..
![[JS] 📚 자바스크립트 자료형 Set 🚩 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdj97MO%2FbtrgV9sXJcc%2FOfYpQBqskCIDN8cB2kzakk%2Fimg.jpg)
[JS] 📚 자바스크립트 자료형 Set 🚩 정리
셋(Set) 셋(Set)은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션입니다. 셋에 키가 없는 값이 저장됩니다. let sett = new Set(["bananas", "oranges", "bananas", "apples", "bananas"]); // Set(3) {'bananas', 'oranges', 'apples'} new Set(iterable) – 셋을 만듭니다. 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어줍니다. set.add(value) – 값을 추가하고 셋 자신을 반환합니다. set.delete(value) – 값을 제거합니다. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환합니다. set.has(value)..
![[JS] 📚 자바스크립트 자료형 Map 🚩 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbmzQ8J%2FbtrgJY0U68p%2FsQbOkC8gcKkFAqjLWHhqe1%2Fimg.jpg)
[JS] 📚 자바스크립트 자료형 Map 🚩 정리
자바스크립트는 객체와 배열이라는 강력한 자료구조를 제공합니다. 객체 – 키가 있는 컬렉션을 저장함 배열 – 순서가 있는 컬렉션을 저장함 하지만 현실 세계를 반영하기엔 이 두 자료구조 만으론 부족해서 맵(Map)과 셋(Set)이 등장하게 되었습니다. Map 자료형 키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다. 다만, 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있습니다. (객체의 key는 항상 스트링형태로 저장됩니다.) let map1 = new Map([ // 2차원 key, value 형태의 배열 ['a',1], ['a1',2], ['b',3] ]) // map 자료형 : {"a" => 1, "a1" => 2, "b" => 3} new Map() – 맵을 만듭니다. map.set..
![[JS] 📚 콤마 연산자 (a, b, c) 문법 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcXc2KV%2FbtrgBC5lAeZ%2Fa5oRzKuCbyMkeqUTmPSrQK%2Fimg.jpg)
[JS] 📚 콤마 연산자 (a, b, c) 문법 정리
자바스크립트 콤마(쉼표)연산자 쉼표 연산자는 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 연산자의 값을 반환한다. 다음과 같은 함수가 있다. 우리가 흔히 보는 평범한 함수이다. let a = (obj, value) => { obj+=value; obj+=value; return obj; } a(1,2); // 5 저 문법에서 중괄호를 없애고 괄호와 콤마만으로 표현 할수가 있다. 작동원리는 = (a, b, c) 이렇게 작성할 경우, 1) a 실행 2) b 실행 3) c 리턴 이다. 그래서 obj+=value가 두번 실행되고 obj를 리턴해서(1+=2, 3+=2, 5) 답이 5가 나온다. let a = (obj, value) => (obj+=value, obj+=value, obj); a(1,..
![[JS] 📚 ES6 템플릿 리터럴 사용법 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc8b4ck%2FbtrfuPxsIgy%2FfpSRbV57lFt2ZgiFFHL6z0%2Fimg.png)
[JS] 📚 ES6 템플릿 리터럴 사용법 정리
Template literals 템플릿 리터럴이란 자바스크립트에서 문자열을 입력하는 선진적인 방식입니다. 템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다. 템플릿 리터럴 기본 문법 `string text` // 문자열 표현 `string text line 1 string text line 2` // 개행된 문자열 표현 var expression; `string text ${expression} string text` // 변수값 문자열 조합 function tag() { }; tag `string text ${expression} string text` // 함수 호출 아규먼트 템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`)..
📚 return function() 함수를 리턴 하는 기법은 어디에 사용될까?
자바스크립트의 함수를 리턴하는 함수 클로저에서도 보았고 우리는 자바스크립트 코딩하면서 가끔 함수 자체를 리턴하는 함수를 한번쯤은 보았을 것이다. function hello(){ return function world(){ return "Hello Word"; } } const a = hello(); // == world() 원리는 알겠다. 사용법도 알겠다. 그런데 대체 이러한 기법이 어디에 쓰이는건가? 왜 굳이 값을 리턴하면되지 함수안에 함수를 리턴하는가? 지금부터 return function() {} 의 실용 기법을 알아보자. 일반적인 이벤트 콜백 함수 등록법 여기 버튼이 3개 있는 웹문서가 있다. C1 C2 C3 우리는 저 3개의 버튼마다 다음과 같이 이벤트 리스너를 등록할 예정이다. addEven..
![[JS] 📚 자바스크립트 map 과 filter 차이](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FObPvs%2FbtrgdDCOJhg%2FNF7RHkAWk8fp1WU511EIg1%2Fimg.jpg)
[JS] 📚 자바스크립트 map 과 filter 차이
자바스크립트 map() / filter() 함수 둘은 매우 비슷하게 생겼다. 콜백함수의 인자도 거의 똑같고 생김새도 완전 판박이라 할수 있다. 다만 각 함수의 리턴하는 기능이 다르다고 볼수 있다. map() callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 생성 arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가짐 currentValue : 처리할 현재 요소 index (Optional) : 처리할 현재 요소의 인덱스 array (Optional) : map()를 호출한 배열 thisArg (Optional) : cal..
![[JS] 📚 reduce 고차함수 - 이해하기 쉽게 설명](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fl2YDw%2Fbtr0ozOyxI6%2F5K5zk5tg0PJvmpf8UBGWm1%2Fimg.webp)
[JS] 📚 reduce 고차함수 - 이해하기 쉽게 설명
Array에는 map()이나 filter()나 join() 같은 메소드들이 있다. 사실 위의 기능은 모두 reduce로 구현이 가능하다. for in, for of, forEach 를 몰라도 생 for문으로 모두 구현할 수 있듯이 말이다. 한마디로 reduce는 Array메소드들의 아버지라고도 불리울수도 있다. 또한 initialValue에 배열이나 객체를 주면 전역으로 객체변수를 하나 만드는 듯한 효과를 낼 수 도 있다. reduce 고차함수 - 배열의 왼쪽부터 콜백 함수를 실행 후 누산함 배열.reduce( function(acc, cur, index, arr) { } [, initialValue] ) 누산기accumulator (acc) 현재 값 (cur) 현재 인덱스 (idx) 원본 배열 (sr..
![[JS] 📚 map 고차함수 - 이해하기 쉽게 설명](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkNriS%2Fbtr0oPKwDJB%2FQ2kUNON9JrK8gQmZnz9JH1%2Fimg.webp)
[JS] 📚 map 고차함수 - 이해하기 쉽게 설명
map 고차함수 map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. array를 돌면서 array 로 결과가 출력된다. array.map(callbackFunction(currenValue, index, array), thisArg) currentValue : 배열 내 현재 값 index : 배열 내 현재 값의 인덱스 array : 현재 배열 thisArg : callbackFunction 내에서 this로 사용될 값 var numbers = [ 1,2,3,4,5,6,7,8,9]; function multiplyTwo(number){ return number *2; } var newNumbers = numbers.map(multiplyTw..
