JavaScript 에서의 객체 (Object) 이해

JavaScript에서의 객체에 대해서 알아봅시다.

'객체'란 무엇인가요?

우리가 변수에 데이터를 저장할 때 

변수를 선언하는 방법, 그리고 또 배열을 이용하는 방법이 있습니다.

 

하나씩 변수로 선언하는 경우, 데이터의 종류마다 선언을 해줘야해서 종류가 많다면 어렵습니다.

let userFirstName = 'Steve';
let userLastName = 'Lee';

배열로 만드는 경우,  데이터간의 연관성은 가지지만, 인덱스를 해석하기 어렵습니다.

let user = [
  'Steve',
  'Lee'
]

그래서 객체라는 형태를 이용할 수 있습니다.

let user = {
  firstName : 'Steve',
  lastName : 'Lee'
}

객체는 이렇게 하나의 대상에 다양한 데이터가 저장될 때 적합한 자료 구조입니다.

하나의 객체는 중괄호 안에서 키(key)와 값(value) 쌍으로 이루어져 있습니다.

 

우리는 결국 객체에 값을 불러오는 작업을 해야할 것입니다. 

이 때 키에 해당하는 값을 불러오는 방법은 크게 2가지 입니다.

 

1. 닷 노테이션(Dot Notation : 점표기법)

user.firstName;
// expected 'Steve'
// 객체(.닷)키;

2. 브라켓 노테이션 (Braket Notation : 괄호표기법)

user['lastName'];
// expected "Lee"
// 객체[대괄호 '키']

 

그런데 우리가 객체에서 값을 불러오는 종류가 유동적일 경우가 있습니다.

예를 들어서 user라는 객체에 대해서 어떤 경우는 firstName을 불러오고,

어떤 경우에는 lastName을 불러오는 경우입니다.

이때는 어떻게 해야할까요?

예를 들어보겠습니다.

 

파라미터로 객체와 키를 받는 getProperty 함수가 있습니다.

이 함수는 주어진 객체와 키를 이용해서 속성값을 찾아 리턴합니다.

function(obj, propertyName){
  return //어떻게 값을 불러올까? ;
}

만약 아래와 같은 객체가 주어질 때,

어떤 때에는 'Steve'값을,

어떤 때에는 '16'값을 받아오려면 어떤 노테이션을 이용해야할까요?

if조건문을 이용해서 2가지 상황에 대한 닷노테이션을 사용해야할까요?

let person = {
  name: 'Steve',
  age: 16
};

이 때는 브라켓 노테이션에서 변수를 담는 방법으로 키값을 불러올 수 있습니다.

function getProperty(obj, propertyName) {
  return obj[propertyName];
}

여기 obj[peropertyName]  대괄호 안의 내용은 '변수'입니다.

바로 함수의 인자에서 선언된 변수입니다. 

그렇기 때문에 이름은 무엇으로 짓든 상관없습니다.

그저 '변수'이름 이기 때문입니다.

그 변수 이름을 브라켓노테이션으로 감싸는 것 뿐입니다.

만약에 함수의 인자로

getProperty(person, 'name');

이렇게 주어지면 어떻게될까요?

변수 선언이라는 상황으로 본다면 아래처럼 변수에 'name'이라는 문자열이 대입된 것이고,

let propertyName = 'name';

return 의 내용은 obj['name'] 이 되어 'Steve' 값이 불러와집니다.

getProperty(person, 'age');

매개변수가 이렇게 주어진다면,

return 의 내용은 obj['age']가 되어 16 값이 불러와집니다.

 

 

요약하자면,

객체에서 유동적인 키의 값을 불러올 경우에는,
키를 변수로 선언하고,
그 변수를 브라켓 노테이션에 담으면, 
어떤 매개변수가 오더라도 그에 맞는 키 값을 불러올 수 있습니다.

이것이 가능한 이유는,

브라켓 노테이션에서 대괄호 안에서 ' ' 따옴표에 담긴 키를 활용하는데,

객체의 키는 ' ' 따옴표로 감싼 형태로 표현하기 때문인 것 같습니다.

 

아직은 이렇게 밖에 이해하지 못한 것 같네요.

이렇게라도 외워두고 더욱 깊은 뜻은 따로 깨쳐봐야할 것 같습니다.

 

 

객체에 값을 추가하는 방법

브라켓 노테이션과 닷노테이션을 이용하여,

객체에 키와 값을 추가할 수 있습니다.

user.tags = '#코드스테이츠';
user['카테고리'] = '잡담';

결국 ' = ' 이 할당 연산자가 핵심적인 역할을 합니다.

앞의 닷노테이션이나 브라켓노테이션 값은 없지만, 선언된 것이고

여기에 값을 할당한다는 의미입니다.

 

이것이 직관적으로 이해하기 쉽지 않아서

처음 객체를 사용할 때 헷갈렸던 것 같습니다.

 

할당 연산자로 객체에 키와 값을 추가할 수 있다! 

라고 기억하면 되겠습니다.

 

객체에 값을 삭제하는 방법

delete user.firstName;

이렇게 delete 연산자와 노테이션을 사용하면 됩니다.

당연히 브라켓 노테이션도 됩니다.

 

객체에서 해당하는 키가 있는 지 확인하는 방법

'firstName' in user;
// expected true

in 연산자를 사용하면 Boolean 값으로 확인할 수 있습니다.

객체의 키는 여기서도 ' ' 따옴표로 감싸서 표현합니다.

객체의 키를 표현할때는 ' ' 따옴표를 사용한다는 것. 기억해야겠습니다.

 

---

다양한 자료와 글을 참고하여 배우고 있는 개발 뉴비의 블로그입니다. 
수정 보완할 것이 있다면 부담없이 댓글 남겨주세요 :)

 

JavaScript에서의 객체에 대해서 알아보았습니다.