javascript basics #1 오브젝트

javascript basics #1 오브젝트

오브젝트 개요

자바스크립트의 데이터 타입을 크게 나누자면 7가지의 primitive 타입(undefined, null, boolean, string, number, bigint, symbol)과 object가 있다.

primitive 타입은 근본적인 데이터 타입으로 더 이상 아랫 단계로 내려갈 수 없는 말하자면 원자 타입이다. java와 비교하자면, java 언어에서는 boolean, byte, short, int, long, float, double, char가 존재하는데, javascript 언어에서는 다양한 표현의 숫자들이 number로 간소화되며, char 대신 string 이 있다.

그리고 자바스크립트에만 존재하는 특수한 타입인 undefined, null, bigint, symbol이 있다.

primitive 타입의 변수는 오직 한 종류의 값만 다룬다.

반면, 오브젝트는 다양하고 복잡한 데이터를 key-value 형태로 보관한다. 자바스크립트에서 오브젝트는 가히 어떠한 것이든 표현 가능한 데이터 타입이다. 자바스크립트를 깊게 이해하기 위해서는 오브젝트에 대한 공부가 필수적이다.

오브젝트 생성법

오브젝트는 {...} 기호를 이용해 생성 가능하다. 정확히는 {Key : Value}의 형태로 만들어주면 된다. 여기서 Key 부분에는 문자열이 와야 하고, Value 부분에는 어떠한 값이 와도 무방하다.

오브젝트에서는 Key를 이용해서 내가 저장해뒀던 값을 빠르게 인출할 수 있다.

let objectExample = {
  "key": "value",
  "number": 1,
  "undefined": undefined
  // whatever in javascript can be inserted as a value.
}

오브젝트 다루기

key-value 추가하기

추가하는 방법은 처음에 오브젝트 생성 시에 추가하는 방법과 생성 이후에 추가하는 방법이 있다.

생성 시에 추가

let objectExample = {
  "key1": "value"
}

생성 이후에 추가

objectExample.key2 = "value";

key-value 삭제하기

delete 키워드를 이용해 삭제 가능하다.

delete objectExample.key2;

테스트 결과

const 오브젝트의 프로퍼티는 수정 가능하다

프로퍼티란 오브젝트의 key 라고 보면 된다.

const 키워드는 어떠한 상수를 선언할 때 사용된다. 그런데, 오브젝트를 const 키워드로 선언하게 되면? 신기하게 수정이 된다.

단, const 키워드로 선언된 오브젝트의 프로퍼티를 수정하는 것이 아니라, 내용 자체를 다른 변수로 지정하는 것은 금지되어 있다.

'[]' 기호를 이용하여 오브젝트 접근하기

띄어쓰기 등 특수 기호가 있는 경우

오브젝트의 key 값으로는 문자열이 들어갈 수 있다. 문자열이 들어갈 수 있다는 것은 띄어쓰기도 가능하다는 뜻이다. 단, 띄어쓰기를 할 때는 위에서 접근했던 방식과 같이 .을 이용한 접근을 할 때는 띄어쓰기나 특수 기호를 이용하는 것이 불가능하다.

이를테면,

objectExample.who i am = "jake"; // ERROR

위와 같은 접근은 에러가 발생한다.

objectExample["who i am"] = "jake"; // SUCCESS

위와 같이 [] 기호를 이용해 접근하면 띄어쓰기나 특수 기호를 이용한 key값 할당도 가능하다.

Computed Properties

Computed Properties란, 변수 값을 이용하여 오브젝트의 key 값을 할당하는 것을 말한다.

이를테면,

let keyName = "language";

let objectExample = {
  [keyName] = "javascript"
}

위와 같이 선언한다면,

let objectExample = {
  "language" = "javascript"
}

위와 같은 효과를 얻게 된다. 이를 응용하면

let keyName = "language";

let objectExample = {
  ["the best " + keyName] = "javascript"
}

위와 같은 것도 가능한데,

let objectExample = {
  "the best language" = "javascript"
}

위와 같은 효과를 갖는다.

프로퍼티 축약 (property value shorthand)

프로퍼티 축약이란 오브젝트의 key값과 동일한 변수명을 갖고 있을 때, 따로 value를 적어주지 않아도 value에 자동으로 동일한 변수명을 삽입해주는 것이다.

이를테면,

let key1 = "Hi";
let objectExample = {
  key1
}

위와 같이 선언하면, objectExample의 key1에 대한 value값이 자동으로 "Hi"라는 문자열이 들어간다.

프로퍼티의 이름으로 올 수 없는 것

__proto__ 라는 이름으로는 올 수 없다. 이 공간은 프로토타입이 사용할 공간으로 예약되어있기 때문이다.

반면, for, let, return과 같이 기존 자바스크립트의 예약어로 key를 설정하는 것은 가능하다.

프로퍼티 확인을 위한 in 연산자

어떤 오브젝트에 해당 프로퍼티가 존재하는지 확인하기 위해서는 in 연산자를 사용하면 된다.

존재하지 않는 프로퍼티를 참조할 때, 자바스크립트는 오직 undefined를 리턴할 뿐 에러메세지를 띄우지 않는다는 것을 알아둬야 한다.

for...in 반복

오브젝트의 모든 키를 순회하기 위해 특이한 방식의 반복문이 있는데 그게 바로 for...in이다.

for(key in object) {
  // 실행할 내용을 입력하면 된다.
}

모든 key와 그 안에 있는 값을 볼 수 있다.

for...in에서 Object Key의 정렬 순서?

정수의 경우에는 오름차순으로 정렬되며, 다른 자료형의 경우에는 프로퍼티가 추가된 순서를 따른다.

숫자로 key를 지정한 경우에는 잘 정렬된다.

알파벳으로 key를 지정한 경우에는 삽입된 순서대로 정렬된다.

섞인 경우에는 숫자만 제대로 정렬된다.