자바스크립트 기초 ep.8 - 자료구조 관점에서의 객체(object)

프로그래밍 언어에서 객체는 객체 지향 프로그래밍에서 데이터와 함수를 한 덩어리로 다루는 개념으로 배우지만, 여기에서는 자료구조 관점으로서의 객체를 이해하도록 하겠습니다.

 

 

자바스크립트 자료구조 관점에서의 객체(object)

자바스크립트에서 배열의 경우 인덱스를 기반으로 값을 저장 및 처리하는 개념이라면, 객체는 키를 기반으로 값을 저장하는 개념입니다. 파이썬에서의 딕셔너리와 유사하나, 자바스크립트는 함수를 값으로 가질 수 있습니다. 

 

• 객체 선언(객체 리터럴)
• 객체에 새 속성 추가하는 방법
• 객체 원소 접근
• 객체 원소 수정 및 삭제
• 객체 순회 (반복문으로 원소 접근, for ~ in)
• 객체는 모든 타입의 값을 저장할 수 있음

 

객체 선언 (객체 리터럴)

빈 객체는 두가지 방법으로 생성할 수 있습니다.

 

// 빈 객체 생성
const obj = new Object();
// 객체 리터럴(object literal)로 빈객체 생성
const obj = {};

 

new 키워드로 Object를 선언할 수도 있지만 일반적으로 중괄호를 이용한 객체 리터럴(object literal) 형식으로 객체를 생성합니다. 

 

객체는 초기값을 사용하여 생성할 수 있습니다.

 

// 초기값 설정
const obj = { name: "obama", age: 50 };

 

객체의 키는 변수 작명규칙과 마찬가지로 숫자로 시작할 수 없으며, $ 와 _ 만 사용할 수 있습니다.

 

 

객체에 새 속성 추가하는 방법

빈 객체 혹은 이미 속성이 존재하는 객체에 새 속성을 추가하는 방법은 다음과 같습니다.

 

// 빈객체 생성
const obj = {};

// 점 표기법(dot notation)으로 새 속성 추가
obj.name = "obama";
obj.age = 50;

console.log(obj);

 

생성된 객체에 점 표기법(dot notation)을 사용하여 새로운 속성을 추가하였습니다. 

 

새로운 속성 추가

 

점 표기법 말고도 대괄호 표기법(bracket notation)을 사용하여 새 속성을 추가할 수 있습니다.

 

// 빈객체 생성
const obj = {};

// 대괄호 표기법(bracket notation)으로 새 속성 추가
obj["name"] = "obama";
obj["age"] = 50;

console.log(obj);

 

점 표기법과 동일한 결과를 나타냅니다.

 

대괄호 표기법 결과

 

 

객체 원소 접근

객체의 원소에 접근하기 위해서는 위의 새 속성 추가 방법 처럼 점 표기법과 대괄호 표기법을 사용하면 됩니다.

 

// 초기값을 이용한 객체 생성
const obj = {
    name: "obama",
    age: 50
}

// 점 표기법
console.log(obj.name);
// 대괄호 표기법
console.log(obj["age"]);

 

각 원소에 접근한 결과는 다음과 같습니다.

 

결과

 

만약에 키를 문자열로 선언하여 띄어쓰기를 포함할 경우, 점 표기법으로 접근할 수 없습니다. 이때 대괄호 표기법으로 사용하면 됩니다.

 

// 초기값을 이용한 객체 생성
const obj = {
    name: "obama",
    age: 50,
    "home address" : "earth"
}

// 대괄호 표기법
console.log(obj["home address"]);

 

결과는 아래와 같습니다.

 

결과

 

 

객체 원소 수정 및 삭제

객체의 원소를 수정할 때는 점 표기법 혹은 대괄호 표기법으로 원소를 접근 한 후 데이터를 대입하면 됩니다.

 

// 초기값을 이용한 객체 생성
const obj = {
    name: "obama",
    age: 50
}

// 원소에 접근 후 새로운 값 대입
obj.age = 60;
console.log(obj);

 

age를 50에서 60으로 수정하였습니다.

 

수정 결과

 

객체의 원소 키와 값을 모두 삭제하고 싶을 때는 delete 키워드를 사용하면 됩니다.

 

// 초기값을 이용한 객체 생성
const obj = {
    name: "obama",
    age: 50
}

// delete 키워드를 사용한 원소 제거
delete obj.age;
console.log(obj);

 

결과는 아래와 같습니다.

 

삭제한 결과

 

 

객체 순회 (반복문으로 원소 접근, for ~ in )

객체에 원소가 많을 경우 이를 반복문으로 각각의 키에 접근할 수 있습니다. 

 

// 객체의 순회
var daniel = {
    name: "daniel",
    age: 20,
    email: "daniel@xyz.com"
};

// for ... in (ES6)
for (var key in daniel) {
    console.log(`${key}, ${daniel[key]}`);
}

 

daniel 객체의 키 개수만큼 반복문으로 돌며, 반복될 때마다 키를 리턴해줍니다.

 

결과

 

 

객체는 모든 타입의 값을 저장할 수 있음

객체는 모든 타입의 값을 저장할 수 있습니다. 이는 함수도 포함됩니다.

 

// 객체에는 자바스크립트가 제공하는 모든 타입의 값을 저장할 수 있음
const person = { name: "daniel", age: 15, isAdult: false, friends: ["susan", "monica"]};
console.log(person);

// 함수도 가능
const cal = {
    sum : (a,b) => { return a+b; }
}
console.log(cal.sum(2,3));

 

결과는 아래와 같습니다.

 

결과

 

 

마무리

자바스크립트는 대부분 데이터를 객체로 관리합니다. 꼭 익혀두시길 바랍니다.

 

오늘도 행복한 코딩생활 되시기 바라겠습니다. 감사합니다.