본문 바로가기
Programming/JavaScript

객체(Object) - [JavaScript 입문 _2]

by Muko 2020. 4. 3.

3. 객체 (Object)

이전 시간에 배웠던 변수는 데이터를 저장할 수 있는 공간이고, 이 데이터는 계속해서 바뀔 수 있는 값이라고 설명했었습니다. 그리고 그 값으로 들어올 수 있는 자료형에 대해서 알아보았습니다. 그런데 말입니다... 만약에 변수에 저장하는 값이 하나가 아니라 복합적으로 여러개를 가지게끔 하고 싶다면 어떻게 해야할까요? 예를들어 이번에 새로나온 갤럭시 z 플립을 데이터로 저장하고 싶다면?

참조 -삼성전자서비스

위의 사진에서와 같이 z플립 하나만 해도 여러가지 정보가 포함되어 있습니다. 이 것을 일일히 변수를 만들어서 값을 대입하는 형식으로 하면, z플립 하나를 호출하기 위해서 찾아야하는 변수가 너무 많겠죠? 이럴 때 유용하게 쓰이는 것이 바로 객체입니다. 객체는 우리가 변수 혹은 상수를 이용해서 하나의 이름에 여러 종류의 값을 하나의 데이터로 넣을 수 있게 해주는 자료형입니다. 코드를 보시면 이해가 되실겁니다.

const galaxyZFlip = { 
  model: 'SM-F700N',
  announced: '2020-02',
  OS: 'Android 10.0(Q)',
  size: '87.4x73.6x15.4~17.3',
  weight: '183 g',
  // ...블라블라
};

galaxyZFlip이라는 상수 공간에 { }로 감싼 데이터으로 초기화했습니다. 이 데이터 타입이 바로 객체입니다. 이제 객체를 하나하나 뜯어보도록 하겠습니다.

 

3-1. 속성(Property)

객체 안을 보면 model, anoounced 등이 왼쪽에 있고, 'SM-F700N', '2020-02' 등이 오른쪽에 있습니다. 콤마로 구분되는 것들을 객체의 속성이라고 부릅니다. galaxyZFlip 객체 안에는model: 'SM-F700N과 announced: '2020-02'... 등의 여러개 속성이 있습니다. 위의 코드에서는 제가 속성을 나열할 때 줄바꿈을 했지만, 이 것은 필수적인 코드 형식은 아닙니다. 반드시 해야하는 것은 속성별로 쉼표로 구분해야한다는 점이고, 줄바꿈은 코드를 읽기 좋으라고 작성한 추가사항 입니다.

 

3-2. 키(key): 값(value)

객체를 선언할 때에는 { } 안에 원하는 속성들을 넣어주면 되는데요, 이 속성들은 반드시 'key: value' 형식으로 넣어야합니다. 위의 예시에서는 model, announced, OS 등이 객체의 , 그 뒤에 붙은 것들이 이라고 보시면 됩니다. 그리고 속성에서 키는 문자열만 가능합니다. 그런데 다른 문자열과 달리 객체에서의 키는 따옴표가 없어도 괜찮습니다. 다만, 따옴표가 없어도 되기 때문에 key에 해당하는 부분은 공백이 들어가서는 안됩니다. 만약 공백을 포함하고 싶다면 이를 따옴표로 감싸서 문자열 형식으로 키를 작성하면 됩니다.

const sample = {
  'this is my key': true
};

 

그러면 galaxyZFlip 객체 안에 model, announced와 같은 속성의 값을 사용하고 싶을 때는 어떻게 코드를 작성해야 할까요? 여기에도 방법은 여러가지가 있습니다.

galaxyZFlip.model; // 'SM-F700N'
galaxyZFlip['announced']; // '2020-02'

let currentKey = 'announced';
galaxyZFlip[currentKey]; // '2020-02'

currentKey = 'model'; 
galaxyZFlip[currentKey]; // 'SM-F700N' 

// 객체 비구조화 할당 
const { model, announced, OS, size, weight } = galaxyZFlip;
model; // 'SM-F700N'
announced; // '2020-02'

첫 번째의 경우에는 객체에 온점(.)을 사용해서 객체안의 속성에 접근한 경우입니다. 가장 쉽게 접근할 수 있는 방법입니다.

두 번째의 경우에는 객체 이름 뒤에 []을 붙이고, 그 안에 속성명에 해당하는 문자열을 넣어서 객체의 속성에 접근한 경우입니다. 이런식으로 객체에 접근하는 방식은 그 뒤에서 이어지는 코드와 같이 사용될 수 있습니다. currentKey라는 변수에 원하는 키 값을 대입합니다. 그 후에 [] 안에 들어갈 문자열을 currentKey 라는 변수로 사용하는 것이죠. 현재 currentKey라는 변수에는 'announced' 문자열이 저장되어 있었으니 galaxyZFlip['announced']; 와 같은 기능을 하는 것이죠. 그리고 그 뒤에 currentKey에 'model'을 넣었습니다. 그리고 다시galaxyZFlip[currentKey]; 코드를 호출하면 이번에는 galaxyZFlip['model']; 이 작동하는 것입니다. 변수를 이용해서 객체의 속성에 접근하고 싶을 때 사용하는 방식입니다.

세 번째의 경우는 객체 비구조화 할당, 혹은 객체 구조 분해라고 합니다. 위의 두 가지 방법은 항상 galaxy.~~을 입력해야 하는데, 이렇게 사용할 경우에는 필요한 속성 값을 변수처럼 편하게 사용할 수 있기에 코드를 더욱 짧고 보기 좋게 작성할 수 있습니다. 이 방법은 나중에 함수에서 유용하게 사용할 수 있는데요, 함수는 내용이 많아서 다른 글에서 다루도록 하겠습니다.

이제, 객체의 속성 값에 접근할 수 있으니 값을 바꿔볼까요?

아래 코드는 제 희망사항입니다.

const giin = { 
  height: 169, 
  weight: 73 
};
console.log(giin); // {height: 169, weight: 73}
giin.weight = 63;
console.log(giin); // {height: 169, weight: 63}

코드를 보시면 객체의 속성에 접근해서 giin.weight = 63이라는 새로운 값을 대입했습니다. 그리고 출력을 해 보면 해당 속성의 값이 바뀐 것을 확인할 수 있죠. 그런데 여기서 드는 의문점.


const는 상수라고 값을 바꿀 수 없다고 하지 않았나요?


맞습니다. const의 값을 절대로 바뀌지 않습니다. 더 자세하게 설명하면, const는 재할당이 되는 것을 막는 것입니다. 그런데 이 전의 포스팅에서 값의 할당에는 문자열, 숫자, 불린 등과 같은 자료형을 사용했는데 객체(Object)는 할당되는 방식이 조금 다릅니다. 자바스크립트에서 객체가 변수에 할당될 때는 그 전의 자료형들 처럼 객체 자체가 할당되는 것이 아니라, 객체의 주소가 할당됩니다. 아래 예시를 한 번 살펴봅시다.

x === y가 false라고??? 왜?

자바스크립트에서 A === B 연산자는 A와 B가 완전히 동일한가에 대한 답을 true, false로 반환합니다. 위의 예시를 보시면 x와 y 모두 동일하게 value: 1이라는 속성을 가진 객체로 초기화를 했고, 출력 결과도 동일합니다. 하지만 동일하지 않다고 결과를 반환하고 있습니다.

전에 변수는 데이터를 저장할 수 있는 공간이라고 말씀드렸는데, 숫자나 문자열과 같은 자료형은 이 공간에 그 값 자체가 저장이 됩니다. 하지만 객체의 경우에는 여러 속성값 뿐만 아니라 기능들도 들어갈 수 있는데요, 그래서 객체의 경우에는 따로 저장공간이 마련이 되고, 이 저장공간의 주소(컴퓨터가 어디있는지 찾아갈 수 있도록 하는 주소)를 변수에 저장하게 됩니다. 따라서 위의 코드에서 x에 저장된 {value: 1}이라는 객체와 y에 저장된 {value: 1}이라는 객체는 x와 y에 대입할 때 새로 생성된 객체이기 때문에, 서로 다른 객체 주소를 가지고 있습니다. 그래서 x와 y에 저장된 주소값이 다르기 때문에 비교결과 같지 않다라는 false를 반환하게 되는 것이죠.

그래서 위에서 giin 이라는 객체가 const로 선언되었지만, 그 값은 객체의 주소일 뿐이므로 객체안의 데이터는 언제든지 바꿀 수 있게 됩니다. 객체 속성 값이 바뀐다고 해서 객체의 주소가 달라지는 것은 아니니까요!

이 부분이 이해가 안된다고 고통받으시는 분들은 그냥 넘어가셔도 무방합니다. 만약 다른 프로그래밍 언어에 대한 지식이 있으신 분들은 어느정도 이해가 가능하시겠지만, 자바스크립트를 첫 언어로 익히시는 분들과 이 메모리 주소값이라는 개념이 생소한 분들은 이해하기 정말 어려운 개념이거든요. 추후에 이 메모리 공간에 대해서 더 자세하고 이해하기 쉽도록 포스팅하겠습니다.

글을 이어나가자면, 이러한 객체의 속성값은 보시다시피 어떤 값이 들어와도 상관이 없습니다. 문자열이어도 되고, 숫자, 객체여도 됩니다. 혹은 아직 배우지는 않았지만 배열이나 함수여도 괜찮습니다. 나중에 함수와 메소드가 혼란스러울 수도 있을텐데요, 미리 말씀드리자면 객체의 속성값이 함수인 경우에 우리는 메소드라고 부릅니다.객체 안의 속성으로 함수가 있으면 메소드, 아니면 함수라고 편하게 생각하셔도 좋습니다.

객체의 속성 값을 바꾸는 것 뿐만 아니라, 속성 값 자체를 삭제하는 방법도 있습니다. 다음과 같이 앞에 delete 키워드를 붙이면 됩니다.

delete giin.weight;
console.log(giin); // { height: 169 }

또한 객체의 속성값을 다음과 같이 추가할 수도 있습니다.

const myObject = {}; // const myObject = new Object() 도 가능
myObject.number = 1; 
myObject.body = {}; 
myObject.body.title = 'sample code'; 
myObject.body.text = 'this is my sample code haha';

다음 포스팅에서는 배열에 대해서 알아보겠습니다 :)

댓글2