객체

김하은·2023년 4월 30일
0

자바스크립트의 자료형중에 객체형을 다뤄본다.
자료형에는 8가지가 있는데 이중 7개는 오직 하나의 데이터(문자열이면 문자열, 숫자면 숫자 등)만 담을 수 있어 원시형 이라고 부른다.
(배열은 객체의 한 종류이지 자료형은 아님..)

객체형은 원시형과는 달리 다양한 데이터를 담는것이 가능하다.

키로 구분된 데이터 집함, 복잡한 개체 등을 저장할 수 있다.

객체 만들기

객체는 중괄호를 사용해 만든다.
중괄호 안에는 키: 값 쌍으로 구성된 프로퍼티를 여러개 넣을 수 있는데 키(key) 에는 문자형이 값(value)에는 모든 자료형이 들어 갈 수 있다.

폴더 하나가 객체라면 폴더 안의 파일은 프로퍼티라고 할 수 있으며, 파일에 각각 붙어있는 이름이 키라고 할 수 있다.

폴더에서 이름을 보고 원하는 파일을 찾을 수 있는 것처럼 객체에서는 키를 이용해 프로퍼티를 쉽게 찾을 수 있다.(추가, 삭제도 가능)

빈객체를 만드는 방법은 두가지가 있다.

let user = new Object();

이렇게 작성하는 객체 생성자 문법과,

let user = {};

이렇게 작성하는 객체 리터럴 문법이 있다.
보통은 리터럴 문법을 많이 사용한다.

중괄호 안에는 키: 값 이렇게 쌍으로 구성된 프로퍼티가 들어간다.

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

콜론(":")을 기준으로 왼쪽에 키가 오른쪽에는 값이 위치한다.
프로퍼티키는 프로퍼티 '이름' 또는 '식별자' 라고 부른다.
지금 선언한 객체 user에는 name이라는 프로퍼티와 age라는 프로퍼티가 있다.
dot notation이라는 점표기법이나 bra-ket notation 이라는 대괄호 표기법을 사용하면 프로퍼티의 값을 읽을 수도 있다.

user.name이나 user["name"]이라고 하면 name이라는 프로퍼티의 값 "John"을 얻을 수 있다.

이때 주의해야할 것은 대괄호 표기법을 사용시 해당 키는 문자열로 넣어주어야 한다는 것이다.

반대로 없는 값을 넣어줄 수도 있다.

user.school = "다람쥐초등학교";
선언된 객체 user에는 school이 없지만 없는 것에 값을 같이 넣어주면 객체에 추가가 된다.

delete연산자를 이용하면 해당 프로퍼티를 삭제할 수도 있다.

delete user.name; => 이렇게되면 user의 name프로퍼티는 삭제된다.

여러단어를 묶어서 프로퍼티의 이름을 만든경우 => like bird 같은.. 이렇게 스페이스가 들어간 경우는 하나로 묶어줄 필요가 있어 따옴표를 사용해 묶어준다.

마지막 프로퍼티는 쉽표로 끝날 수 있다.

상수 const로 선언된 객체는 수정이 가능하다.
const user = {...} 하더라도 user의 값을 고정하지 내용을 고정하는 것이 아니기때문이다.

대괄호 표기법은 여러단어로 이루어져 공백이 있는 프로퍼티 키의 경우, 문자가 아닌 특수문자가 포함된 프로퍼티 키일경우 등 유효한 변수 식별자가 아닐경우 사용한다.

대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 작동한다.

계산된 프로퍼티

객체를 만들때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있다면 이것을 계산된 프로퍼티라고 한다.

let fruit = prompt("어떤 과일을 주문 할래요?","apple");

let bag = {
	[fruit]: 5,
 };
 
 alert(bag.apple); // fruite 자리에 apple이 할당되어 5 가 출력됨

대괄호 표기법은 프로퍼티 이름과 값의 제약을 없애준다. 다만 작성하기 번거로운 단점이 있다.
이러한 이유로 프로퍼티 이름이 확정되어 있고, 단순하다면 점 표기법을 사용하다가, 복잡해지면 대괄호 표기법으로 바꾸어 사용한다.

변수를 사용해 프로퍼티를 만드는 경우도 있다.
이때 키와 값이 같다면 키만 사용해 적어주는 데 이것을 프로퍼티 값 단축 구문 이라고 한다.

변수에는 예약어를 사용하면 안된다.
객체 프로퍼티 이름(키)에는 이 제약이 없다.
키는 어떠한 형식이든 문자열로 자동 변환된다.

in 연산자를 사용해 프로퍼티 존재여부 확인하기

"key" in object
in 연산자를 사용해 프로퍼티 존재 여부를 확인 가능하다.

in 왼쪽에는 프로퍼티 이름 즉, 키명이 와야한다. 따옴표로 감싼 문자열 형태이다.
따옴표를 생략한다면 엉뚱한 변수가 들어갈 수 있다.

대부분 일치 연산자를 사용해 === undefined로 하여 존재 여부를 알아내는 방법도 잘 작동한다.
그러나 그렇지 않은 경우도 잇따.
이럴때 in을 사용하면 프로퍼티 존재 여부를 제대로 판별할 수 있다.
// 결과는 true 또는 false

for...in 반복문

for...in 반복문을 사용하면 객체의 모든 키를 순회할 수 있다.

for(key in object){
  // 각 프로퍼티 키를 이용해 본문 실행함. 
  //  object에는 객체 이름이 들어가서 해당 객체의 key들을 순회함.
}

key는 반복변수명으로 선언해서 쓸 수도 있음

for(let key in user)

key말고 다른 변수명을 사용해도 무관하다.


추가로 프로퍼티가 나열되는 순서

  • 정수의 경우에는 순서대로 나열됨
  • 정수가 아닌경우 작성된 순서대로 나열됨

0개의 댓글