Object

ME2DESIGNER.COM·2022년 3월 10일

JavaScript 드림코딩

JavaScript

목록 보기

11/16

Object란?

Javascript type의 일종
관련 있는 데이터나 함수의 묶음
Object는 key, value로 구성된 프로퍼티(Property) 집합체 이다.

Object = property+method
property : 데이터를 의미
method : 데이터를 참조하고 조작할 수 있는 동작(behavior)

프로퍼티

프로퍼티는 프로퍼티 key(이름)와 프로퍼티 value으로 구성된다.
(Property = key: value)
프로퍼티 key는 프로퍼티를 식별하기 위한 식별자(identifier)다.
아래 Object의 key는 name, value는 ellie 또 다른 key는 age, value는 4 이다.
```
const ellie = { name: "ellie", age: 4 };
```
Check Point!
- 이미 존재하는 프로퍼티 키를 중복 선언하면
- 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.
- 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.
- 프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다
- .또한 문자열 타입의 값으로 수렴될 수 있는 표현식도 가능하다.
- 프로퍼티 키는 문자열이므로 따옴표(‘’ 또는 ““)를 사용한다. 하지만 자바스크립트에서 사용 가능한 유효한 이름인 경우, 따옴표를 생략할 수 있다.
- 자바스크립트에서 사용 가능한 유효한 이름이 아닌 경우, 반드시 따옴표를 사용하여야 한다.

메소드 (method)

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.
즉, 메소드는 객체에 제한되어 있는 함수를 의미한다.

const Obj = {
  key: function () {
    console.log("메소드");
  },
};

Obj.key(); //메소드

계산된 프로퍼티

Object 데이터 접근시 . 또는 [] 이용할 수 있다.

일반적으로 . 사용하되, [] 동적으로 데이터를 받아오는 경우 권장.

console.log(ellie.name);
console.log(ellie["name"]); //이 경우 key는 `string`형식으로 사용해야된다.

function printValue(obj, key) {
  console.log(obj[key]);
}
printValue(ellie, "name"); // ellie
printValue(ellie, "age"); // 4

생성자 함수

Object가 필요할 때 일일이 만들게되면 이렇게 버불가피하게 동일한 key 와 value를 반복해서 써야하는 문제점이 있지만, key 와 value가 동일하다면 이것을 생략해서 쓸 수 있다. 호출할 때도 class에서 object를 만드는 것처럼 new Person 과 같은 함수를 만들어 사용하면 된다.

// 다른 계산은 하지 않고 순수하게 object를 생성하는 함수들은 보통 대문자로 시작하도록 함수를 만든다.
function Person1(name, age) {
  // this = {}; → 생략가능
  this.name = name;
  this.age = age;
  // return this; → 생략가능
}

const person4 = new Person1("elile", 30);
console.log(person4); // 결과 {name: "ellie", age= 30}

// key와 value가 동일하다면 아래와 같이 생략도 가능하다
function Person2(name, age) {
  return {
    name,
    age,
  };
}

const person5 = new Person2("me2designer", 40);
console.log(person5); // 결과 {name: "me2designer", age= 40}

in operator

in 이라는 키워드를 이용해서 해당하는 key가 object 안에 있는지 확인 후 true, false를 반환한다.

const ellie = { name: "ellie", age: 4 };

console.log("name" in ellie); // true
console.log("age" in ellie); // true
console.log("random" in ellie); // false
console.log(ellie.random); // undefined

for in vs for of

for in

for in 반복문은 모든 객체의 속성들을 반복하여 작업을 수행할 수 있다.
객체의 key 값에 접근할 수 있지만, value 값에 접근 할 수 없다.

객체의 모든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않는다.

const obj = { name: "ellie", age: 4 };
obj.hasJob = "true";

for (let key in obj) {
  console.log(key, obj[key]);
}

for of

ES6에 추가된 새로운 컬렉션 전용 반복 구문

컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 한다.

const array = [1, 2, 4, 5];

for (let value of array) {
  console.log(value);
}

/*
  // for of는 아래 내용과 동일함
  for (let i = 0; i < arrary.length ; i++){ 
    console.log(arrary[i]); 
  }   
*/