본문 바로가기

Javascript/Javascript초급

객체의 이해

반응형

자바스크립트는 데이터 저장을 위해 원시자료형과 객체 2가지 종류의 자료형을 사용합니다.

숫자나 문자열 같은 단일한 데이터를 저장하는 원시자료형은 자바스크립트 안에서 사용하는 기본적인 데이터 저장소지만, 우리가 사는 실제 세상의 데이터들은 이런 원시자료형으로는 다 담을 수가 없습니다.

불가능한 것은 아니고 담을 수도 있기는 하겠지만, 수백개의 변수를 선언해야 할 수도 있습니다.

자바스크립트의 주무대인 웹에서 대부분의 데이터는 JSON, XML 로 표현되며, 다양한 타입의 데이터가 한꺼번에 뭉뚱그려져서 넘어옵니다.

이런 데이터를 일일이 구분해 저장한다는 것은 굉장히 비효율적이고, 지연 시간을 발생시킵니다.


객체는 이런 데이터들을 하나의 컨테이너에 담아 저장하고, 데이터에 접근할 수 있는 메서드, 함수, 프로퍼티를 제공합니다.

다양한 포맷의 데이터들을 구분할 필요도 없고, 단지 객체 안의 데이터에 접근하는 방법들만 알면 됩니다.


자바스크립트의 객체는 


"키:밸류" 쌍으로 하나의 데이터를 표협합니다.

일종의 사전식 데이터 표현으로, 다른 개발 언어의 사전(Dictionary), 맵(Map), 셋(Set), 또는 컬렉션(Collection) 과 비슷한 개념입니다.


객체는 이 "키:밸류" (또는 키:값) 쌍을 중괄호( { } ) 로 감싸서 이 데이터 표현이 객체임을 표시합니다.


let friend = {name: '라이언'};


이렇게 선언한 객체는

friend 라는 변수에 오른쪽에서 생성되는 객체의 참조 주소를 저장하고,

참조된 주소 영역에는 실제 객체의 데이터가 저장됩니다.

객체의 데이터는 "이름" 이라는 키로 접근할 수 있는 문자열이 하나 있고, 그 데이터는 "라이언" 이 됩니다.


객체의 데이터는 속성값을 얻는 방식으로 얻게되며 "키"를 속성으로 사용합니다.


let data = 객체.속성이름;


"friend.name" 은 "라이언" 문자열을 반환합니다.


객체에 없는 속성으로 값을 얻으려고 하면 해당 속성이 정의되지 않았기 때문에 undefined 를 반환합니다.


객체의 "키:밸류" 데이터는 여러개를 나열식으로 나열해 다양한 키를 가진 데이터를 표현할 수 있습니다.

객체의 데이터를 나열할 때는 사이에 쉼표를 넣어 데이터를 구분합니다.


let friend = {name: "라이언"age: 5};


마찬가지로 friend.name, friend.age 로 값을 얻을 수 있습니다.



객체에는 원시자료형과 함께 배열을 넣을 수도 있습니다.


let friends = {original: [{name: "라이언" ,age: 5}, {name: "어피치" ,age: 4}]};


friends.original 속성으로 배열 전체를 얻을 수 있습니다.

또는, friends.original[1].age 처럼 배열 인덱스와 속성으로 원하는 값을 직접 얻을 수도 있습니다.


자바스크립트의 객체는 상당히 직관적이며, 원하는 데이터에 빠르게 접근할 수 있는 방법을 제공합니다.


객체는 다양한 형태의 데이터를 저장하는 것 말고도, 함수 자체를 객체에 저장할 수도 있습니다.

객체 안에 저장한 함수는 객체 안의 데이터를 자유롭게 접근할 수 있으며, 객체 안에 데이터를 추가, 변경, 삭제, 재가공하는 다양한 기능을 구현할 수 있습니다.


이렇게 데이터와 함께 객체를 처리하는 메서드를 구현해서 사용하는 방식을 객체리터럴이라고 합니다.

마치 클래스의 멤버 변수와 멤버 메서드를 구현해서 사용하는 것과 유사한 방식입니다.

자바스크립트도 ES6에서 클래스가 도입되면서 클래스를 사용해도 되지만, 상속이나 모듈화 같은 클래스의 고유 특성이 필요 없는 경우, 객체 리터럴은 보다 간결하고 쉬운 데이터 처리 접근 방법을 제공합니다.



!주의할 점


객체를 코드안에 표시할 때는 가독성을 위해, 또 협업시 개발자들 사이에 코드 공유를 위해 사용하는 공통 규칙이 있습니다.

{name: "라이언", age: 5};

1. 키와 밸류사이에는 공백을 하나 둔다.

2. 객체 요소 쉼표 뒤에는 공백을 하나 둔다.

3. 문자열 값의 표현은 쌍따옴표를 사용한다. 이것은 JSON(JavaScript Object Notation) 규칙이며, 필수 사항은 아니지만 쌍따옴표 사용을 권장합니다.



하나의 객체 안에는 하나의 키만 존재합니다. "키:밸류" 쌍으로 데이터를 표현하는 모든 방식 공통입니다.

하나의 객체는 중괄호로 감싼 객체 1개를 말하며, 자바스크립트 객체는 중첩이 되기 때문에 키의 고유함은 같은 레벨의 객체에만 영향을 미칩니다.

즉, 포함된 하위 객체의 키에는 영향을 미치지 않습니다.


{name:"라이언", name: "어피치"}


이런 객체 표혀은 사용할 수 없습니다. 생성 단계에서 오류가 발생합니다.

반면, 하위 객체에 같은 키가 있는 것은 허용됩니다.


{name:"라이언", friend: {name: "어피치"}}



반응형

닫기