Frontend/javascript6 [javascript] 생성자 함수는 어떤 과정으로 인스턴스를 생성할까? 생성자 함수는 인스턴스를 생성하기 위한 '템플릿'처럼 동작한다. 즉 인스턴스를 생성하고, 이 인스턴스에 프로퍼티를 추가하고 초기값을 할당하여 초기화 하는 것이다. 아래와 같은 생성자 함수 정의를 보면, 인스턴스를 초기화하는(값 할당) 부분은 있지만 인스턴스를 생성하고 반환하는 코드가 없다. (그래서 아래 Language를 일반 함수처럼 호출하면 반환값이 undefined이기도 하다. - 참고)function Language(name) { this.name = name; this.getName = function() { return 'my name: ' + this.name ; }}; 그런데 어떻게 생성자 함수를 호출하면 객체(인스턴스)가 생성되어 반환되는 것일까? new 연산자.. 2024. 4. 25. [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 다음 반응형
