[JS] 객체 리터럴

객체

 

 

객체 리터럴

객체란?

: 객체 타입은 다양한 탕비의 값을 하나의 단위로 구성한 복합적인 자료구조다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만,

객체 타입의 값, 즉 객체는 변경 가능한 값이다.

객체는 0개 이상의 프로퍼티로 구성된 집합, 키와 값으로 구성

• 함수도 값으로 취급할 수 있다. 함수일 경우 일반 함수와 구분하기 위해 메서드라고 부름

let person = {
name: 'Son',
age : 29
};

객체는 프로퍼티와 메서드로 구성

• Property : 객체의 상태를 나타내는 값 (데이터) +Method : 프로퍼티를 참조하고 조작할 수 있는 동작

 💡 객체를 이해해야 함수를 제대로 이해할 수 있다. 반대도 성립 객체와 함수를 분리해서 설명하는 것은 옳지 않지만, 잘 이해되지 않는 개념이 나와도 멈추지 지 말고 일단 다음으로 넘아가는 것이 공부의 팁

 

---

프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.

let person = {
name: 'Lee'
//프로퍼티 키는 name, 프로퍼티 값은 'Lee'
age : 20

//프로퍼티 키는 age, 프로퍼티 값은 20
};

 

---

메서드

 💡 JS에서 사용할 수 있는 모든 값은 프로퍼티 값으로 사용 가능 JS 함수는 객체 (일급 객체)이다. 따라서 프로퍼티 값으로 사용 가능

 

 💡 let circle = {
radius = 5, // 프로퍼티

getDiameter: function () { // 메서드
 return 2 * this.radius; // this는 circle을 가리킴
// '.' 이것의 radius

}

 
};

console.log(circle.getDiameter());

객체를 배열처럼 순회하는 팁

let person = {
  name: "Son",
  age: 25,
  nation: "South Korea"
};
//객체 선언 

const personKeys = Object.keys(person);

//Object.keys함수에 객체 자체를 넣어주면 객체의 키들을 배열로 반환해서 돌려줌

for (let i = 0; i < personKeys.length; i++) {
  const curKey = personKeys[i];
//배열화된 personKeys는 Length 프로퍼티를 이용하면 인덱스 0부터 끝까지 순회가 
//가능하게 됨 length의 중요성

//personKeys[i]를 통해 키들을 전부 배출 가능 

  const curValue = person[curKey];

//value까지 얻고 싶다면 그대로 curKey (키값 저장)된 것을 가져다 쓰면 밸류까지 가져오는 것

console.log(${curkey} : ${curValue}); }

가능하게 된다

 

  💡 객체, 배열, 반복문의 조합

1. Object.keys함수에 객체 자체를 넣어주면 객체의 키들을 배열로 반환해서 돌려줌
2. 배열화된 객체는 length를 사용하면 인덱스 처음부터 끝까지 순회 후 추출 가능
3. 키뿐 아니라 밸류도 얻어 오고 싶다면 키에 쓴 변수를 그대로 가져가 괄호표기법으로 얻어오면 접근가능하다

 

console.log 결과 name : Son, age : 25 nation : south korea

key와 value를 순회해서 추출 가능