JAN's History

자바스크립트에서는 모든 것이 객체이며 각 객체는 프로토타입을 가지고 있는데요! 이 프로토타입은 현재 객체가 상속받는 속성 및 메소드를 담고 있습니다. 자바스크립트에서 모든 객체는 다른 객체로부터 상속을 받습니다. 이러한 상속 구조는 프로토타입 체인(prototype chain)을 통해 구현됩니다. 이번 글에서는 프로토타입 체인의 기본 개념, 프로토타입 속성과 상속 구조, 그리고 이를 활용한 효율적인 메서드 공유에 대해 자세히 살펴보겠습니다. 🙌🎯 1. 프로토타입이란?모든 자바스크립트 객체는 숨겨진 __proto__ 프로퍼티를 가지고 있습니다. 이 프로퍼티는 객체의 프로토타입을 가리키며, 객체의 메서드와 속성을 상속받기 위한 연결고리입니다. 프로토타입은 생성자 함수의 prototype 속성을 통해 정의..

이번에는 생성자 함수를 사용해 객체를 만드는 방법에 대해 알아보겠습니다! 자바스크립트에서 객체를 만들 때 가장 많이 사용되는 방법 중 하나가 바로 생성자 함수인데요. 이번 글에서는 생성자 함수의 기본 개념과 new.target이란 무엇인지, 그리고 생성자 함수를 사용할 때 주의해야할 점에 대해 살펴보도록 하겠습니다 🙌 :)🎯 1. 생성자 함수란?생성자 함수는 여러 객체를 비슷한 구조로 만들 때 사용되는 함수입니다. 일반 함수와 구분하기 위해 함수 이름의 첫 글자를 대문자로 쓰는 것이 관례입니다. 생성자 함수는 new 키워드를 사용해 호출하며, 이때 함수 내부에서 this가 새로 생성되는 객체를 가리킵니다.📝 예제 코드: 생성자 함수 사용하기아래 코드에서는 Dog라는 생성자 함수를 정의하고 new 키..

이번에는 객체의 변경을 방지하고, 어떻게 객체를 불변(Immutable)하게 만들 수 있는지에 대해 알아보겠습니다. JavaScript에서 객체는 기본적으로 가변(Mutable)합니다. 하지만 Object 메서드를 사용해 객체의 수정, 삭제, 추가를 제한하여 불변 객체를 만들 수 있습니다. 자, 이제 예제와 함께 불변 객체에 대해 하나씩 살펴볼까요?🙌🏼🎯 1. Object.isExtensible()와 Object.preventExtensions()Object.isExtensible(object): 객체에 속성을 추가할 수 있는지 여부를 확인합니다. 기본적으로 모든 객체는 확장 가능합니다.Object.preventExtensions(object): 객체에 새로운 속성을 추가하지 못하도록 막습니다. 하..

이번에는 객체의 프로퍼티가 어떻게 동작하는지 제어할 수 있는 프로퍼티 어트리뷰트에 대해 알아보겠습니다. 프로퍼티 어트리뷰트는 크게 1.데이터 프로퍼티와 2.액세서 프로퍼티로 나눌 수 있습니다. 객체지향 프로그래밍에서 자바스크립트 객체를 세밀하게 관리할 때 프로퍼티 어트리뷰트를 활용할 수 있어요! 그럼 이제 예제와 함께 하나씩 살펴보도록 하겠습니다. 🐾🎯 1. 데이터 프로퍼티와 액세서 프로퍼티의 차이데이터 프로퍼티: 실제 값을 저장하는 일반적인 프로퍼티로, 키와 값으로 구성됩니다.액세서 프로퍼티: 자체적으로 값을 저장하지 않고, 다른 값을 가져오거나 설정할 때 호출되는 함수로 구성됩니다. 대표적으로 getter와 setter가 이에 해당합니다.📝 예시: 데이터 프로퍼티와 액세서 프로퍼티type과 si..

안녕하세요, 여러분! 오늘은 자바스크립트에서 함수의 종류와 this 키워드에 대해 조금 더 깊이 이야기를 나눠보려 해요. 특히, 화살표 함수와 일반 함수의 차이점이 this를 어떻게 다르게 처리하는지 알아보겠습니다. 그럼 시작해 볼까요? 🧐 자바스크립트에서 this는 경우에 따라 참조하는 객체가 달라져서 혼란스러울 수 있습니다. this의 값은 함수가 호출될 때 결정되는데, 이 점이 두 가지 함수 유형의 주요 차이점이 됩니다: 화살표 함수와 일반 함수입니다. 1. this란 무엇인가? 🤓먼저, this에 대해서 간단히 살펴보죠. this는 현재 코드 실행의 컨텍스트를 나타내는 특별한 키워드입니다. 즉, this가 가리키는 대상은 코드가 어떻게 호출되었는지에 따라 달라질 수 있습니다. 객체의 메서드로 ..

이번에는 자바스크립트 클래스의 상속, super 키워드, 그리고 오버라이딩에 대해 알아보겠습니다! 상속은 객체지향 프로그래밍의 핵심 개념으로, 이미 만들어진 클래스를 확장하여 새로운 클래스를 만들 수 있게 해주는데요! 예제를 통해 어떤 의미인지 자세하게 살펴보겠습니다 🙌🏼🎯 1. 기본 클래스와 상속의 개념먼저, 상속이란 어떤 클래스가 다른 클래스의 속성과 메서드를 물려받는 것을 의미합니다. 이를 통해 기존 클래스를 확장하거나 기능을 재사용할 수 있죠. 다음 코드를 보며 기본적인 클래스와 이를 상속하는 클래스를 만들어보겠습니다.class Dog { type; size; constructor(type, size) { this.type = type; this.size = size; } ..

JavaScript를 공부하다 보면 static 키워드에 대해 자주 듣게 될 거예요. 특히 클래스와 함께 사용될 때 많이 볼 수 있는데요, static이 정확히 무엇이며, 어떤 상황에서 사용하면 좋을지 함께 알아보겠습니다!🌟 static이란?static 키워드는 클래스의 정적 메서드나 정적 프로퍼티를 정의할 때 사용해요. 이 말이 무슨 뜻이냐면, static으로 선언된 메서드나 프로퍼티는 클래스 자체에 귀속되며, 클래스의 인스턴스(객체)를 생성하지 않고도 바로 접근할 수 있다는 거예요. 📝 간단한 예시 class Dog { static isCute = true; // 정적 프로퍼티 static typeName() { // 정적 메서드 return `typeName is...`; }}co..

자바스크립트에서 객체(Object)를 다루다 보면 데이터를 더 효율적으로 제어하고 관리하기 위해 getter와 setter를 사용하는 경우가 있습니다. 지금부터 이 개념들이 왜 등장했는지, 그리고 어떻게 활용하는지 예시와 함께 알아보겠습니다!🏷 1. Getter와 Setter란?Getter: 객체의 프로퍼티(속성)를 가져오는 역할을 합니다. 이때, 데이터를 단순히 반환할 뿐만 아니라 가공하거나 숨기고 싶은 정보에 접근하도록 할 때 사용됩니다.Setter: 객체의 프로퍼티를 설정하는 역할을 합니다. 값을 검증하거나 일부 조건에 따라 프로퍼티를 변경하고 싶을 때 사용됩니다.간단히 말해, getter와 setter는 객체의 속성을 더 유연하고 안전하게 다룰 수 있도록 도와줍니다.🎯 2. 왜 Getter와 ..