본문 바로가기

JavaScript25

객체끼리 값 비교하기 object(객체)는 참조형이기 때문에 key, value 값 및 순서가 같은 object를 일치 연산자(===)로 비교할 수 없다. 즉, 참조형을 원시형으로 바꾸어서 비교해주어야 한다! 1. key 순서가 정해진 객체 비교 const one = { name: "wooyoung", age: 34, } const two = { name: "wooyoung", age: 34, } // 1. Using JSON JSON.stringify(one) === JSON.stringify(two); // true console.log(JSON.stringify(one)); // '{"name":"wooyoung","age":34}' // 2. Using Object.entries Object.entries(one).t.. 2023. 11. 13.
onChange, onInput 차이 onChange input에서 포커스가 벗어났을 때 input에 입력된 값이 이전과 다르면 onChange event 발생. onInput input에 값이 변경될 때마다 onInput event 발생. 예시 input text가 두 글자 이상일 떄, 버튼 색상이 활성화 된다면? onChange 👉 두 글자를 입력하고 마우스로 다른곳을 클릭했을 때 버튼 색상 변경 onInput 👉 두 글자를 입력하는 순간 버튼 색상 변경 2022. 10. 31.
클래스 비교(ES5 vs ES6) 자바스크립트는 프로토타입 기반 언어이기 때문에 클래스 및 상속 개념은 존재하지 않지만 프로토타입을 기반으로 클래스와 비슷하게 동작하도록 도입되어 왔다. > ES5 /* 생성자 함수 */ let ES5 = function (name) { this.name = name; }; /* 스태틱 메서드 */ ES5.staticMethod = function () { return this.name + ' 스태틱 메서드!'; }; /* 프로토타입 메서드 */ ES5.prototype.method = function () { return this.name + ' 프로토타입 메서드!'; }; let instance = new ES5('es5'); console.log(ES5.staticMethod()); // 'es5 스.. 2022. 7. 24.
Static Methods, Prototype Methods 정리 생성자함수 Array 입장에서 디렉터리 구조를 살펴보면 스태틱 메서드 from(), isArray(), of() 클래스(생성자함수)에서 직접 정의한 메서드 인스턴스에 상속(참조)되지 않는다. 인스턴스에서 직접 호출할 수 없고 클래스에서만 호출 가능. 프로토타입 메서드 map(), forEach(), pop() ... 클래스의 prototype 내부에 정의된 메서드 인스턴스에 상속(참조)가 가능하다. 인스턴스에서 직접 호출할 수 있다. > 예시 /* 생성자 Constructor */ let Constructor = function(width, height) { this.width = width; this.height = height; }; /* 프로토타입 메서드 */ Constructor.prototype.. 2022. 7. 17.
Object.create 활용예시 (prototype) 일전에 게시한 프로토타입 게시물들을 보게 되면 프로토타입 체인상 가장 마지막에는 언제나 Object.prototype이 있다고 볼 수 있는데, 예외적으로 Object.create 를 이용하면 Object.prototype의 메서드에 접근할 수 없도록 할 수 있다. Object.create(null) 은 __proto__가 없는 객체를 생성한다. > 예시 1. 변수 _proto에 __proto__ 프로퍼티가 없는 객체를 할당하고 2. getValue 메서드 추가해보았다. 3. 변수 obj에 앞서 만든 _proto를 __proto__로 하는 객체를 할당 > 정리 변수 obj를 출력해보면 __proto__에는 오직 getValue 메서드만이 존재하며 __proto__ 및 construtor 프로터티 등은 보이.. 2022. 7. 3.
객체 전용 메서드란? 프로토타입 체이닝으로 인해 어떤 생성자 함수이든 prototype은 반드시 "객체"이기 때문에 Object.prototype이 언제나 프로토타입 체인의 최상단에 존재하게 된다. 따라서 객체에서만 사용할 메서드(객체 전용 메서드)는 프로토타입 객체 안에 정의할 수가 없다. 왜냐하면 Object.prototype은 다른 데이터 타입이 __proto__에 반복 접근함으로써 도달할 수 있는 최상위 존재이기 때문! = 다른 데이터타입도 프로토타입 체이닝을 통해 거슬러 올라가 해당 메서드를 사용할 수 있기 때문 = Object.prototype에 메서드를 만드는 순간 다른 데이터타입에서 사용가능 > 객체 전용 메서드 구현방법은? 이와같은 이유로 객체 전용 메서드들은 Object.prototype이 아닌 Object.. 2022. 6. 6.
프로토타입 체이닝 (prototype chaining) 이전 게시물인 "프로토타입 디렉터리 구조"를 좀더 살펴보자면 Object 객체의 디렉터리 구조는 아래와 같다. 배열 리터럴의 디렉터리 구조도 다시 살펴보면 __proto__안에 또다시 __proto__가 등장하는데 Object.prototype과 동일한 내용인 것을 볼 수 있다! > 이유는? prototype 객체가 "객체"이기 때문이다. 결국 모든 객체의 __proto__에는 Object.prototype이 연결된다고 볼 수 있다. 배열 리터럴 기준으로 __proto__는 언제나 생략 가능하기 때문에 Array.prototype 내부의 메서드를 자신의 것처럼 실행할 수 있었듯이, Object.prototype 내부의 메서드 또한 자신의 것처럼 실행할 수 있다는 것이다! 생략가능한 __proto__를 한.. 2022. 6. 4.
프로토타입(prototype) - constructor 프로퍼티 생성자 함수의 프로퍼티인 prototype 객체 내부에는 constructor 라는 프로퍼티가 있다. 인스턴스의 __proto__ 객체 내부에도 마찬가지로 존재한다. 이 프로퍼티는 단어 그대로 자기 자신을 참조한다. 즉, 인스턴스의 생성자 정보를 알아내는 수단으로 보면 된다. let arr = [1, 2]; Array.prototype.constructor === Array; // true 자기 자신 arr.__proto__.constructor === Array; // true 자기 자신 arr.constructor === Array; // true let arr2 = new Array(3, 4); let arr3 = new arr.constructor(3, 4); // arr.constructor =.. 2022. 5. 29.
프로토타입(prototype) 디렉터리 구조 직접 new 연산자와 함께 생성자함수를 호출하는 경우와 내장 생성자 함수인 Array를 사용하는 경우의 프로토타입-인스턴스간의 디렉터리 구조를 살펴보자. 내장 생성자 함수의 구조를 통해 배열 리터럴에 from, isArray, of 메서드를 직접 사용할 수 없는 이유 또한 알 수 있다! 1. new 생성자 함수(인스턴스 직접 연결) new 연산자를 IamConstructor란 생성자 함수와 함께 호출하여, IamInstance란 인스턴스를 생성하였다. const IamConstructor = function (name) { this.name = name; }; IamConstructor.prototype.method1 = function() {}; IamConstructor.prototype.proper.. 2022. 5. 28.

티스토리툴바