18. 객체

자바스크립트에는 8가지 자료형이 존재한다.
그 중에서 7가지는 원시형이다.
나머지 1가지는 참조형이라고 하는데 그 타입이 바로 객체(Object)다.

객체는 원시형과 달리 다양한 여러개의 데이터를 담을수 있다.
키(key)와 값(value)로 구분하여 저장할 수 있으며, 이렇게 쌍으로 이루어진 데이터의 집합을 객체라고 한다.

객체는 자바스크리트 모든곳에 존재하고 자바스크립트의 모든것이 객체로 이루어져있다라는 말도 있다.
즉, 우리는 자바스크립트를 사용하기 위해서 객체를 잘 이해하고있어야한다.

객체는 중괄호{}를 이용하여 생성할 수 있으며, key와 value로 구성된다. key에는 문자타입, value에는 모든 자료형이 가능하다.

객체내에서 데이터들은 특별한 순서가 존재하지 않는다. 그래서 해당 값을 찾아내기위해 key를 이용한다.

// 객체 변수 생성
let obj1 = {}; 

// 객체 리터널과 프로퍼티 초기화
let obj2 = {
  name: 'quakka',
  age: 29
};  

:을 기준으로하여 왼쪽이 key, 오른쪽이 value이다.
obj2의 프로퍼티는 2개가 존재하는 것이고,
"name"이라는 key와 "quakka"라는 String타입의 밸류
"age"라는 key와 29라는 Number타입의 밸류

key는 무조건 문자형이 와야하기 때문에 ""로 안감싸주어도 문자형으로 인식된다.

CRUD

객체에서의 추가, 읽기, 수정, 삭제를 알아보자.

let user = {
  name: 'quakka'
}

• 추가

// 해당 객체에 점표기법 또는 대괄호 표기법으로 
// 추가하려는 키를 적고, 대입연산자를 통하여 값을 할당하면 된다.
user.age = 29;  // 점 표기법
user['age'] = 29;   // 대괄호 표기법

• 읽기

// 해당 객체의 키를 접근하면 해당하는 값이 리턴된다.
user.name;
user['name'];

• 수정

// 추가와 똑같이 해당하는 객체의 키에 접근하여 새로운 값을 할당하면 된다.
// 객체의 키에 값을 할당할때 해당 키가 객체에 존재한다면 수정이 되고, 존재하지 않는다면 추가가 되는 원리이다.
user.name = 'jiun';
user['name'] = 'jiun';

• 삭제

// 삭제는 delete라는 키워드를 사용하여 해당 객체의 키를 적어주면 된다.
delete user.name;
delete user['name'];

객체는 참조형

객체는 참조형의 데이터다.

let a = 10;
let b = a;

a = 20;

console.log(a, b);  //20, 10

위와 같이 원시타입의 데이터는 값을 담은 변수를 다른 변수에 할당할 때
그 변수가 담기는것이 아닌 값의 복사가 일어난다.
위의 코드에서 a를 b에 담아줌으로써 서로 연결이 된것같지만,
a의 10이라는 값이 b에 복사가 되는것이므로 둘은 서로 영향을 받지 않는다.

let user = {
  name: 'quakka'
}

let copyUser = user;

user.name = 'psy';

console.log(user.name);  // 'psy'
console.log(copyUser.name); // 'psy'

하지만 객체를 다른 변수에 할당할 경우 서로의 값이 연결이 된다.
그 이유는 객체는 주소값을 가지고있기 때문이다.

원시타입은 값 자체를 변수가 가지고 있다라고 한다면(물론 원시타입도 참조타입도 우선은 주소값을 가지고 있는것이 맞지만)
객체는 그와 다르게 데이터가 여러개가 담여야 함으로 메모리 다른곳에 여러 데이터를 담을 공간을 만든다음 그 공간의 주소값을 변수에 저장한다.

즉 이러한 주소값을 다시 변수에 할당을하는것이라 주소가 복사가 되면 결국 서로 같은 주소를 가지고 있기에 이것은 연결이 된다고 볼 수 있다.

대괄호 표기법

점 표기법은 여러단어를 결합한 키를 읽어올 수 없다.
예를들어서

let user = {
  'first name': 'Jeong',  // 키값에 공백이 들어갈 경우 ' '으로 묶어줘야함
  'last name': 'quakka'
}

라는 객체가 존재할 때 user.first name으로 접근을 할수가 없다.
사이에 공백이 있어 first에서 읽는것을 멈추고 해당 객체에 first라는 키를 찾는다.
이것을 제대로된 키값으로 찾으려면 대괄호 표기법을 사용한다.
user['first name']
이것은 키에 어떤 문자열이 있든 잘 동작하게 된다.
다만, 대괄호 표기법에서 키값이 변수를 사용하는게 아닌 문자열을 직접 작성할 경우는 꼭 따옴표로 묶어줘야한다.

계산된 프로퍼티

객체를 생성할 때 리터럴 안의 프로퍼티의 키가 대괄호로 감싸져있는 경우에 이를 계산된 프로퍼티(computed property)라고 한다.

let name = prompt("이름이 무엇이느냐?");

let user = {
  // 변수 name의 값을 동적으로 받아 온다.
  [name]: true
};

console.log(user.quakka); // user에 "quakka"가 동적으로 할당이 되었다면 true가 나올것이다.

단축 프로퍼티

function makeUser(name, age) {
  return {
    name: name,
    age: age
  };
}

위와 같은 예제가 있다고 보면 키와 값이 같은 이름을 사용하는 것을 볼 수 있다. 이러한 상황에서 좀더 짧게 사용하는 방법이 있는데

function makeUser(name, age) {
  return {
    name, // name: name과 같음
    age  // age: age와 같은
  };
}

이런식으로 사용하는 방법이 있다.
일반 프로퍼티와 단축프로퍼티는 혼합해서 사용가능하다.

in연산자

객체의 해당 값이 존재하는지 알기 위해서는
in연산자를 이용하면 된다.

"key" in object

위와 같이 in을 사용하여 해당 키가 객체에 존재여부를 boolean형태로 반환된다.
꼭 in을 안쓰더라도 해당 키가 존재하지않으면 undefined가 출력되기 때문에 obj[key] !== undefined 라는것을 이용할 수도 있지만 한가지 상황에서 의도치 않은 결과를 만들어 낸다.

let obj = {
  temp: undefined
}
console.log(obj.temp === undefined); /// true

위와 같이 의도적으로 undefined값을 줄 경우에는 해당값이 존재하지만 ... 값의 유무를 undefined로 비교하게 되면 원하는 결과를 얻지 못하게 된다.
그래서 in연산자를 사용하는것이 좋다.

for...in 반복문

앞서 배웠던 for문에는 객체를 위한 형태가 존재한다.
for...in반복문인데, 사용하는 방법이 조금 다르다.

let user = {
  name: 'oh',
  age: 20,
  gender: 'man'
}

for(let key in user) {
  console.log(key);    //  'name', 'age', 'gender'
  console.log(user[key]);  //  'oh', 20, 'man'
}

for..in은 해당 객체의 키값을 순회할 수 있다.
위의 반복문에서 let key에는 user의 키들이 순차적으로 들어온다.