본문 바로가기

JavaScript25

프로토타입(prototype) 디렉터리 구조 직접 new 연산자와 함께 생성자함수를 호출하는 경우와 내장 생성자 함수인 Array를 사용하는 경우의 프로토타입-인스턴스간의 디렉터리 구조를 살펴보자. 내장 생성자 함수의 구조를 통해 배열 리터럴에 from, isArray, of 메서드를 직접 사용할 수 없는 이유 또한 알 수 있다! 1. new 생성자 함수(인스턴스 직접 연결) new 연산자를 IamConstructor란 생성자 함수와 함께 호출하여, IamInstance란 인스턴스를 생성하였다. const IamConstructor = function (name) { this.name = name; }; IamConstructor.prototype.method1 = function() {}; IamConstructor.prototype.proper.. 2022. 5. 28.
프로토타입(prototype) 클래스 기반 언어가 상속을 사용한다면 프로토타입 기반 언어는 어떤 객체를 원형(prototype)으로 삼고, 이를 복제(참조)하여 상속과 비슷한 효과를 갖는다. 자바스크립트 또한 프로토타입 기반 언어이다! const instance = new Constructor(); 어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면 Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(instance)가 생성된다. 이 instance에는 __proto__라는 프로퍼티가 "자동 부여"되는데, 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조한다! 즉, 인스턴스는 __proto__를 통해서 생성자함수의 prototype 프로퍼티에 접근할 수 있다. > 예시 De.. 2022. 5. 22.
커링 함수 커링 함수란? 여러 개의 인자를 받는 함수를 하나의 인자만 받는 함수로 나눠서 "순차적"으로 호출될 수 있게 체인 형태로 구성한 것. 필요한 인자 갯수만큼 함수를 만들어 계속 리턴해주다가 마지막에 조합해서 리턴한다. 한 번에 하나의 인자만 전달하는 것이 원칙이고, 마지막 인자가 전달되기 전까지는 원본 함수가 실행되지 않는다. (마지막 인자가 넘어갈 때까지 함수 실행을 미루는 셈) const curry = func => a => b => c => d => func(a, b, c, d); const maxNumber = curry(Math.max); console.log(maxNumber(1)); // f() console.log(maxNumber(1)(2)); // f() console.log(maxNum.. 2022. 5. 21.
클로저 활용 예시 (2) 클로저 활용 예시 (2) - 부분 적용 함수 부분 적용 함수란 a개의 인자를 받는 함수에 미리 b개의 인자만 넘겨 기억시켰다가, 나중에 (a - b)개의 인자를 넘기면 비로소 원래 함수의 실행 결과를 얻을 수 있도록 만든 함수이다. 부분 적용 함수가 클로저의 활용 예시인 이유는 미리 일부 인자를 넘겨두어 기억하게끔 하고 추후 필요한 시점에 기억했던 인자들까지 함께 실행하게 한다는 원리가 클로저의 정의와 부합하기 때문이다. /* 고차함수를 활용한 부분 적용 함수 */ let partial = function() { // 🅰️ console.log(arguments); let originPartialArgs = arguments; let func = originPartialArgs[0]; if (typeof.. 2022. 5. 1.
클로저 활용 예시 (1) 클로저 활용 예시 (1) - 콜백함수가 외부 데이터 참조 콜백함수 내부에서 외부변수를 참조하는 클로저의 두가지 로직을 기록하기 위해🧐 첫 번째는 콜백함수를 내부함수로 선언해서 외부변수를 직접 참조하는 로직이고, 두 번째는 콜백함수를 고차함수로 바꿔서 클로저를 활용하는 로직이다. 1. 콜백함수가 외부변수를 직접 참조 let delivery = ['chicken', 'pizza', 'sushi']; let $ul = document.createElement('ul'); delivery.forEach(el => { // 콜백함수(A) let $li = document.createElement('li'); $li.innerText = el; $li.addEventListener('click', function(.. 2022. 3. 31.
setInterval과 addEventListener 🚩clearInterval과 removeEventListener는 종료 대상이 다르다. clearInterval => setInterval 자체를 종료 removeEventListener => 콜백함수를 종료 1. window 메서드 (setInterval) setInterval 자체를 종료한다. clearInterval(intervalID) /* 지역변수 num을 참조하는 내부함수를 외부로 전달했으므로 클로저 */ (function() { let num = 0; let intervalID = null; intervalID = setInterval(function(){ if (++num >= 5) { clearInterval(intervalID); } console.log(num); }, 100); }).. 2022. 3. 31.
클로저 (Closure) 1. 클로저란? 외부함수 A에서 선언한 "지역변수 a를 참조하는 내부함수 B가 외부로 전달"될 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상(참조할 수 있는 현상) 지역변수를 참조하는 내부함수를 외부에 전달하면 클로저! 내부함수에서 외부 변수를 사용하면 클로저! ✅ 내부함수를 외부로 전달하는 방법은 함수를 return 하거나 콜백으로 전달 2. 일반함수의 경우? outer함수의 실행 컨텍스트가 종료되기 전에 이미 inner함수의 실행 컨텍스트가 종료돼 있으므로 이후 별도로 inner함수를 호출할 수 없다. 일반 함수와 마찬가지로 outer의 Lexical Environment가 모두 가비지 컬렉팅 대상에 포함! ( inner가 먼저 종료되므로 outer의 Lexical Envi.. 2022. 3. 30.
콜백 함수도 함수로서 호출이다 콜백 함수로 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 "함수로서 호출" 된다! 어떤 함수의 인자에 객체의 메서드를 전달하더라도 이는 결국 메서드가 아닌 "함수"일 뿐이다. 즉, 객체의 메서드를 콜백 함수로 전달하면 (별도의 바인딩이 없는 한) 해당 객체를 this로 바라볼 수 없게 된다는 것! let obj = { val: [1, 2, 3], methods: function(v, i) { console.log(this, v, i); } }; /* 메서드로서 호출 */ obj.methods(1, 2); // obj 1 2 /* 콜백함수로 객체의 메서드를 전달하더라도(obj.methods) 함수로서 호출 */ [5,6,7].forEach(obj.methods); // window 5 0 // .. 2022. 2. 26.
forEach / for-in / for-of 차이점 배열을 기준으로 예시를 들어보면 이러한 결과가 나온다. const array = ['가', '나', '다', '라']; array.forEach(el => { console.log(el); // el은 배열의 요소값 👉 '가' '나' '다' '라' }) for (let value of array) { console.log(value); // value는 배열의 요소값 👉 '가' '나' '다' '라' } for (let key in array) { console.log(key); // key는 배열의 인덱스값... 👉 '0' '1' '2' '3' } 1. for (배열의 길이만큼 순회) 초기값부터 시작해서 조건에 부합하면 계속 순회. 중간에 break문을 만나면 반복문을 중단. 2. forEach (배열을.. 2022. 1. 31.