공부/JS10 [Javascript] 프로토타입 알아보기 - 2 지난 글에 이어서, 코어 자바스크립트를 읽고 프로토타입에 대해 공부한 내용을 정리한다. 메서드 오버라이드(Method Override) : 부모 역할을 하는 객체에 정의된 메서드를 재정의하는 것. var Foo = function (bar) { this.bar = bar; }; Foo.prototype.getBar = function () { return this.bar; }; var foo = new Foo('hello'); foo.getBar = function () { console.log(this.bar + ', World!'); }; foo.getBar(); // hello, World! 가 출력된다 생성자 Foo의 프로토타입에 getBar라는 메서드를 정의한다. 따라서 생성자 Foo 로 만들어.. 2024. 2. 2. [Javascript] 프로토타입 알아보기 - 1 코어 자바스크립트를 읽고, 프로토타입에 대해 공부한 내용을 정리한다. 프로토타입(Prototype) : 자바스크립트의 모든 객체와 연결된, 부모 역할을 담당하는 객체. JS에는 클래스 기반이 아닌, 프로토타입 기반 객체 지향 언어이다. 프로토타입을 통해 객체 지향의 상속 개념을 구현한다. 프로토타입의 개념 다음과 같은 코드가 있을 때, 이 코드를 실행한 결과를 도식화 하면 아래와 같은 그림을 그릴 수 있다. const instance = new Foo(); Foo 생성자 함수를 통해 Foo의 인스턴스인 instance를 생성하고 있다. 이 때, instance의 __proto__([[prototype]]) 프로퍼티가 자동으로 부여되고, 이 프로퍼티는 해당 인스턴스의 부모의 프로퍼티(여기서는 Foo의 pr.. 2024. 1. 24. [Javascript] 콜백 함수 알아보기 코어 자바스크립트를 읽고, 콜백 함수에 대해 공부한 내용을 정리한다. 콜백 함수(Callback Function) : 다른 코드의 인자로 넘겨주는 함수, 매개변수를 통해 다른 함수의 내부로 전달되는 함수. ※ 고차 함수(Higher Order Function): 매개변수를 통해 함수 외부에서 콜백 함수를 전달받은 함수. 콜백 함수를 받은 고차 함수는 원하는 때에 콜백 함수를 실행할 수 있음. 즉, 콜백 함수의 제어권을 다른 함수에 넘겨주는 것. 제어권 고차함수는 콜백 함수에 여러가지 제어권을 가질 수 있다. 1. 호출 시점 고차 함수는 콜백 함수를 자신이 원하는 시점에 실행할 수 있다. var counter = 0; var foo = () => { console.log(counter); if (++cou.. 2024. 1. 21. [Javascript] 클로저 알아보기 - 2 지난 게시물에 이어서 클로저의 사용 예시에 대해 정리한다. 주로 코어 자바스크립트 책을 참고했다. 클로저 활용 사례 1. 콜백 함수 내부에서 외부 데이터 사용 시 콜백 함수란 다른 함수에 인자로 전달되는 함수이다. 즉, 다른 함수에서 이 콜백 함수를 사용하는 주도권을 쥐게 된다. 이러한 콜백 함수에서, 외부 변수를 참조하는 데에는 크게 3가지가 있다. (a) 콜백함수 내부에서 외부 변수를 직접 참조하는 방법(클로저 사용) var nameList = ['Ann', 'Gren', 'Jennifer']; var $ul = document.createElement('ul'); nameList.forEach(function (name) { var $li = document.createElement('li'); $.. 2024. 1. 8. [Javascript] 클로저 알아보기 - 1 실행 컨텍스트에 대해 알아보았던 지난 번에 이어, 자세히 알고 있지 못했던 '클로저'에 대해 공부한 내용을 정리한다. 코어 자바스크립트와 모던 자바스크립트 Deep dive를 참고했다. 사용 사례 등은 다음 글에서 좀 더 정리하기로. 클로저(Closure)란? : 함수형 프로그래밍 언어에서 등장하는 보편적인 개념. 즉 자바스크립트의 고유한 개념은 아니다. 때문에 매체마다 다양한 정의로 클로저를 소개하고 있다. MDN에서 클로저의 개념을 발췌하자면 다음과 같다. "주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. ..." '어휘적 환경'이란 곧 실행 컨텍스트에서 배웠던 LexicalEnvironment를 .. 2024. 1. 5. [JavaScript] 실행 컨텍스트에 대하여 자바스크립트를 써온지도 몇 년, 당장 원하는 기능의 코드를 짜낼 수는 있어도 정작 언어 자체를 깊이 공부해본 적이 없다는 생각이 들었다. 지금이라도 부족했던 기본을 다지기 위해, 책과 이런저런 문서를 참고하며 조금씩 공부를 하고 있다. 블로그에서는 책을 읽으며 공부한 것을 요약하여 정리하고자 한다. 책의 경우, 코어 자바스크립트를 보고 있다. 조만간 모던 자바스크립트 Deep Dive 또한 참고하며 이런저런 내용을 공부할 예정이다. (책을 나눔해준 버블버블에게 무한한 감사...) 실행 컨텍스트(Execution Context)란? : 실행할 코드에 제공할 환경 정보들을 담아둔 객체. 클로저를 지원하는 대부분의 언어에 이것 비슷한 개념들이 존재한다고. → 어떠한 컨텍스트가 실행되면, 호이스팅 발생/외부 환.. 2023. 12. 23. 이전 1 2 다음
