자바스크립트 프로퍼티 property 정리

 

자바스크립트 원시값 그리고 객체,참조값

객체는 프로퍼티로 구성되어 있는 집합체이다.

프로퍼티는 key, value로 구성되어 있다.

 

프로퍼티 key는 프로퍼티 value에 접근할 수 있는 이름으로 보면된다.

식별자의 역할을 한다.

 

let property = {
  key: "value",
};

console.log(property); // { key: 'value' }
console.log(property.key); // value
console.log(property["key"]); // value

key, value를 사용해서 만들고

접근을 할 때에는 .으로 구분하여 호출하거나

[""]안에 key 이름을 넣어서 호출할 수 있다.

* 문자열이면 '', "" 따옴표를 사용하고 숫자면 사용하지 않아도 된다. 대괄호 사용시!

 

여기서 유의해야할 사항은 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.

error가 나오지 않기 때문에 주의해서 사용해야한다.

 

---

프로퍼티 값 변경

let property = {
  key: "value",
};

property.key = "곽튜브";

console.log(property); // { key: '곽튜브' }

- 존재하고 있는 프로퍼티 key값에 접근하여 변경할 수 있다.

---

프로퍼티 추가

let property = {
  key: "value",
};

property.secondkey = "빠니보틀";

console.log(property); // { key: 'value', secondkey: '빠니보틀' }

- key의 네이밍을 하고 할당하면 동적으로 추가할 수 있다.

---

프로퍼티 삭제

let property = {
  key: "value",
};

property.secondkey = "빠니보틀";

delete property.secondkey;
console.log(property); // { key: 'value' }

- delete를 통해서 프로퍼티를 삭제할 수 있다.

- 만약 key에 오타가 나거나 없는 프로퍼티의 이름을 적게 되면 에러가 나지 않고 그냥 무시된다. 주의하자.

---

변수를 사용해서 프로퍼티 추가하기

- ES6에서는 객체 리터럴의 확장 기능을 제공한다.

- 변수에 할당된 값들을 객체로 만들게 되면 따로 key, value를 지정하지 않아도 프로퍼티가 생성된다.

let one = "곽튜브";
let two = "빠니보틀";
let travle = { one, two };

console.log(travle); // { one: '곽튜브', two: '빠니보틀' }

 

프로퍼티에 순번 매기기

let obj = {};

obj[name + "-" + i++] = i;
obj[name + "-" + i++] = i;
obj[name + "-" + i++] = i;

console.log(obj); // { 'new-0': 1, 'new-1': 2, 'new-2': 3 }

--------------------

let obj = {};

for (let i = 0; i < 3; i++) {
  obj[name + "-" + i] = i;
}

console.log(obj); // { 'new-0': 0, 'new-1': 1, 'new-2': 2 }

- 문자열과 더해서 객체를 동적으로 생성할 수 있다.

- 함수를 활용해도 된다.