JavaScript 객체(object)

JavsScript 객체(object)

 : 객체란 이름(key)과 값(value)으로 구성된 프로퍼티(property)의 집합입니다. 프로퍼티=속성이라고도 하며 아래의 예시에서는 총 4개의 속성이 있습니다. 중괄호{}를 사용해서 만듭니다. 키와 값 사이에는 콜론(:)으로 구분합니다. 속성은 쉼표로 구분해 줍니다.

let user = {firstName : 'Steve', lastName : 'Lee', email : 'steve@codetsates.com', city: 'Seoul'};

 

 : 속성별로 한줄씩 줄바꿈하면 가독성이 좋습니다. 객체에서 키는 따옴표로 감싸도 되고 감싸지 않아도 되지만 2번째 속성 last Name은 따옴표로 감싸줬습니다. 이처럼 키 값에 띄워쓰기가 있는 경우는 감싸줍니다. 자바스크립트에서는 전반적으로 camelCase로 작성되므로 실수를 방지하기 위해 띄워쓰기를 쓰지 않는게 현명합니다.

let user = {
  firstName : 'Steve',
  'last Name' : 'Lee',
  email : 'steve@codetsates.com',
  city: 'Seoul'
};

 

 : 객체의 값을 사용하는 방법은 2가지가 있습니다. 첫번째로 Dot notation이 있습니다. 

user.firstName; // 'Steve'
user.city; // 'Seoul'

 

 : 두번째로 Bracket notation이 있습니다. Dot notation과 거의 같으나 대신 대괄호 안의 값이 문자열이라는 특징이 있습니다. 대괄호 안에 변수를 넣어도 됩니다. 키에 공백이 있을 경우 Bracket notation으로 값을 사용할 수 있습니다.

user['firstName']; // 'Steve'
user['city']; // 'Seoul'
user['last Name'] // 'Lee'

 

 : delete 연산자를 이용해 프로퍼티를 삭제할 수 있습니다.

let user = {
  firstName : 'Steve',
  'last Name' : 'Lee',
  email : 'steve@codetsates.com',
  city: 'Seoul'
};

delete user.city // true
delete user['email'] // true
user 
/*
{
  firstName : 'Steve',
  'last Name' : 'Lee',
};
*/

 

 : 아래의 예제를 보면 Bracket notation을 사용했을 경우 dog라는 변수를 찾게 되고 dog 변수에 객체 key인 cat값이 할당되어 있기 때문에 'meow'가 반환됩니다. 반면 Dot notation의 경우 변수를 사용하지 못합니다. 객체 안의 알파벳으로된 식별자만 접근할 수 있기 때문에 dog의 key값인 'woof'가 반환됩니다. 즉, 단순한 일반적인 사용은 Dot notation을. 순환이나 변수접근 등 복잡한 상황은 Bracket notation을 사용합니다. 

let obj = {
	cat: 'meow',
	dog: 'woof',
};

let dog = 'cat';			let dog = 'cat';
let sound = obj[dog];			let sound = obj.dog;

console.log(sound); // meow		console.log(sound); // woof

 

 : 객체는 key를 통해 원하는 값을 바로 조회할 수 있습니다. 배열과는 달리 각 값의 인덱스를 키로 등록해둔다고 생각하면 편리합니다. 배열과 객체는 하나의 변수로 묶여 있는 것은 동일하지만, 배열은 각 index가 어떤 정보를 갖고 있는지 미리 알고 있어야 내용을 조회 할 수 있고, 객체는 key로 값을 찾을 수 있습니다.

let user = {
firstName : 'Steve',
lastName : 'Lee',
email : 'steve@codetsates.com'
city: 'Seoul'
};

user['firstName']; // 'Steve'
user['lastName']; // 'Lee'

 

 : 배열에 객체를 담을 수 있고, 반대로 객체에도 배열을 담을 수 있습니다. 객체 안에 함수를 담을 수도 있습니다. 객체 안의 함수를 쓸 때는 일반적인 함수 사용방법 처럼 객체의 키와 괄호()를 같이 입력해야 합니다. 

let user = {
hobby : ['game', 'golf', 'reding'],
city: 'Seoul',
firstName : 'Steve',
lastName : 'Lee',
fullName : function(){
	return this.firstName + ' ' + this.lastName;
    }
};

let user2 = [
{hobby : ['game', 'golf', 'reding']},
{city: 'Seoul'}
];

user.hobby // ['game', 'golf', 'reding']
user2[0]["hobby"] // ['game', 'golf', 'reding']
user.fullName() // "Steve Lee"

 

 : 배열은 저장된 데이터들이 순서를 가지고 있습니다. 저장된 순서 자체가 중요할 수도 있습니다. 하지만 객 체는 key : value로 이루어져 있고 위치가 어디 있든 key로 값을 불러 올 수 있습니다.

let user = {
hobby : ['game', 'golf', 'reding'],
city: 'Seoul'
};

let user2 = [
{hobby : ['game', 'golf', 'reding']},
{city: 'Seoul'}
];

user.hobby // ['game', 'golf', 'reding']
user2[0]["hobby"] // ['game', 'golf', 'reding']
user2[0].hobby // ['game', 'golf', 'reding']

 

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

let user = {
hobby : ['game', 'golf', 'reding'],
city: 'Seoul'
};

'hobby' in user; // true
'age' in user; // false

 

정리

• {key : value} // property
• Dot notation / Bracket notation
• key in obj // 해당하는 key가 있으면 true 반환

참고

생활코딩 객체

제로초 객체와 배열

TCPSCHOOL.COM String 객체