객체 접근 방법

자바스크립트에서 객체 접근 방법

키에 해당하는 값 접근

• 점 표기법(Dot Notation)

객체.key : 마침표( . )를 사용하여 프로퍼티에 접근하는 표기법

장점 : 가독성이 좋다.

단점 : 대소문자를 구분해서 써야 하며 변수를 포함할 수 없고, 숫자로 시작할 수 없다.

• 괄호 표기법(Bracket Notation)

객체['key'] : 대 괄호[ ] 사이에 키의 값을 '문자열' 로 넣어서 접근하는 표기법

장점 : 키 값이 변수일 때 주로 사용 가능하며 대소문자를 구분하지 않고, 숫자나 공백이 사용 가능하다.

 

const Person = {
  name: 'Soo',  
  age: 24,                      
};

// 점 표기법
console.log(Person.name) // Soo

// 괄호 표기법
console.log(Person['name']) // Soo

 

객체 value으로 key 접근

• find 메서드

조건을 만족하는 요소를 반환

const Person = {
  name: 'Soo',  
  age: 24,                      
};

const keysOfPerson = Object.keys(Person);
const findKey = keysOfPerson.find((key) => Person[key] === 24);

console.log(findKey); // "age"

 

• filter 메서드

조건을 만족하는 요소를 배열로 반환

const Person = {
  name: 'Soo',  
  age: 24,                      
};

const keysOfPerson = Object.keys(Person);
const findKey = keysOfPerson.filter((key) => Person[key] === 'Soo');

console.log(findKey); // ["name"]

 

이미 선언한 객체에 대한 key, value값 추가

const Person = {
  name: 'Soo',  
  age: 24,                      
};

Person.email = "qwe@naver.com"  // 추

console.log(Object.values(Person)); // ["Soo",24,"qwe@naver.com"]

 

객체 순회

• Object.keys()

객체가 가지고 있는 key들을 Array 형태로 리턴하는 메소드

const Person = {
  name: 'Soo',  
  age: 24,                      
};


console.log(Object.keys(Person)); // ["name","age"]

 

• Object.values()

객체가 가지고 있는 value의 값을 출력

const Person = {
  name: 'Soo',  
  age: 24,                    
};


console.log(Object.values(Person)); // ["Soo",24]

 

객체 for-in

const Person = {
  name: 'Soo',  
  age: 24,                      
};

for (let key in Person) {
  console.log(`${key} ${Person[key]}`)   
}

/*
'name Soo'
'age 24'
*/