[JS] 객체의 기초와 메소드

somin·2021년 6월 28일

JavaScript

목록 보기

7/16

객체 기초

1. 객체

let user = {
  firstName : 'Somin',
  lastName : 'Park',
  city : 'Seoul',
  sayHello(){
    console.log(`Hello, i'm ${this.firstName}`)
  }
}

user.sayHello() //"Hello, i'm Somin"

중괄호를 이용해 객체를 만듦
property : 키와 값의 쌍
키와 값의 쌍은 서로 쉽표로 구분
객체 안엔 함수가 들어갈 수 있음
*user대신 this 사용, 화살표함수에선 this 사용 불가(메소드 호출 방식을 이용할 때에는 화살표 함수 사용 불가)

2. 객체의 값을 사용하는 방법

1) Dot notation

'.'을 사용하여 접근
없는 property에 접근시 undefined

let user = {
  firstName : 'Somin',
  lastName : 'Park',
  city : 'Seoul'
}
  
user.firstName; //'Somin'

2) Bracket notation

'[]'를 사용하여 점금
대괄호 안에 키가 문자열로 들어감
문자열 형식이 아닐 경우 변수로 취급
없는 property에 접근시 undefined

let user = {
  firstName : 'Somin',
  lastName : 'Park',
  city : 'Seoul'
}
  
user['firstName']; //'Somin'
user['email']; //'undefined'

3) Dot notation VS Bracket notation

Dot notation : 정해진 키만 사용 가능(변수 불가능)
Bracket notation : 키가 변수(동적인 값)일 경우에도 사용 가능
*대괄호 안에 '' 사용 X

fuction getProperty(obj, propertyName) {
  return obj.propertyName//propertyName이라는 키가 있을 때만 가능
  return obj[propertyName]//''없이 매개변수를 그대로 담아줌

객체 속성의 추가, 조회, 변경, 삭제

1. 값을 추가하기

Dot notation, Bracket notation을 이용해 추가 가능

let user = {
  firstName : 'Somin',
  lastName : 'Park',
  city : 'Seoul'
}
  
user['isAdult'] = true; 
user.job = 'Student';

console.log(user)
//{
//    firstName : 'Somin',
//    lastName : 'Park',
//    city : 'Seoul',
//    isAdult : true,
//    job : 'Student'
//}

2. 값을 변경하기

Dot notation, Bracket notation을 이용해 변경 가능

let user = {
  firstName : 'Somin',
  lastName : 'Park',
  city : 'Seoul'
}
  
user['city'] = 'Daejeon'; 
user.firstName = 'KKAKKA';

console.log(user)
//{
//  firstName: 'KKAKKA',
//  lastName: 'Park',
//  city: 'Daejeon'
//}

3. delete : 값을 삭제하기

let user = {
  firstName : 'Somin',
  lastName : 'Park',
  city : 'Seoul',
  isAdult : true,
  job : 'Student'
}
  
delete user['isAdult']; 
delete user.job;

console.log(user)
//let user = {
//    firstName : 'Somin',
//    lastName : 'Park',
//    city : 'Seoul',
//}

4. in 연산자 : 키가 있는지 확인하기

let user = {
  firstName : 'Somin',
  lastName : 'Park',
  city : 'Seoul'
}

'city' in user; // true
'email' in user; //false

5. for in 구문

객체의 모든 키에 접근하고 출력할 수 있음
객체를 순회함
*for of : string과 array, 유사배열 등에서 사용(객체에는 사용되지 않음)

let user = {
  firstName : 'Somin',
  lastName : 'Park',
  city : 'Seoul'
}

for (let key in user) {
  console.log(key)
//'firstName'
//'lastName'
//'city'
  console.log(user[key])//키가 동적인 값아가에 Bracket notation
//'Somin'
//'Park'
//'Seoul'
}

6. 빈 객체

let obj = {}

Object.keys(obj).length === 0

객체의 기초 메소드

1. Object.assign()

객체 복제

let user = {
  name : 'Somin',
  age : 26
}

const newUser = Object.assign({}, user);//{} : 초기값
//빈 객체에 user 객체가 병합되어 복제
//newUser의 이름을 바꾸어도 user는 변화 X

const newUser = Object.assign({gender : 'female'}, user);
console.log(newUser)
//{ gender: 'female', name: 'Somin', age: 26 }

const newUser = Object.assign({name : 'KKAKKA'}, user);//name 덮어짐
console.log(newUser)
//{ name: 'Somin', age: 26 }

let user = {
  name : 'Somin'
}
let info1 = {
  age : 26
}
let info2 = {
  gender : 'female'
}

const newUser = Object.assign(user, info1, info2);
console.log(newUser)
//{ name: 'Somin', age: 26, gender: 'female' }

2. Object.keys()

객체의 키를 배열로 반환
object.length는 사용 불가능하기에 Object.keys()를 활용해 유사 배열로 만들어줌
배열에 사용할 경우 index가 배열의 형태로 반환

let user = {
  name : 'Somin',
  age : 26,
  gender: 'female'
}
Object.keys(user)
//[ 'name', 'age', 'gender' ]

console.log(user.length) //undefined
console.log(Object.keys(user).length) //3

3. Object.values()

객체의 값을 배열로 반환
배열에도 사용 가능

let user = {
  name : 'Somin',
  age : 26,
  gender: 'female'
}
Object.values(user)
//[ 'Somin', 26, 'female' ]

4. Object.entries()

키와 값을 모두 배열로 반환
키와 값이 쌍으로 묶여 배열이 됨
배열 안에 배열

let user = {
  name : 'Somin',
  age : 26,
  gender: 'female'
}
Object.entries(user)
// [
//   [ 'name', 'Somin' ],
//   [ 'age', 26 ],
//   [ 'gender', 'female' ]
// ]

5. Object.fromEntries()

키와 값을 배열을 객체로 반환

let user = 
[
    [ 'name', 'Somin' ],
    [ 'age', 26 ],
    [ 'gender', 'female' ]
]
Object.fromEntries(user)
//{ name: 'Somin', age: 26, gender: 'female' }