기본기부터시작하는 IT생활

객체란?

• 객체란 다양한 데이터를 하나의 변수에 저장할 수 있는 데이터 타입이다. 이는 배열과 비슷한 느낌을 주지만 전혀 다르다. 배열은 책장이라면 객체는 책장에 배열되는 파일이다. 이 말을 이해하기 위해서 먼저 객체의 생김새부터 알아보자. 객체의 선언과 사용방법은 아래와 같다.

데이터타입(let,var,const) 객체이름 = { key: value };

// 아래는 사용 예시이다.

let object1 = {
    name = "홍길동",
    locate="서울시",
    age=22
}

객체의 내부는 키(key) 와 값(value)로 이루어져있다. 이는 사전과 비슷하다고 생각하면 된다. 우리가 사전에 "name" 이라는 영단어를 검색했을때 "이름" 이라는 값을 얻을 수 있듯이, key를 이용하여 value 값에 접근할 수 있다. 다음은 객체안에 있는 데이터에 접근하는 법에대해 알아보자.

닷노테이션

• 닷노테이션은 .(점)을 활용하여 key 값으로 value 값을 가져오는 방식을 말한다. 사용 방법은 아래와 같다.

닷노테이션 코드 양식

객체이름.key

// 아래는 사용 예시이다.

let client = {
    id:"gomboy11",
    pw:"password",
    phone:"010-1234-5678"
}

console.log(client.id);	// gomboy11 출력
console.log(client.pw); // password 출력
console.log(client.phone); // 010-1234-5678 출력

위 코드에선 client 라는 이름의 객체를 생성하고 id,pw,phone 이라는 key(키) 값과 그에 맞게 value 값을 선언했다. 이후 닷노테이션 방식을 통해 console.log 로 client 의 value 값을 출력했다.  객체는 "key: value" 의 형태를 가지고  client 객체는 id:"gomboy11" 가 선언되어있으니 id가 key,  gomboy11이 value 기 때문에 client.id 는 id 의 value 값인 gomboy11이 출력된것이다. 이렇듯 .(점)을 활용하여 key값으로 value 값을 가져오는 방식이 닷노테이션이다.

브라켓노테이션

• 브라켓노테이션은 닷노테이션과 비슷하지만 [](대괄호) 를 사용하여 key값으로 value 값을 가져온다.

브라켓노테이션 코드 양식

객체이름["key"]

// 아래는 사용 예시이다.

let client = {
    id:"gomboy11",
    pw:"password",
    "bank account" : true
}

console.log(client["id"]);	// gomboy11 출력
console.log(client["pw"]);	// password 출력
console.log(client["bank account"]); // true 출력

console.log(client.bank account);   //문법오류
console.log(client."bank account"); //문법오류

브라켓노테이션의 기본적인 개념은 닷노테이션과 흡사하다. 객체 이름과 key 값을 통하여 value 값을 가져온다는 기능은 같지만 그 과정에서 차이가 있다 .브라켓노테이션은 [](대괄호)를 사용한다. 위 예제코드를 보면"gomboy11" 이라는 값을 얻기위해 client 라는 객체의 id 라는 키값을 활용하였다. 코딩을 할때 기본적으로 닷노테이션을 압도적으로 많이 사용된다. 하지만 브라켓노테이션이 사용될때는 위 예제코드의 "bank account" 와 같이 key 값이 복수 단어로 이루어져있을때 이를 닷노테이션으로 접근하고자하면 문법오류가 발생한다. 하지만 브라켓노테이션은 키값의 형식에 제약이 적기 때문에 사용이 가능하다. 이점 유의하자.

객체와 배열의 활용

• 배열과 객체를 동시에 사용하면 데이터를 추적관리하는데 있어 매우 유용하게 사용할 수 있다. 우리가 전포스팅에서 배열에대해 알아봤을때 우리는 그저 책장에 종이 한장한장씩 넣고 있었다면 객체와 배열을 동시에 활용하면 책장안에 파일을 넣고 종이의 내용별로 각기 다른파일에 담아 추적관리 할 수 있다. 예제를 통해 알아보자.

// 객체만을 사용했을 경우
let client1 = {name:"김씨",age:22};
let client2 = {name:"양씨",age:23};
let client3 = {name:"이씨",age:25};
let client4 = {name:"방씨",age:21};


//객체와 배열을 동시에 사용했을경우
let client = [
	{name:"김씨",age:22},
	{name:"양씨",age:23},
	{name:"이씨",age:25},
	{name:"방씨",age:21}
]

------이해를 돕기위한 자료(실제 데이터값(주소값)은 동일하지 않음)--------
client[0] == client1
client[1] == client2
client[2] == client3
client[3] == client4

// 배열을 사용한 만큼 배열의 index에대한 이해가 있어야한다.

배열과 객체를 동시에 사용하는것은 처음엔 이해하기 어려울 수 있다. 하지만 배열은 for문과 밀접한 관계가 있고 반복문을 통해 손쉽게 데이터에 접근할 수 있으니 이는 극복해야할 한가지의 과제라고 생각한다. 위 배열안에 객체가 어떻게 저장되어 있는 이해하기 쉽게 시각적으로 그림을 그려봤다. 

그저 조금이라도 이해하기 편하도록 시각화하여 그린것이다. 위 사진은 예제코드에 사용한 client 배열의 모습이다. 선언된 client 배열이라는 책장에는 0번째칸, 1번째칸, 2번째 칸, 3번째칸이 있다. 그리고 각 칸에 객체라는 파일을 저장했다.  0번째 index의 객체 즉, 0번째칸에 저장된 파일 안에는 name이라는 key 와 age 라는 key가 있고 각각은 "김씨",22 라는 value 값을 가지고 있는 것이다. 각 데이터에 접근하는 방식은 아래와 같다.

let client = [
	{name:"김씨",age:22},
	{name:"양씨",age:23},
	{name:"이씨",age:25},
	{name:"방씨",age:21}
]

console.log(client[0].name); // "김씨" 출력
console.log(client[1].name); // "양씨" 출력
console.log(client[2].name); // "이씨" 출력
console.log(client[3].name); // "방씨" 출력

----반복문을 활용한 예시-----

for(let i = 0; i < client.length; i++){
	console.log(client[i].name);
}  // 출력 값은 8 ~ 11 줄의 코드의 결과값을 합친것이다.

client[0] 은 client 배열의 0번째 index 를 의미한다. client[0]에는 객체가 저장되어 있으므로 닷노테이션 방식을 활용할 수 있다. 위 예제에서는 닷노테이션을 활용하여 name 의 value 값을 출력했다. 이처럼 배열과 객체를 사용할때 배열의 몇번째 index에 어떤 데이터가 있는지 정확히 알고 또 정확히 접근할 수 있어야 개발자가 원하는 방향대로 데이터를 추적관리 할 수 있다. 그리고 위 예제코드에서는 단 4개의 데이터만 다뤘기때문에 그냥 일일히 코딩하는것이 간편해보일지 몰라도 다뤄야하는 데이터가 100개가 넘어가면 100줄의 코드를 입력해야한다. 하지만 반복문을 사용한다면 단 3줄로도 해당 문제를 해결할 수 있다. 이처럼 배열과 반복문은 자주 같이 사용된다. 다음 시간에는 이러한 반복문에대해 자세히 다뤄보도록 하겠다.