📌 이터레이터값을 순차적으로 하나씩 꺼낼 수 있는 객체이다. 예를 들어 for ~ of, 스프레드 연산자, Array.from() 과 같은 반복 가능한 작업들이 이터레이터 객체라고 한다.현재 어디 있고, 다음엔 어디로 가는지를 value, done, next()를 이용하여 객체를 만든다. next() 메서드를 가지고next()는 { value:000 , done: boolean } 객체를 반환한다.시퀀스의 마지막 값이 이미 산출 되었다면 done은 true가 된다. 코드 예시const itObj = { name: 'ABCDEFG', [Symbol.iterator]() { let i = 0; return { next: () => ({ value: this.name[i..
JavaScript
디바운스와 스로틀은 연속적인 api호출로 인해 나타나는 서버 과부화를 막고, 최적화를 하기 위해 사용한다 !📌 Debounce연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식이다. ,delay 기간 중 재 호출 시 기존 호출 무시! => 마지막(최종) 호출이 delay초(ms) 후에 실행!const debounce = (cb, delay) => { let timer; return (...args) => { if (timer) clearTimeout(timer); timer = setTimeout(cb, delay, ...args); }}const act = debounce(a => a + 1, 1000);act(100);// 1초 동안 n번 호출 => 실행은 1회만!// ..
함수형 프로그래밍 언어, JS 함수는 하나의 단위로 실행되는 문들의 묶음이다.JS에서는 함수도 객체이다. 이런 것들이 함수는 일급 객체다 라는 말이 나온 것 같다. 일급 객체를 정리해보자📌 일급 객체일급 시민에서 온 말, 혜택X, 객체든, 함수든 모두 변수 처럼 취급하겠다. -> 사용할 때 다른 요소들과 아무런 차별이 없게 취급하겠다.모든 일급 객체는 변수나 데이터에 담을 수 있어야 한다. 모든 일급 객체는 함수의 파라미터로 전달 할 수 있어야 한다. 모든 일급 객체는 함수의 리턴값으로 사용할 수 있어야 한다.다른 언어는 같은 식별자여도 파라미터 갯수에 따라 다른 함수로 인식 되는데, 함수형 프로그래밍을 사용하는 자바스크립트에서는 같게 인식이 된다. 📌 익명 함수말 그대로 이름이 없다. 함수 선언 ..
메서드가 너무 많기 때문에.. 차차 정리할 예정Object객체는 mutable이다. 키가 중복이 되면 덮어 쓴다. Property객체 내부의 속성을 의미한다, 객체는 Property의 집합이다. key와 value의 쌍으로 구성되어 있다. ✔️ Object.keys(obj)객체의 키만 담은 배열을 반환, Symbol은 keys를 통해 나오지 않는다. const key = Object.keys(user);✔️ Reflect.ownKeys(obj)Symbol도 함께 출력 할 수 있다.console.log("🚀 ~ key:", key, Reflect.ownKeys(user)); key값은 대괄호를 씌워주자const k = "id";const { [k]: dd } = user;console.log("🚀 ..
클로저를 이해하기 위해선 실행 컨텍스트 개념을 알아야 한다.📌 클로저Lexical Environment의 조합. 상위 스코프의 식별자를 참조하는 하위 스코프의 함수가 더 오래 살아 있는 것 함수가 특정 스코프에 접근할 있도록 의도적으로 그 스코프에서 정의하는 것함수라기 보단 이러한 상황을 클로저라고 의미한다.특정함수의 EnvRec를 외부에서 참조할 수 있도록 의도적으로 return되는 함수이다. let userFn;{ const privateUser = { id: 1, name: 'Hong' }; userFn = () => privateUser; // 이 user 변수가 하위(Block) 스코프의 privateUser를 참조} // block은 끝나서 이 block의 BlockExecutionCo..
메모이제이션계산을 줄여 성능을 향상시키는 방법이다. 처음 계산하여 결과값이 나왔다면 저장하고, 나중에 동일한 인수에 대한 결과가 다시 필요할 경우 다시 계산하는 대신 저장된 결과를 return 한다. 이렇게 결과를 캐싱하여 작업 속도를 높을 수 있다. 예제1 : 팩토리얼 함수//메모이제이션을 이용하여 팩토리얼 함수 만들기const memoizedFactorial = memoized(function A(n) { memoizedFactorialRunCnt += 1; if (n === 1) return 1; return n * memoizedFactorial(n - 1);});let memoizedFactorialRunCnt = 0; // 실행횟수 계산console.log(memoizedFactorial..
📌 스코프각 식별자들의 유효 범위, 참조 대상 식별자를 찾아내기 위한 규칙이다. 이 규칙으로 자바스크립트는 식별차를 검색할 때 사용하는 규칙으로 작용한다.if, for, function과 같은 범위를 통해 각자 자신이 유효한 범위를 갖는다. 이러한 규칙때문에 같은 이름일 경우에 충돌이 나지 않는다. Global ScopeFunction ScopeBlock Scope전역 스코프와 지역 스코프전역 스코프(Global Scope)자바스크립트 코드의 최상위 레벨에 해당하는 스코프로 함수 어디에서든 접근이 가능하다. 지역 스코프(Local Scope)특정 함수에 해당하는 스코프로 해당 함수 자신과 하위 함수에서만 자원에 접근이 가능하다. 전역 스코프 이외의 스코프들을 의미한다. (함수레벨 스코프, 블록 스코프,..
📌 Strict Mode암묵적으로 sloppy mode를 해제하기 위한 방법이다. 오해의 소지가 있는 구문을 문법적으로 명확하게 평가하는 것이다.호이스팅은 function foo() { x = 10;}foo();console.log(x);ES5이전선언하지 않는 변수 x에 10을 할당 할 경우,자바스크립트 엔진은 x변수가 어디에서 선언되었는지 스코프 체인을 통해 검색했는데 어디에도 없다 ReferenceError가 발생할까?NO , 자바스크립트 엔진은 암묵적 전역 객체에 x 프로퍼티를 동적 생성한다. 이때 전역 객체의 x프로퍼티는 마치 전역 변수처럼 사용할 수 있다. 이를 암묵적 전역 이라고 한다.ES5이후Strict mode추가Strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 ..
const { id, name, addr = 'Seoul' } = { id: 1, name: 'Hong', add: 'Pusan' }; const id = 1;const name = 'Hong';const addr = 'Seoul'; Swap이 이렇게 가능하다.Swapping할 때, 스택에 있는 메모리 주소를 할당하기 때문에 새로운 주소값이 생성되게 되고,변수는 모두 immutable이기 때문에 새로운 주소를 할당하게 된다. 나중에 boolean이 들어갈 수도 있고, String이 들어갈 수 있기 때문에 그렇다.[a, b] = [b, a]; //let t = a; a = b; b = t;Class Destructuringlass A { constructor(a,b) { this.a = a; ..
📌 호이스팅인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 말한다. 선언문을 코드의 선두로 끌어올려진 것처럼 동작하는 것은 자바스크립트의 고유한 현상이다.console.log(x) //print: undefinedvar x = 1 다른 언어일 경우에 선언을 하기 전 print를 하게 되었다면 정의되지 않았다는 문구를 받게 될 것이다. 하지만 자바스크립트는 에러가 나오지 않고 undefined를 출력하게 된다. 이것이 호이스팅이다. 📌 자바스크립트 엔진 동작 과정(간략)크게 소스코드의 평가(호이스팅)과 소스코드의 실행으로 나누어서 과정을 처리하게 된다. 소스코드의 평가이 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등 선언문만 먼저 실행하여 변수나 함수 식별자를 키로 실행..
