본문 바로가기

Language/JavaScript28

프로토타입 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어입니다. 객체지향 프로그래밍은 상태와 동작을 하나의 논리적 단위로 구성한 복합적인 자료구조인 객체를 통해 프로그램에 필요한 속성만 추상화하여 표현하는 프로그래밍을 말합니다. 이때 핵심이 되는 개념이 “상속”입니다. 객체의 프로퍼티와 메서드를 다른 객체가 상속받아 그대로 사용할 수 있게 하는 기능이죠. 자바스크립트는 프로토타입을 활용하여 상속을 구현하고, 이를 통해 불필요한 코드와 메모리의 중복을 해결합니다.생성자 함수 내부에서 메서드를 정의하면 생성된 인스턴스는 해당 메서드의 복사본을 개별적으로 가지게 되며, 인스턴스마다 별도의 메모리가 할당됩니다. 그러나 메서드를 생성자 함수의 프로토타입 객체에 추가할 경우, 생성된 인스턴스들은 상속된 프로토타입 객.. 2025. 3. 8.
async/await - 실행 컨텍스트로 이해하기 async/awaitasync/await는 ES8에서 도입된 문법으로, 비동기 작업을 마치 동기적인 코드처럼 작성할 수 있게 해주어 가독성을 높이고, 비동기 작업의 흐름을 직관적으로 이해할 수 있도록 도와줍니다. asyncasync 함수는 언제나 프로미스를 반환합니다. 명시적으로 프로미스를 반환하지 않는 경우에도 async 함수는 암묵적으로 반환값을 resolve하는 프로미스를 반환합니다.awaitawait 키워드는 프로미스가 settled 상태(비동기 처리가 수행된 상태)가 될 때까지 대기하다가 처리 결과를 반환합니다. await 키워드는 반드시 프로미스 앞에서 사용해야 하며, async 함수 내부에서 사용해야 합니다.실행 컨텍스트로 살펴보기샘플 코드async function C() { conso.. 2025. 2. 20.
제너레이터 - 이터러블/ 이터레이터 제너레이터(generator)란ES6에서 도입된 제너레이터(generator)는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수입니다. 일반 함수와 다르게 호출자에게 함수 실행의 제어권을 양도하고, 호출자와 함수의 상태를 주고받을 수 있습니다. 제너레이터 함수를 호출하면 제너레이터 객체를 반환합니다. 이때 반환되는 제너레이터 객체는 이터러블(iterable)인 동시에 이터레이터(iterator)인 객체입니다.정확한 이해를 위해 이터러블과 이터레이터란 무엇인지 살펴보겠습니다.이터러블(iterable)이터러블은 for...of 루프에서 순회할 수 있는 객체로, 내부에 Symbol.iterator 메서드를 가지고 있습니다. 그리고 이 메서드는 이터레이터를 반환합니다.const i.. 2025. 2. 20.
Promise 개념 살펴보기(비동기, 힙메모리, 마이크로태스크 큐) Promise의 전반적인 개념과 Promise의 상태와 값을 사용할 수 있는 이유에 대해 정리해보았습니다.Promise는 ES6에서 자바스크립트의 비동기 처리를 위해 도입한 패턴입니다. 전통적인 콜백 패턴의 두 가지 문제점인 “콜백 헬로 인한 가독성 저하”와 “에러 처리의 한계”를 보완하였고, 비동기 처리 시점을 명확하게 표현할 수 있다는 장점을 가집니다.어떤 식으로 보완이 되었는지 이해하기 위해 먼저 기존 콜백 패턴의 문제점을 살펴보겠습니다.1. 비동기 처리를 위한 콜백 패턴의 단점1.1 콜백 헬1.1.1 콜백 패턴의 특징비동기 함수란 함수 내부에 비동기로 동작하는 코드를 포함한 함수로, setTimeout은 대표적인 비동기 함수입니다. 콜백함수의 호출이 비동기적으로 동작하기 때문입니다.비동기적으로 동.. 2025. 2. 12.

티스토리툴바