JS

08 JS 객체

와라리요 2022. 10. 11. 14:35

 - 객체는 8가지 자료형 중 하나이지만 다른 7개의 원시형과 달리 다양한 데이터를 담을 수 있으며 {}로 만들며 키(key) : 값 (value) 형태를 띠고 있으며 이것을 묶어서 프로퍼티(property)라고 부른다.

※ 문법

let user = new Object(); // '객체 생성자' 문법
let user = {};  // '객체 리터럴' 문법 (주로 사용됨)

※ 객체 리터럴

 - {}를 이용해 개체를 선언하는 것은 '객체 리터럴' 이라고합니다~~

 


01 사용!!

 - 리터럴에 선언

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30,        // 키: "age", 값: 30
};

 - 프로퍼티 값 얻기

user.name; // John
user.age; // 30

- 리터럴에 프로퍼티 추가하기

user.residence = '서울'; // residence: '서울' 추가 됨

 - 프로퍼티 삭제하기

delete user.age; // age : 30 삭제됨

※ 최종!!

let user  = {
  name: '메롱',
  residence: '서울',
};

 


02 대괄호 표기법

 - 키를 넣을 때 띄어쓰기, 숫자로 시작, $, _ 제외한 특수 문자는 사용할 수 없으나 []를 이용하면 할 수 있다.

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

※ 키나 값은 전역 변수로 선언해 불어와 사용할 수 있어 사용자에게 값을 받아 추가하거나 삭제하는 것도 가능하다!

 


03 'in' 연산자로 프로퍼티 존재 여부 확인하기

 - JS는 없는 프로퍼티 값을 불러오면 undefined를 출력해 확인할 수 있으나 진짜 'undefined'이 값일 수 있으니 프로퍼티가 존재하는지 확인해보자!!!

let user = {
  name: "John",
  age: 30,
};

consol.log("age" in user); // user.age가 존재하므로 true
consol.log("blabla" in user); // user.blabla는 존재하지 않으므로 false

 


04 'for...in' 반복문

 - 객체 안에 있는 프러퍼티의 키나 값(value) 불러올 수 있으며 기본 형태는

for (let key in user) { //key는 함수의 매개변수 처럼 어떻게 사용되는지 명시하는 임의의 단어를 넣는다.
  //객체 안에 확인하고 싶은 프로퍼티의 키나 값을 선언한다.
}

ex)

let user = {
  name: "John",
  age: 30,
  residence: '서울',
};

for (let key in user) {
  // 키
  consol.log( key );  // name, age, isAdmin
  // 키에 해당하는 값
  console.log( user[key] ); // John, 30, true
}

※ 프로퍼티 이름의 제약사항

 - 키에는 다양한 하게 성정은 가능하나 for, let, const 등 예약어를 사용하면 안 된다.

더 상세한 내용을 알고 싶다면 클릭

'JS' 카테고리의 다른 글

10 JS 가비지 컬렉션  (0) 2022.10.18
09 JS 참조에 의한 객체 복사  (0) 2022.10.17
07-2 JS 다양한 함수  (0) 2022.10.07
07-1 JS 함수  (2) 2022.10.07
06 JS switch문  (0) 2022.10.07