객체

Chunli91·2022년 9월 5일
0

자바스크립트

목록 보기
12/24

여러가지 변수 선언을 하다보면 방대한 자료들에 대해 각 변수를 이름으로만 구분할 수 있을 뿐 서로 관계가 없다

그래서 이 상황에서 배열을 쓰면 각 값이 하나의 변수로 묶이지만 그 또한 인덱스가 각자 어떠한 정보를 가지고 있어야 하는지 미리 알고있어야 한다. 코드를 만든 사람 외에는 무슨 의미인지 이해가 잘 가지 않을 것이다

이러한 경우에 객체가 이용된다. 예시에서 객체는 name이라는 키와 chunli라는 값, 키와 값 쌍 (key-value pair)으로 이루어져있다.

let sinsang {
name: 'chunli',
age : 30,
city: 'hongkong'
};

객체 외부 데이터에 액세스

const whoami = {
name: 'chunli',
age: 30,
country: 'hongkong',
married: false
};

※ whoami.age // 3
불리언이던 불리언처럼 생긴것이건 모든 키는 문자열로 바뀐다

1 -2 객체 사용법은 위 코드를 예시로 들 때

1) Dot notation (점 표기법)

user.city; // 'hongkong'
user.age; // 30;

2) Bracket notation (대괄호 표기법)

user['name']; // 'chunli'
user['age']; // 30

※ 주의: 대문자 안에 따옴표를 빼먹으면 유효하지 않는다.

둘의 차이점은, 변수같은 유동적인 것을 객체에서 키로 쓰고 싶다면 브라켓 로테이션을 사용해야 한다.닷로테이션은 변하지 않을 때 쓴다.

dot/bracket notation을 통해 값을 추가할 수도 있다

또한 delete 키워드를 사용해 삭제도 가능하다

ex) delete user.name;

//
let sinsang {
age : 30,
city: 'hongkong'
};
  1. 객체 수정하기
const wins = {ryu: 5, chunli: 10}
wins.chunli = 8 /// 10을 8로 변경
console.log(wins.chunli) /// 8

※ const의 경우 객체 자체는 그대로 유지되어야 하지만 안쪽의 값은 교체가 가능하다.

3-2) 문자열로 교체 또한 가능하다

const wins = {ryu: 5, chunli: 10}
wins.chunli = '1st'
console.log(wins.chunli) /// 1st

3-3) 값을 추가 / 삭제하는 것도 가능하다.

const wins = {ryu: 5, chunli: 10}
wins.ken = 3
console.log(win) /// {ryu: 5, chunli: 10, ken: 3}

in 연산자를 이용해 해당하는 키가 있는지 확인이 가능하다.

let sinsang {
name: 'chunli',
age : 30,
city: 'hongkong'
};
-------------------------------
'city' in sinsang; // true
'like' in sinsang; // false
  1. 객체 for in 문 (객체의 프로퍼티 키 열거 전용)
    for(const key in 객체){...반복 수행 코드...}
profile
30대에 새로운 도전을 시도하는 사람입니다.

0개의 댓글