logosvg한 입 크기로 잘라먹는 리액트
Search

10. 객체

객체는 숫자형이나 문자형과 같은 원시 자료형과 달리 다양한 값을 담는 자료형입니다. 실무에서 객체는 여러 상황에서 매우 유용하게 활용됩니다

객체 생성과 프로퍼티

자바스크립트에서는 2가지 방법으로 객체를 생성할 수 있는데, 다음과 같이 ‘리터럴’ 또는 ‘생성자’ 문법을 사용합니다.
코드를 불러오는 중 입니다 ...
objA에 빈 중괄호를 할당해 객체를 생성합니다. 빈 중괄호{}를 사용해 객체를 선언하는 방식을 ‘객체 리터럴’이라고 합니다. 문법이 간결해 주로 이 방법으로 객체를 생성합니다.
빈 객체가 아닌 데이터가 있는 객체를 생성하려면, 다음과 같이 key와 value 쌍으로 이루어진 ‘프로퍼티’를 작성하면 됩니다.
코드를 불러오는 중 입니다 ...
key는 name, value는 "이정환"인 프로퍼티입니다.  key는 age, value는 25인 프로퍼티입니다.
프로퍼티는 속성이라는 뜻으로 객체를 설명하는 정보입니다. 객체 person은 사람을 의미하므로 “사람의 속성으로 이름과 나이가 있다”라고 생각하면 쉽습니다. 객체는 프로퍼티를 여러 개 가질 수 있으며, 각각은 콤마로 구분합니다.
프로퍼티의 key는 문자형을 사용하며 중복해 사용할 수 없습니다.
코드를 불러오는 중 입니다 ...
프로퍼티의 value 값은 여러 자료형으로 구현할 수 있지만, 프로퍼티의 key는 반드시 문자형만 사용합니다. 그리고 프로퍼티의 key는 중복해도 오류가 발생하지는 않지만, key가 중복되면 객체에는 마지막에 작성한 프로퍼티만 남습니다.
하나의 key가 하나의 프로퍼티에 해당하기 때문에, 보통 key 이름으로 프로퍼티를 구별합니다. 예를 들어 key가 name인 프로퍼티는 ‘name 프로퍼티’라고 부릅니다. 만일 복수의 단어로 이루어진 key를 사용하려면 반드시 따옴표로 묶어 주어야 합니다.
코드를 불러오는 중 입니다 ...
복수로 이루어진 단어인 "like cat"을 새 프로퍼티의 key로 사용하기 위해 따옴표로 묶어 주었 습니다.
 

객체 프로퍼티 다루기

객체는 key와 value로 이루어진 프로퍼티의 모음입니다. 객체에서 프로퍼티를 찾고, 추가하고, 삭제하는 등의 모든 연산은 key를 이용해 수행합니다.
 

프로퍼티 접근

key를 이용하면 객체의 프로퍼티에 접근할 수 있습니다. 접근 방법에는 2가지가 있습니다. 다음 예제 코드로 살펴보겠습니다.
코드를 불러오는 중 입니다 ...
객체 이름 뒤에 점.을 찍고 프로퍼티의 key를 명시해 해당 프로퍼티의 value에 접근하는 방식 입니다. 점 표기법이라고 합니다.  객체 이름 뒤에서 대괄호[]를 열고, 그 안에 원하는 프로퍼티의 key를 문자열로 명시하여 해당 프로퍼티의 value에 접근하는 방식입니다. 괄호 표기법이라고 합니다.
 

프로퍼티 추가

새로운 프로퍼티를 추가하는 방법 역시 매우 간단합니다. 다음 코드와 같이 점 표기법과 괄호 표기법을 이용해 새로운 프로퍼티를 추가할 수 있습니다.
코드를 불러오는 중 입니다 ...
추가하려는 프로퍼티의 key가 고정적이라면, 과 같이 작성하는 게 훨씬 간단하지만, key가 변수에 저장된 값처럼 유동적이라면 에서 사용한 괄호 표기법을 이용 합니다.
다음은 key와 value가 유동적인 프로퍼티를 괄호 표기법으로 객체에 추가하는 예입니다.
코드를 불러오는 중 입니다 ...
함수 addProperty를 호출하고 인수로 객체 obj와 key, value 값을 각각 전달합니다. 함수처럼 객체도 값입니다. 따라서 함수를 호출할 때 인수로 전달할 수 있습니다.  함수 addProperty는 매개변수에 저장한 객체 obj, key, value를 이용해 괄호 표기법으로 새 프 로퍼티를 추가합니다.
괄호 표기법을 이용하면 좀 더 유연하게 새 프로퍼티를 생성할 수 있습니다.

프로퍼티 수정

다음은 객체의 프로퍼티를 수정하는 간단한 예입니다.
코드를 불러오는 중 입니다 ...
프로퍼티의 value를 수정할 때에도 점 표기법이나 괄호 표기법을 이용하면 됩니다.

프로퍼티 삭제

다음은 프로퍼티를 삭제하는 간단한 예입니다.
코드를 불러오는 중 입니다 ...
프로퍼티를 삭제할 때도 점 표기법이나 괄호 표기법을 이용합니다.

상수 객체의 프로퍼티

앞에서 const로 선언한 상수는 값을 변경할 수 없다고 했습니다. 그렇다면 상수로 선언한 객체도 프로퍼티를 추가하거나 수정하는 등의 내용 조작이 불 가능 할까요? 다음 예를 살펴보겠습니다.
코드를 불러오는 중 입니다 ...
그렇지 않습니다. 객체를 서랍장이라고 한다면 상수로 선언한 객체는 마치 내장형 서랍장에 비유할 수 있습니다. 내장형 서랍장은 위치를 옮기거나 제거하거나 교체할 수 없지만, 서랍장 안의 물건은 얼마든지 자유롭게 넣다 뺐다 할 수 있습니다.
마찬가지로 상수로 만든 객체도 객체 자체를 없애지 않는 한, 프로퍼티를 자유롭게 추가하거나 삭제, 수정할 수 있습니다.

in 연산자

객체에 존재하지 않는 프로퍼티에 접근하면, undefined를 반환합니다.
코드를 불러오는 중 입니다 ...
객체 obj에는 b라는 key를 갖는 프로퍼티가 없습니다. 이렇게 존재하지 않는 프로퍼티에 접근하면 undefined를 반환합니다.
이런 객체의 특징을 이용해 특정 프로퍼티의 존재 여부를 확인할 수 있습니다.
코드를 불러오는 중 입니다 ...
obj.b는 존재하지 않는 프로퍼티에 대한 접근이므로 undefined를 반환합니다. 따라서 undefined가 맞으므로 변수 isPropertyExist의 값은 false가 됩니다.
undefined를 이용해 비교하는 방식도 잘 동작하지만, 프로퍼티의 value에는 undefined를 할당하는 경우도 있으므로 완벽한 방법이라 보기 어렵습니다. 객체에서 해당 프로퍼티의 존재 여부를 확인할 때는 주로 in 연산자를 이용합니다.
코드를 불러오는 중 입니다 ...
in 연산자 왼쪽에 존재 여부를 확인하려는 프로퍼티의 key를 문자열로 명시하고, 오른쪽에 객체 를 명시하면 프로퍼티의 존재를 확인할 수 있습니다.

메서드

객체에서 값(value)이 함수인 프로퍼티를 ‘메서드’라고 합니다.
코드를 불러오는 중 입니다 ...
객체 person의 sayHi 프로퍼티는 value가 곧 함수입니다. 이 프로퍼티를 특별히 ‘메서드’라고 하는데, 메서드는 데이터가 아니라 객체의 동작을 정의합니다.
 
PREV9. 스코프
NEXT11. 배열