객체(Object)

각기 다른 값을 가질 수 있지만, 입력해야하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있습니다.

공통적인 속성을 가지는 경우 객체를 사용합니다. 

 

> 회원 주소록을 만들어 본다고 가정해보면,

한 사람에 대한 여러가지 정보가 들어간다. 예를들어 이름, 이메일, 사는 도시....등

하지만 이러한 사람들의 정보가 여러개라면 객체를 사용하는 것이 좋음.

객체는 주소록에 적합한 자료 구조이다.

 

객체의 선언은 다음과 같다.

// 객체는 키와 값 쌍(key-value pair)으로 이루어져 있습니다.
let user = { // 중괄호(curly bracket)을 이용해서 객체를 만듭니다
	firstName: 'Bryan',// lastName - 키(key)
    lastName: 'Teo', // 'Teo' - 값(value) // 키,값 사이는 콜론(:)으로 구분합니다
    email: 'bryanteo@shutup.com',  // 키-값 쌍(key-value pair)은 쉼표(comma)로 구분해줍니다
    city: 'Japan'
 };

객체의 값을 사용하는 방법은 두 가지가 있다.

1. Dot notation

user.firstName; // 'Bryan'

user.city; // 'Japan'

 

2. Bracket notation

user['firstName']; // 'Bryan'

user['city']; // 'Japan'

 

bracket 안에 따옴표가 있음! 그냥 user[city]라고 브라켓없이 사용하면, 키 값이 아니라 변수!

bracket notation은 key 값이 변수일 때, 즉 key 값이 변하는 동적일 때 쓰고 

dot notation은 간편하지만 한계가 있어서 동적인 부분에는 사용할 수 없음

 

객체의 키에 대한 값은 객체, 배열, Boolean 다 가능.

 

delete 키워드를 쓰면 삭제 가능

delete user.age;

 

in 연산자 사용하여 해당하는 키가 있는지 확인

자바스크립트 객체의 중요한 특징 중 하나는 다른 언어와는 달리, 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고 undefined를 반환한다는 것입니다.

이런 특징을 응용하면 프로퍼티 존재 여부를 쉽게 확인할 수 있습니다.

let user = {};

alert(user.noSuchProperty === undefined); // true는 '프로퍼티가 존재하지 않음'을 의미

이렇게 undefined와 비교하는 것 이외에도 연산자 in을 사용하면 프로퍼티 존재 여부를 확인할 수 있다.

문법은 다음과 같다.

"key" in object

예시:

let user = { name: "John", age: 30 };

alert( "age" in user ); // user.age가 존재하므로 true 출력.
alert( "blabla" in user ); // user.blabla는 존재하지 않기 때문에 false 출력.

in 왼쪽에는 반드시 프로퍼티 이름이 와야합니다. 프로퍼티 이름은 보통 따옴표로 감싼 문자열입니다.

따옴표를 생략하면 변수가 조사 대상이 됩니다.

 

'for...in' 반복문

for..in 반복문을 사용하면 객체의 모든 키를 순회할 수 있습니다. for..in은 앞서 학습했던 for(;;) 반복문과는 완전히 다릅니다.

 

문법:

for (key in object) {
	// 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다.
}

아래 예시를 실행하면 객체 user의 모든 프로퍼티가 출력됩니다.

let user = {
	name: "John",
    age: 30,
    isAdmin: true
};

for (let key in user) {
	// 키
    alert( key ); // name, age, isAdmin
    // 키에 해당하는 값
    alert( user[key] ); // John, 30, true
}

for..in 반복문에서도 for(;;)문처럼 반복 변수(looping variable)를 선언(let key)했다는 점에서 주목해 주시기 바랍니다.

반복 변수명은 자유롭게 정할 수 있습니다. 'for (let prop in obj)' 같이 Key 말고 다른 변수명을 사용해도 괜찮습니다.

 

객체 속성 개수 구하기

객체는 길이를 잴 수 있을까?

객체의 길이는 바로 잴 수 없다. 객체.length를 사용하면 undefined이 출력된다.

하지만,

Object.keys().length를 사용하면 객체의 길이를 잴 수 있다.

keys()안에다가 객체를 넣어주면
Object.keys()를 했을 때 해당 객체의 key값이 배열에 담겨서 리턴된다.

Object.values() 는 객체의 값을 배열에 담겨서 리턴한다.

 

Object.keys(obj).length 

 

여러 객체를 하나로 병합하기

Object.assign(dest, [src1, src2, src3...]) 사용

let user = { name: "John" };

let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

// permissions1과 permissions2의 프로퍼티를 user로 복사합니다.
Object.assign(user, permissions1, permissions2);

// now user = { name: "John", canView: true, canEdit: true }

목표 객체(user)에 동일한 이름을 가진 프로퍼티가 있는 경우엔 기존 값이 덮어씌워 집니다.

let user = { name: "John" };

Object.assign(user, { name: "Pete" });

alert(user.name); // user = { name: "Pete" }

예시를 실행하면 user에 있는 모든 프로퍼티가 빈 배열에 복사되고 변수에 할당됩니다.