[JavaScript] Array.Object()

1. Object 생성하기

방법1 ) new Object()

const myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

 

방법2 ) 중괄호({}) 안에 쉼표로 구분한 속성 이름과 값의 목록으로 나타내는 객체 초기자

const myCar = {
  make: "Ford",
  model: "Mustang",
  year: 1969,
};

 

방법3 ) 각 변수를 쉼표로 구분해서 한 번에 생성하고 할당

const myObj = new Object(),
  str = "myString",
  rand = Math.random(),
  obj = new Object();

2. Object 속성 특징

• 객체 속성 이름은 유효한 JavaScript 문자열 혹은 문자열로 변환 가능한 것이면 모두 가능(빈 문자열 포함)
• 유효한 JavaScript 식별자가 아닌 이름(공백이나 붙임표, 숫자로 시작하는 이름)을 가진 속성은 대괄호([ ]) 표기법으로만 접근 가능 

myObj.type = "마침표 구문";
myObj["date created"] = "공백을 포함한 문자열";
myObj[str] = "문자열 값";
myObj[rand] = "무작위 수";
myObj[obj] = "객체";
myObj[""] = "빈 문자열까지";


//해당 속성이 없는 경우
myCar.color; // undefined ❗null 아님

3. Object 접근하기

접근법1 )

myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;

접근법2 ) 변수에 저장된 문자열 값으로 접근

let propertyName = "make";
myCar[propertyName] = "Ford";

propertyName = "model";
myCar[propertyName] = "Mustang";

 

접근법 3) for...in 으로 객체의 열거 가능한 속성을 순회 ▸객체와 객체 이름을 매개변수로 제공하면, 객체의 속성들을 출력

function showProps(obj, objName) {
  let result = "";
  for (let i in obj) {
    // obj.hasOwnProperty()를 사용해서 객체의 프로토타입 체인에 존재하지 않는 속성을 제외
    if (obj.hasOwnProperty(i)) {
      result += `${objName}.${i} = ${obj[i]}\n`;
    }
  }
  console.log(result);
}

//showProps(myCar, 'myCar')
myCar.make = Ford
myCar.model = Mustang
myCar.year = 1969

4. 객체 속성 나열하기

객체 속성을 나열하거나 순회하는 방법으로 세가지 내장된 방법이 있다.

• for...in 반복문 : 객체와 객체의 프로토타입 체인에 존재하는 모든 열거 가능한 속성을 순회.
• Object.keys(o) : o 객체 자신만의(프로토타입 체인을 제외한) 열거 가능한 속성 이름("키")을 배열로 반환.
• Object.getOwnPropertyNames(o) : o 객체 자신만의 모든(열거 불가능하더라도) 속성 이름("키")을 배열로 반환.

5. 객체 속성 나열하기 - 숨은 속성의 경우

'숨은' 속성(프로토타입 체인 상의 속성 중, 같은 이름의 속성이 체인에서 앞서 존재해서 가려진 속성)을 나열하는 내장 방법은 없으나 아래의 함수를 사용할 수 있다.

//'숨은' 속성(프로토타입 체인 상의 속성 중, 같은 이름의 속성이 체인에서 앞서 존재해서 가려진 속성)을 나열
function listAllProperties(o) {
  let objectToInspect = o;
  let result = [];

  while (objectToInspect !== null) {
    result = result.concat(Object.getOwnPropertyNames(objectToInspect));
    objectToInspect = Object.getPrototypeOf(objectToInspect);
  }

  return result;
}

 

 

 

 

 

출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Working_with_objects