Frontend/javascript11 [javascript] 생성자 함수에 의한 객체 생성 - 언제 필요하고 어떻게 사용하는가? 객체를 생성할때 아래와 같이 객체 리터럴로 객체를 생성하는 것이 가장 간단한 방식일 것이다. const objectByObjectLiteral = { name: 'javascript'}; 하지만 아래와 같이 동일한 구조의 객체를 여러 개 생성해야 할 때 (특히 프로퍼티의 갯수가 많고, 동일한 내용의 메서드들이 있는 경우) 객체 리터럴로 객체를 생성하는 방식은 다소 비효율적일 수 있다. 이런 경우에 생성자 함수로 객체를 생성하는 방법을 사용해볼 수 있다. const js = { name: 'javascript'; getName() { return 'my name: ' + this.name ; }};const html = { name: 'ht.. 2024. 4. 18. [javascript] this 개념과 this 바인딩 이해하기 아래와 같은 생성자 함수가 있다.function Circle(radius) { ...} 이 생성자 함수를 가지고 new Circle(5) 로 새로운 인스턴스를 생성했을때, 인수로 받은 radius 값 5를 생성한 인스턴스의 radius 값으로 할당하려면 어떻게 해야할까? 또, 아래와 같이 Circle의 prototype으로 지름을 구하는 메서드를 추가해서, Circle 생성자 함수가 생성한 인스턴스의 지름을 구하려면 어떻게 해야할까? Circle.prototype.getDiameter = function () { ...} 닭이 먼저이냐 달걀이 먼저이냐의 문제처럼, 생성자 함수 내에서 생성자 함수가 생성할 인스턴스를 참조할 수는 없다. 왜냐하면, 생성자 함수가 먼저 정.. 2024. 4. 11. 자바스크립트 객체 프로퍼티 이해하기 2. [프로퍼티 정의] 프로퍼티 정의란, 프로퍼티 어트리뷰트를 정의하는 것을 의미한다. 혹시 프로퍼티 어트리뷰트가 무엇인지 모른다면 아래 포스팅을 통해 먼저 내부 슬롯/내부 메서드에 대해 훑어 보시길 바란다! 자바스크립트 객체 프로퍼티 이해하기 1. [내부 슬롯 & 내부 메서드 ] 내부 슬롯과 내부 메서드 ECMA Script 사양에서는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 내부 슬롯(internal slot)과 내부 메서드(internal method)라는 개념을 사용한다. 이 두 개념은 실제 stay-present.tistory.com 프로퍼티를 정의하는 상황에는 아래 두 가지 상황이 존재한다. 1. 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의 2. 기존 프로퍼티의 프로퍼티 어트리뷰트를 재.. 2024. 4. 1. 자바스크립트 객체 순회 메서드 : for...in / Object.keys() / Object.values() / Object.entries() / Object.getOwnPropertyNames() / Reflect.ownKeys() JavaScript에서 객체를 열거(enumerate)하는 다양한 방법 중 몇 가지 주요 메서드들을 정리하려고 한다. 이 정도 메서드들은 문제없이 바로바로 쓰고 차이점은 알 수 있도록 익숙해져야지 (제발!) 1. for...in 루프 객체의 모든 열거 가능한 속성을 순회 객체 자체의 속성뿐만 아니라 프로토타입 체인을 통해 상속받은 속성도 순회가 가능하다 const object = {a: 1, b: 2, c: 3}; for (const key in object) { console.log(key, object[key]); } 2. Object.keys() 주어진 객체의 자체 열거 가능한 속성의 이름들을 배열로 반환. (상속받은 속성은 제외) const object = {a: 1, b: 2, c: 3}; Ob.. 2024. 3. 28. 자바스크립트 객체 프로퍼티 이해하기 1. [내부 슬롯 & 내부 메서드 ] 내부 슬롯과 내부 메서드 ECMA Script 사양에서는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 내부 슬롯(internal slot)과 내부 메서드(internal method)라는 개념을 사용한다. 이 두 개념은 실제로 자바스크립트 엔진에서 동작하는 개념이지만, 직접 접근할 수 있도록 공개되어있지는 않다. 하지만 내부 슬롯과 내부 메서드 중 일부에 대해서는 간접적으로 접근할 수 있는 수단이 제공된다. 예를 들어, 객체의 내부 슬롯 [[Prototype]]은 직접 접근할 수는 없지만, __proto__ 를 통해 간접적으로 접근할 수 있다. const javascriptObject= {}; //모든 자바스크립트 객체는 [[Prototype]] 내부 슬롯을 가지고 있다. o.[[Prototype].. 2024. 3. 24. 이전 1 2 다음
