객체

holang-i·2021년 3월 9일

데이터를 배열과 객체로 다루어 보기

회원가입 시 회원의 정보를 저장할 때 아이디, 이름, 비밀번호, 이메일, 전화번호 등의 정보를 담을 때 각각의 회원별로 변수를 만들어서 값을 저장할 수 있다.

회원 3명의 정보를 저장한다.
let user1Id = 'guest';
let user1Name = 'acorn';
let user1Pwd = '2398fkj32';
let user1Email = 'acorn@gmail.com';
let user1Tel = '010-1234-5678';

let user2Id = 'admin';
let user2Name = 'tiger';
let user2Pwd = 'x0d93klg$';
let user2Email = 'tiger@gmail.com';
let user2Tel = '010-0987-6543';

let user3Id = 'user';
let user3Name = 'chipmunk';
let user3Pwd = 'semwlfd';
let user3Email = 'chipmunk@gmail.com';
let user3Tel = '010-5678-9876';
위에서 회원 3명의 정보를 저장하고 있다.
그런데, 어떤 홈페이지나 데이터를 다루는 곳에서 한 두사람의 데이터만을 다룰까?
아마 수천, 수만, 수백만이 넘는 데이터를 다루게 될 것이다.

그렇다면, 위의 방법처럼 여러 개의 변수를 사용해서 값을 저장하는 방법이 좋을까?

위의 데이터를 봤을 때 각각의 변수는 이름으로 구분할 수 있고, 각각의 변수들에는 관계가 없다. 단순히 정보 하나하나의 값을 담는 역할밖에 하지 못한다.

배열을 이용하여 데이터 저장

그래서 각 값을 하나의 변수로 묶어서 데이터를 관리해 볼 수 있다.

배열을 사용해서 데이터를 하나의 정보로 묶어볼 것이다.
let user1 = ['guest', 'acorn', '2398fkj32', 'acorn@gmail.com', '010-1234-5678'];
let user2 = ['admin', 'tiger', 'x0d93klg$', 'tiger@gmail.com', '010-0987-6543'];
let user3 = ['user' , 'chipmunk', 'semwlfd', 'chipmunk@gmail.com', '010-5678-9876'];
각각의 변수 user1, user2, user3에는 한 사람의 아이디, 이름, 비밀번호, 이메일, 전화번호라는 정보들이 배열에 담겨있다.

각 값들이 하나의 변수에 담겨는 있지만, 각각의 정보에 접근하려면 인덱스가 어떤 정보를 갖고있는 지 아는 상태에서 접근해야 각 요소들이 무슨 값인 지 알 수 있다.
user1[3]; // user1[3] 값이 무엇일까?
user2[2]; // user2[2] 값이 무엇일까?
user3[1]; // user3[1] 값이 무엇일까?
위의 3가지 배열의 각 index를 통해 값을 알아보고 있다.
배열로 데이터를 다룰 경우, 각 인덱스에 어떤 정보가 담겨있는지 알아야 해당 값에 접근할 수 있다.

객체를 이용하여 데이터 저장

그렇다면, 어떤 정보를 내가 원하는 값들을 담고, 조회하고, 수정, 삭제할 수 있는 방법은 없을까?

하나의 큰 틀에 내가 원하는 정보를 담아서, 정보의 이름으로 값을 다룰 수 있는 방법이 있다.

바로 객체를 통해 데이터를 다룰 수 있다.
let user1 = {
  id: 'guest',
  name: 'acorn',
  password: '2398fkj32',
  email: 'acorn@gmail.com',
  tel: '010-1234-5678',
};

let user2 = {
  id: 'admin',
  name: 'tiger',
  password: 'x0d93klg$',
  email: 'tiger@gmail.com',
  tel: '010-0987-6543',
};

let user3 = {
  id: 'user',
  name: 'chipmunk',
  password: 'semwlfd',
  email: 'chipmunk@gmail.com',
  tel: '010-5678-9876',
}

배열과 객체

이전 글에서 배열에 대해서 정리를 해놓았습니다.

배열과 객체의 구조를 이해하고 있어야 객체를 다루기 좋다.

배열과 객체는 대량의 정보를 다루기 위해 사용한다.

배열은 순서를 가지고 있다.

객체는 순서를 가지지 않고, propety 즉, 속성(key: value)으로 구성되어 있다.

객체는 key로 접근할 수 있다.

객체 속성(property)의 조회, 추가, 변경, 삭제를 할 수 있다.

객체

객체는 키와 값(key: value)으로 이루어져 있다.

객체는 중괄호 { } 를 이용해서 객체를 만든다.

각 속성은 쉼표 , 로 구분한다.
let user1 = {
  id: 'qwert',
  name: 'acorn',
  password: '2398fkj32',
  email: 'acorn@gmail.com',
  tel: '010-1234-5678',
};
위의 user1 이라는 객체를 살펴볼 것이다.
각각의 id, name, password, email, tel은 객체의 key를 뜻한다.
그리고 : 뒤에 오는 값들은 value가 된다.

객체는 key: value의 형태로 값을 저장한다.

객체 속성(property)의 조회

객체 속성을 조회할 때 아래의 2가지의 방법을 사용할 수 있다.

. : 점 표기법(dot notation)
[ ] : 대괄호 표기법(bracket notation)

아래에 인셉션이라는 영화의 정보를 담은 객체가 있다.
let movie = {
  name: 'Inception',
  summary: ['action', '147minute'],
  premiere: '2010.07.21',
  rating: '9.60',
  audience: '6 million',
};
점 표기법으로 접근

점 표기법을 이용해서 movie객체의 summary, rating 조회하기
movie.summary; // ["action", "147minute"]
movie.rating; // "9.60"
대괄호 표기법으로 접근

대괄호 표기법을 이용해서 movie 객체의 premiere, audience 조회하기
movie['premiere']; // '2010.07.21'
movie['audience']; // '6 million' 
위의 객체에 점 표기법과, 대괄호 표기법을 통해 객체의 값에 접근한 결과

대괄호 표기법으로 접근 시 주의해야할 점

대괄호 표기법으로 접근할 때 조심해야 할 점이 있다.
let movie = {
  name: 'Inception',
  summary: ['action', '147minute'],
  premiere: '2010.07.21',
  rating: '9.60',
  audience: '6 million',
};
위의 객체에서 . 을 이용해서 접근할 때는 객체명.키로 접근하면 된다.

그런데 [ ] 를 사용해서 접근할 때는 [ ] 안에 넣어주는 키에 ' '나 " "로 묶어서 값을 넣어줘야 된다.

만약 그냥 값을 넣어줄 때 [ ] 안에 그냥 변수로 값을 넣어줄 경우 변수로 넣어주는 것이기 때문에
movie[summary];
movie[rating]; 
위와같은 에러가 발생한다.

에러의 내용을 살펴보면, ReferenceError: ~~~ is not defined
라고 에러문구가 나와있는 것을 확인할 수 있다.

이 에러메시지가 뜻하는 것은 정의되지 않은 값을 참조할 수 없다는 문구이다.
console.log(name);
console.log(age);
위의 값도 정의하지 않은 age에 접근하려고 했기 때문에 에러가 발생했다.
movie.name;
movie['summary'];
movie.premiere;
movie['rating'];
movie['audience'];
위와 같이 문자열로 잘 감싸서 대괄호 안에 넣어 접근하거나
만약, 변수로 값을 접근하고 싶다면 변수에 값을 담아서 접근할 수는 있다.
let movieName = 'name';
movie[movieName];

// 위의 코드와 아래의 코드는 동일하다.
movie[movieName] === movie['name']; // true
대괄호 표기법을 사용하는 경우

키 값이 동적으로 변할 때, 예를 들어서 함수를 통해 값이 들어올 때
대괄호 표기법을 사용해서 값에 접근한다.
let user1 = {
  name: '다람쥐',
  age: 2,
  height: '20cm',
  favorite: '도토리',
};

let getProperty = function(obj, key) {
  return obj[key];
}

let result1 = getProperty(user1, 'name');
let result2 = getProperty(user1, 'favorite');

객체 속성(property)의 추가

객체의 속성을 추가할 때는 객체.키 또는 객체['key']로 값을 넣어줄 수 있다.

아래에 코스에 대한 정보가 담긴 객체가 있다.
이 객체에 값을 추가 할 수 있다.
let course = {
  name: 'JavaScript',
  level: 'hard',
  popularity: 'high',
};
객체에 값을 추가할 때

.을 이용해서 추가하는 방법
course.differentLanguage = ['HTML', 'React', 'NodeJS', 'Java', 'C', 'C++', 'C#'];
[ ] 를 이용해서 추가하는 방법
course['programming language'] = 'JavaScript';
키의 값을 넣을 때 값에 띄어쓰기가 있는 경우, 그때도 대괄호로 묶어서 넣어주면 해당 값이 잘 들어가게 된다.

객체 속성(property)의 변경

객체의 값을 변경하는 방법은 객체의 키로 접근해서 새로운 값을 할당해주면 된다.

course = {
  name: "JavaScript", 
  level: "hard", 
  popularity: "high", 
  programming language: "JavaScript",
};

// 값 변경
// . 으로 값 변경
course.name = 'Hello JavaScript!';

// [ ] 로 값 변경
course['popularity'] = '꼭 배워야 할 언어!!!';

객체 속성(property)의 삭제: delete

객체의 속성을 삭제할 때는 delete 키워드를 통해 삭제가 가능하다.

course = {
  name: "Hello JavaScript!", 
  level: "hard", 
  popularity: "꼭 배워야 할 언어!!!", 
  programming language: "JavaScript",
};

// delete 객체.키
delete course.name;  
// delete 객체['키']
delete course['programming language'];

in 연산자

in 연산자를 이용해서 해당하는 키가 있는지 확인할 수 있다.

let comment = {
  content1: '자바스크립트 너무너무 재밌어요!!!!',
  content2: '어렵지만 너무 재밌어요!',
  content3: '자바스크립트 완전 정복 할 거에요!',
  content4: '좋은 코드를 작성하고 싶어요!!!!!',
};