느려도 한걸음씩

자바스크립트에서 객체를 만드는 방식은 다양합니다. 그중에서도 class는 생성자 함수보다 더 명확하고 직관적인 문법으로 객체지향 프로그래밍을 구현할 수 있게 해줍니다. 이 글에서는 생성자 함수와 클래스의 차이점, 그리고 클래스 기반 상속, 오버라이딩까지 살펴보겠습니다. 🛠 생성자 함수 방식const User = function(name, age) { this.name = name; this.age = age; this.showName = function () { console.log(this.name); };};const mike = new User('Mike', 30); new 키워드를 사용해 객체를 생성합니다.각 인스턴스는 showName 메서드를 자신이 직접 소유합니다. (메모리 비..

자바스크립트에서 객체 간 상속은 클래스를 사용하지 않고도 쉽게 구현할 수 있습니다. 그 중심에 있는 개념이 바로 프로토타입(Prototype)입니다. 이번 글에서는 __proto__, 프로토타입 체인, hasOwnProperty, 그리고 생성자 함수 기반의 상속까지 차근차근 정리해보겠습니다. 🔎 프로퍼티는 어디서 왔을까?const user = { name: 'Mike'};console.log(user.hasOwnProperty('name')); // trueconsole.log(user.hasOwnProperty('age')); // false hasOwnProperty는 user 객체에 직접 정의되어 있지 않지만 작동합니다. 이유는?자바스크립트의 객체는 자신의 프로퍼티를 먼저 찾고, 없으면 프로..

자바스크립트에서 함수를 호출할 때, 함수 내부의 this가 가리키는 대상은 호출 방식에 따라 달라집니다. 이때, call, apply, bind를 사용하면 함수 호출 방식과 무관하게 this를 명시적으로 지정할 수 있습니다.이번 글에서는 세 메서드의 차이점과 활용 예제를 통해 call, apply, bind를 완벽하게 이해해봅니다. ✅ call – 함수를 호출하며 this를 지정call은 모든 함수에서 사용할 수 있는 메서드이며, 첫 번째 인자로 this로 사용할 객체를 넘기고, 나머지 인자들은 원래 함수의 매개변수로 전달됩니다.const mike = { name: 'Mike' };const tom = { name: 'Tom' };function showThisName() { console.log(t..

자바스크립트에서 클로저는 고급 개념 중 하나로 보이지만, 렉시컬 환경과 함수의 실행 방식만 이해하면 어렵지 않게 접근할 수 있는 개념입니다. 이번 글에서는 클로저의 개념을 이해하기 위해 렉시컬 환경(Lexical Environment)부터 차근히 짚고 가보겠습니다. 📌 렉시컬 환경(Lexical Environment)이란?자바스크립트가 코드를 실행하기 위해 내부적으로 변수와 함수 선언을 저장해두는 공간입니다.let one;one = 1;addOne(5);function addOne(num) { console.log(one + num);} 실행 흐름 정리:스크립트 시작 전, JS 엔진은 전역 렉시컬 환경을 구성합니다.one → undefined로 등록됨 (초기화 X)addOne → 함수 선언은 전체..

자바스크립트에서는 함수에 전달되는 인자나 배열/객체의 요소들을 유연하게 처리하기 위해 나머지 매개변수(Rest parameters)와 전개 구문(Spread syntax)을 제공합니다. ✨ arguments 객체함수 내부에서 arguments 객체를 통해 넘겨진 모든 인자에 접근할 수 있습니다.function showName(name) { console.log(arguments.length); // 전달된 인자의 개수 console.log(arguments[0]); // 첫 번째 인자 console.log(arguments[1]); // 두 번째 인자}showName('Mike', 'Tom'); ⚠️ arguments는 배열처럼 보이지만 실제 배열이 아니기 때문에 forEa..

자바스크립트에서 구조 분해 할당(Destructuring Assignment)은 배열이나 객체의 값을 손쉽게 변수에 할당할 수 있는 문법입니다. 코드가 더 간결하고 직관적으로 바뀌기 때문에 자주 사용됩니다. ✨ 배열 구조 분해배열의 각 요소를 순서대로 분해하여 변수에 담을 수 있습니다.let [x, y] = [1, 2];console.log(x); // 1console.log(y); // 2 배열 전체를 분해해서 각각의 변수에 할당하는 것도 가능합니다.let users = ['Mike', 'Tom', 'Jane'];let [user1, user2, user3] = users;console.log(user1); // 'Mike'console.log(user2); // 'Tom'console.log(user..

JavaScript를 사용하다 보면 "절대 충돌하지 않는 고유한 값"이 필요할 때가 있습니다. 이럴 때 사용하는 것이 바로 Symbol입니다. ES6(ECMAScript 2015)에서 도입된 Symbol은 객체의 고유한 속성을 만들거나, 내부에서만 사용되는 안전한 키를 만들 때 매우 유용하게 쓰입니다. ✅ Symbol이란?Symbol은 유일한 식별자(Unique Identifier)를 생성하는 원시 타입(Primitive Type)입니다. 다른 타입들과는 다르게 Symbol()을 호출할 때마다 항상 다른 값을 생성합니다.const a = Symbol()const b = Symbol()console.log(a === b) // false 비록 동일한 설명(description)을 붙이더라도, 각각의 Sy..

2025.04.18 - [FE develop/Javascript] - 자바스크립트 비동기 이해하기 - (4.1) Async & Await 알아보기 자바스크립트 비동기 이해하기 - (4.1) Async & Await 알아보기이번 글에서는 Promise를 좀 더 간단하고 읽기 쉽게 작성할 수 있도록 도와주는 Async & Await 문법에 대해 알아보겠습니다. ✅ Async란?async 키워드는 비동기 함수를 선언할 때 사용하는 키워드입니다.hjh0806.tistory.com 앞선 글에서는 async와 await의 기본적인 개념을 소개해드렸습니다. 이번 글에서는 이 문법을 조금 더 실용적인 예제들과 함께 알아보고, 에러 처리 방식과 Fetch API와의 활용 예도 함께 다뤄보겠습니다. ✅ async/awai..