Javascript / 기초 / 객체(Object)

 

객체(Object)

 

1. 객체가 필요한 이유

객체는 같은 카테고리의 정보를 여러 개 만들어 줘야할 때, 간결하고 명확하게 표현하기 위해 만든다.

User에 대한 'name, email, address' 가 있고,

User2에 대한 'name, email, address'가 있을 때, 각 값들을 지정하기 위해서는

변수를 총 6개 만들어 주거나, 배열을 2개 만들어서 각 요소들을 index화 해야하는 불편함이 있다.

그래서 객체를 생성해준다.

 

ex)

변수 6개 : user1_name, user1_email, user1_address, user2_name, user2_email, user2_address

객체 2개: user1 = {name : 'steve', email: '...', address: '...'}, user2 = {name : 'mike', email: '...', address: '...'}

 

객체는 배열과는 다르게 index가 없어서, 순서가 없는 데이터이다. Key : Value 형태로 되어있다.

 

---

2. 객체의 생성

객체이름 = {Key1: 'Value1', Key2: 'Value2', ...}

객체는 키와 값의 쌍으로 이루어진다. ':'으로 Key와 Value를 구분한다.

'{}' 중괄호(Curly Bracket)를 이용하여 객체를 생성한다.

Key-Value Pair는 ','로 구분한다.

 

ex) let user = {

     name: 'Charlie',

     email: 'qwe123@gmail.com',

     address: 'Seoul, Korea'

};

 

 

>> 객체값 추가

생성된 객체에 객체값을 추가하기 위해서는 아래와 같이 작성한다.

객체이름.key = 'value'

value값이 변수인 경우, 작은따옴표 ('') 없이 변수명만 작성해주면 된다.

 

 

---

 

3. 객체값 접근

 

3-1. Dot notation

객체 이름.key

user.name;   // 'Charlie'

user.address;   // 'Seoul, Korea'

 

 

 

3-2. Bracket notation

객체 이름['key']

user['name'];   // 'Charlie'

user['address'];  // 'Seoul, Korea'

 

>> dot notation은 key 값이 동적으로 변할 때는 사용할 수 없고, bracket notation은 사용이 가능하다.

그래서, 보통 bracket notation을 이용한다.

ex)

let user = {
  name: 'Charlie',
  email: 'qwe123@gmail.com',
  address: 'Seoul, Korea'
};
 
1.
function findName(obj, key){
  return obj[key]
}
console.log(findName(user,'name'))  // 결과: 'Charlie'
 
2.
function findName(obj, key){
  return obj.key
}
console.log(findName(user,'name'))  // 결과: undefined

>>> 'user'라는 object의 key 값('name', 'email', 'address')이, 'findName' 이라는 함수에서는 'key' 라는 변수값으로 지정되어 표현되므로 동적으로 변하였다.

  >>>> 'findName' 함수를 지정한 2가지 경우에서, bracket notation을 이용한 경우 결과가 잘 출력되었고, dot notation을 이용한 경우 결과  출력이 잘되지 않았다.

 

 

---

 

4. 객체값 검사, 변경 등

 

4-1. 객체값 삭제

delete 객체이름.key

ex) delete user.name;  // user = {email: 'qwe123@gmail.com', address: 'Seoul.Korea'}

 

 

 

4-2. 객체값 포함 여부 검사

'key' in 객체이름

>> Boolean 값이 return 된다.

ex) 'email' in user;   // true;

 

 

 

4-3. 객체 내부의 key값 이용하여 반복하기

for ( let 'key를 가리킬 이름' in '객체이름'){
'key를 가리킬 이름'을 변수로 이용하여 맨 왼쪽 key부터 끝부분 까지 차례대로 실행시킬 내용 작성
}

ex)

let user = {
     name: 'Charlie',
     email: 'qwe123@gmail.com',
     address: 'Seoul, Korea'
};
 
for (let key in user){
  user[key] = "changed";
}
console.log(user)  // 결과: {name: "changed", email: "changed", address: "changed"}

 

4-4. 객체끼리 이어붙이기

객체끼리 이어붙일때는 문자열, 배열과 같이 .concat()을 쓸 수 없다.

Object.assign(객체1, 객체2)
 : 객체1과 객체2를 중복되는 key값이 없도록 이어준다.

중복되는 key 이름이 있다면, 객체 2의 값을 객체 1의 값에 덮어쓴다.

 

let obj1 = {
  name : 'Charlie',
  pw : '1234'
}
let obj2 = {
  name : 'Steve',
  pw2 : '1234'
}
 
Object.assign(obj1, obj2)
// 결과 : {name: "Steve", pw: "1234", pw2: "1234"}