Prototype, Prototype Chain

Prototype, Prototype Chain JavaScript는 프로토타입 기반 언어라고 불립니다. JavaScript 개발을 하면 빠질 수 없는 것이 prototype입니다. prototype이 거의 JavaScript 그 자체이기 때문에 이해하는 것이 어렵고 개념도 복잡합니다. JavaScript도 객체지향 언어입니다. 하지만 자바스크립트에는 class라는 개념이 없습니다. (ES6 에서 class 문법이 추가되었습니다.) 대신 prototype이라는 것이 존재합니다. 자바스크립트가 프로토타입 기반 언어라고 불리는 이유입니다. 자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근 시 객체 자신의 것 뿐 아니라 proto가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나..

2023.12.23

Constructor Function 생성자 함수

Using function to create objects 생성자 함수로 객체 만들기 this 키워드를 통해서 property를 세팅할 수 있다. 생성자 함수로 객체를 만들 때는 꼭 'new' 키워드를 사용해야 한다. function IdolModel(name, year){ this.name = name; this.year = year; this.dance = function(){ return `${this.name}이 춤을 춥니다.`; } } // new 키워드로 호출 const yuJin = new IdolModel('안유진', 2003); console.log(yuJin); // IdolModel { name: '안유진', year: 2003 } console.log(yuJin.dance()); /..

2023.12.23

Immutable Objects - extensible, seal, freeze

Immutable Objects 불변 객체 - JavaScript에서 primitive data type(원시 타입)은 변경 불가능한 값(immutable value)이며, 객체는 변경 가능한 값(mutable value)입니다. immutable을 쓰는 이유는 궁긍적으로 '성능' 때문입니다. mutable value는 값에 대한 메모리 주소를 참조하기 때문에 값을 변경했을 경우 해당 값을 사용하고 있는 모든 곳에서 side effect(부수 효과)가 발생하여 예기치 못한 버그를 유발할 수 있습니다. immutable로 객체를 선언하고 사용하게 되면 객체의 메모리 주소가 불변하기 때문에 구조를 단순하게 유지할 수 있고 그로 인해 구조적인 공유를 할 수 있어 애플리케이션을 추론하기 쉽게 됩니다. 내부적으로..

2023.12.23

Property Attribute

property attribute JavaScript의 객체는 key, value만 존재하는 것이 아니라 생각보다 굉장히 섬세한 객체이다. 객체나 클래스에서 선언하는 프로퍼티의 애트리뷰트를 확인해볼 수 있다. 객체의 프로퍼티에는 아래 2가지 종류가 있다. 데이터 프로퍼티 - 키와 값으로 형성된 실질적 값을 갖고 있는 프로퍼티 액세서 프로퍼티 - 자체적으로 값을 갖고 있지 않지만 다른 값을 가져오거나 설정할 때 호출되는 함수로 구성된 프로퍼티 ex) getter, setter 1. 프로퍼티 애트리뷰트 출력 Object.getOwnPropertyDescriptor(객체, 프로퍼티key) Object.getOwnPropertyDescriptors(객체) Object - 대문자로 시작하므로 생성자 함수 이거나 ..

2023.12.22

getter & setter

getter와 setter는 객체 지향 프로그래밍에서 사용되는 개념이며, 일종의 메서드라고 보면 된다. 즉, 단어 그대로 getter는 객체의 속성(property) 값을 반환하는 메서드이며, setter는 객체의 속성 값을 설정, 변경하는 메서드라고 보면 된다. 예를 들어 user 라는 객체가 있을 경우, 보통이라면 user.name으로 프로퍼티로 바로 접근해서 이름값을 가져오거나 재설정 할 텐데 const user = { name: 'inpa', age: 50 } console.log(user.name); // inpa user.name = 'tistory'; 위와 같이 바로 접근하지 말고 getName(), setName() 메서드를 통해 경유해서 설정하도록 하는 기법이 바로 getter와 sett..

2023.12.22

ES6 class

ES6 클래스 문법은 좀 더 JAVA 스럽게 객체 지향적으로 표현하기 위해 추가된 새로운 문법이다. ES5 까지 JavaScript에는 클래스가 없었다. 그래서 프로토타입 체이닝을 통해 클래스 비스무리하게 구현 해왔었는데 ES6 버전에 들어서면서 클래스와 비슷한 구조 문법을 추가하였다. 다만 생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 작동된다. ES5 프로토타입 문법 VS ES6 클래스 문법 이 둘은 같은 결과를 출력하지만, 문법 생김새만 다르고 내부 로직은 완전히 같은 구조다. ES5 프로토타입 문법 // 생성자 함수 function Person({name, age}){ this.name = name; this.age = age; } Person.prototype.introduce..

2023.12.22