JS OBJECT

2022. 12. 26. 10:29

object

자바스크립트에서는 객체는 정말 많다.

오브젝트 유형 : 배열(array) [ ](대괄호) , 객체, 날짜(date) 등등 위에 정리 참고.
콜론(,)으로 요소 구분

속성에는 배열, 함수, 또다른 오브젝트를 만들 수 있다.

속성에 접근할 수 있다.

new키워드로 정의된 경우 부울 숫자 문자열은 객체가 될 수 있다.(그러나 new 객체생성 비추)

{name:value} 데이터 형태 쓴다

같은 데이터 형태(알아두면 좋은것 name과 value 쌍으로 이룬다.)

Associative arrays in PHP
Dictionaries in Python
Hash tables in C
Hash maps in Java
Hashes in Ruby and Perl

object 속성 값 출력하는 방법

1. 객체 속성을 이름별로 표시

2. 루프에서 객체 속성 표시

3. Object.values()를 사용하여 객체 표시

반환값 : 전달된 객체의 속성 값들을 포함하는 배열

4. JSON.stringify()를 사용하여 객체 표시

JSON.stringify() 함수를 문자열화하지 않습니다.

그러나 함수를 먼저 문자열화 시키면 출력이 가능하다.

배열을 문자열화하는 것도 가능합니다.

모든 JavaScript 개체는 프로토타입에서 속성과 메서드를 상속한다

최상위 프로토타입은 Object.prototype이다.

JavaScript prototype속성을 사용하면 개체 생성자에 새 속성을 추가할 수 있습니다.

JavaScript Object Accessors(객체 접근자)

Getters and Setters(ES5 2009에 도입)

//GETTER 예시
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  language: "en",
  get lang() {
    return this.language;
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;


//SETTER예시
const person = {
  firstName: "John",
  lastName: "Doe",
  language: "",
  set lang(lang) {
    this.language = lang;
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

GETTER와 SETTER를 사용하는 이유

더 나은 데이터 품질을 확보할 수 있습니다.

더 간단한 구문을 제공

속성과 메서드에 대해 동일한 구문을 허용

비하인드 스토리 작업에 유용

Object.defineProperty()메서드

Getter 및 Setter를 추가하는 데에도 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Perfect for creating counters:</p>

<p id="demo"></p>

<script>
// Define an object
const obj = {counter : 0}; // 만약 var를 썼다면 get 함수의 this를 안써도 된다.

// Define Setters and Getters 
Object.defineProperty(obj, "reset", {  // reset속성과 함수를 get 
  get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", { //increment속성과 함수를 get
  get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", { //decrement속성과 함수를 get 
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {  // add속성과 함수를 set
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", { //subtract 속성과 함수를 set
  set : function (value) {this.counter -= value;}
});

// Play with counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
document.getElementById("demo").innerHTML = obj.counter;
</script>

</body>
</html>

SET

set의 value는 중복 불가능 하며, 순서가 없다.

set은 key가 없다. / key() 메소드는 value값을 반환한다.

entires() 메소드는 [ value, value ] 형태를 반환한다.

size 속성은 set의 크기를 반환

set의 typeof는 object이다.

SET 메서드

SET property

MAP

key와 value가 한쌍이다.(모든 데이터 유형이 가능)

키는 순서를 기억한다.

size()메소드는 맵의 크기를 반환한다.

map의 typeof는 object이다.

MAP 메서드

JS OBJECT, MAP 차이점

OBJECT	MAP
직접 반복할 수 없다.	직접 반복 가능
크기 속성이 없다	크기 속성이 있다.(size)
name은 문자열 또는 숫자, 식별자 이름여야한다.	key는 모든 데이터유형이 될 수 있다.
name은 순서가 없다.	key는 삽입순으로 정렬
기본키(name) 있음	기본키 없음

'Web > javascript' 카테고리의 다른 글

js 디버깅 브라우저(크롬)에서 (0)	2023.01.10
JSONP (0)	2023.01.10
JS Browser BOM (0)	2022.12.22
JS 유효성 검사(Validation) (0)	2022.12.22
JS HTML DOM(문서 객체 모델) (0)	2022.12.22

doornuddle