[JavaScript] 객체

KIM DA MI·2023년 2월 28일
JavaScript객체
0

JavaScript

목록 보기
6/16
post-thumbnail

학습 목표

  • 배열과 객체의 특징을 구분하고, 배열과 객체의 특징에 따라 웹 애플리케이션 개발 시 어떻게 사용되는지 이해한다.
  • 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.
  • 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
  • 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.

1. 객체 기초

객체는 어떨 때 쓰는 걸까?

  • 회원의 주소록을 만든다고 가정해보자.
    • 주소록에는 이름, 이메일, 사는 지역이 필요하다.
    • 여기에서 다른 사용자를 추가한다면?
      • 매번 여러개의 변수를 추가해줘야 하는 상황이 생길 수 있다. (번거롭다..😥)
      • 또 각 변수는 이름으로 구분만 할 수 있을 뿐, 서로 어떠한 관계도 없다.

  • 그렇다면 이걸 지난 시간에 배운 배열로 표현하면 되지 않을까?
    • 각 값이 하나의 변수로 묶여있긴 하지만,이 경우에는 각 index가 어떤 정보를 가지고 있는지 미리 알아야 한다.
      (ex - 2번째 index에 메일 정보가 있다.)
    • 또 index로 접근할 경우 가독성도 떨어진다는 단점이 있다.
      • 그래서 이럴 때 사용하는 것이 바로 객체(Object)이다.

객체(Object)

  • 이번엔 객체를 사용해보자.
  • 객체는 하나의 변수 안에 여러가지 정보가 담겨 있을 때 적합한 자료구조이다.
  • 객체의 선언은 다음과 같다.
    let user = {
    firstName: 'Dami',
    lastName: 'Kim',
    email: 'oka1313@gmail.com',
    city: 'Seoul',
}
    • 중괄호({} : curly bracket)를 이용해서 객체를 만들고,
      쉼표(, : comma)로 키-값 쌍(key-value pair)을 구분한다.



2. 객체 조회하기

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

방법1. Dot notation

let user = {
    firstName: 'Dami',
    lastName: 'Kim',
    email: 'oka1313@gmail.com',
    city: 'Seoul',
}

console.log(user.firstName); // dami
console.log(user.city); // Seoul
  • . (dot)을 사용하여 객체(object)의 속성(property)에 그 값을 가져옴.

방법2. Bracket notation

let user = {
    firstName: 'Dami',
    lastName: 'Kim',
    email: 'oka1313@gmail.com',
    city: 'Seoul',
}

console.log(user['firstName']);
console.log(user['city']);
  • [] (bracket)를 사용하여 값을 가져옴.

  • [] 안에는 반드시 문자열을 입력해야 한다.

    • 문자열을 입력하지 않으면?
      • 'is not defined' 에러가 발생한다. 해당 에러가 발생하는 이유는 무얼까? 🤷‍♀️
        ➡ 이유는 city를 변수로 보고 있기 때문!
        그러나 city라는 변수가 정의된 적이 없기 때문에 에러가 나온 것!

    • 단, 문자열이 할당된 변수를 입력하는 것은 가능하다.



3. 객체 다루기

속성 추가 (Create)

  • Dot notation(.)을 이용한 방법

    let user = {
    firstName: 'Dami',
    lastName: 'Kim',
    email: 'oka1313@gmail.com',
    city: 'Seoul',
}

user.phone = '010-1234-5678';

console.log(user);

/*
{ firstName: 'Dami',
  lastName: 'Kim',
  email: 'oka1313@gmail.com',
  city: 'Seoul',
  phone: '010-1234-5678' }
*/

  • Bracket notation([])을 이용한 방법

    let user = {
    firstName: 'Dami',
    lastName: 'Kim',
    email: 'oka1313@gmail.com',
    city: 'Seoul',
}

user['phone'] = '010-1234-5678';

console.log(user);

/*
{ firstName: 'Dami',
  lastName: 'Kim',
  email: 'oka1313@gmail.com',
  city: 'Seoul',
  phone: '010-1234-5678' }
*/



속성 제거 (Delete)

  • delete 연산자를 사용하여 객체의 속성을 제거한다.

    delete expression

  • Dot notation(.)을 이용한 방법

    let user = {
    firstName: 'Dami',
    lastName: 'Kim',
    email: 'oka1313@gmail.com',
    city: 'Seoul',
}

delete user.city;

console.log(user)

/*
{ firstName: 'Dami',
lastName: 'Kim',
email: 'oka1313@gmail.com' }
*/

  • Bracket notation([])을 이용한 방법

      let user = {
      firstName: 'Dami',
      lastName: 'Kim',
      email: 'oka1313@gmail.com',
      city: 'Seoul',
  }

  delete user['city'];

  console.log(user)

  /*
  { firstName: 'Dami',
  lastName: 'Kim',
  email: 'oka1313@gmail.com' }
  */



속성 수정 (Update)

  • 기존의 속성 값에 다른 값을 입력하면 기존의 값에서 새로운 값으로 덮어쓰게 된다.

  • Dot notation(.)을 이용한 방법

    let user = {
    firstName: 'Dami',
    lastName: 'Kim',
    email: 'oka1313@gmail.com',
    city: 'Seoul',
}

user.city = 'jeju';

console.log(user);

/*
{ firstName: 'Dami',
  lastName: 'Kim',
  email: 'oka1313@gmail.com',
  city: 'jeju' }
*/

  • Bracket notation([])을 이용한 방법

    let user = {
    firstName: 'Dami',
    lastName: 'Kim',
    email: 'oka1313@gmail.com',
    city: 'Seoul',
}

user['city'] = 'jeju';

console.log(user);

/*
{ firstName: 'Dami',
  lastName: 'Kim',
  email: 'oka1313@gmail.com',
  city: 'jeju' }
*/



속성 유무 확인

  • in 연산자를 사용하여 객체의 유무를 확인한다.
    속성 in 객체명

  • 존재하면 true, 존재하지 않으면 false를 반환한다.

    let user = {
    firstName: 'Dami',
    lastName: 'Kim',
    email: 'oka1313@gmail.com',
    city: 'Seoul',
}

console.log('email' in user); // true
console.log('phone' in user); // false



객체의 반복 (for in문)

  • for in문은 객체에 주로 사용한다.

  • 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복한다.

  • 구문

    for (const variable in object) {
  statement
}
    • variable : 매번 반복마다 다른 속성이름(Value name)이 변수(variable)로 지정된다.
    • object : 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체이다.

  • 예시

    let obj = {
    num: 123,
    str: '문자',
    bool: true,
    arr: [4, 5, 6]
}

// 속성값의 타입이 문자열인 경우 해당 속성을 삭제하는 반복문
for (let property in obj) {
    if (typeof obj[property] === 'str') {
        delete obj['str']
    } 
}

console.log(obj) // { num: 123, str: '문자', bool: true, arr: [ 4, 5, 6 ] }



4. 객체의 메서드

Object.keys(): 속성의 key를 모아서 배열로 반환

  • 구문

    Object.keys(obj)
    • 반환 값 : 전달된 객체의 열거할 수 있는 모든 속성 이름들을 나타내는 문자열 배열

  • 예시

    let obj = {
    num: 123,
    str: '문자',
    bool: true,
    arr: [4, 5, 6]
}

console.log(Object.keys(obj)); // [ 'num', 'str', 'bool', 'arr' ]



Object.values(): 속성의 value를 모아서 배열로 반환

  • 구문

    Object.values(obj)
    • 반환 값 : 전달된 객체의 속성 값들을 포함하는 배열

  • 예시

    let obj = {
    num: 123,
    str: '문자',
    bool: true,
    arr: [4, 5, 6]
}

console.log(Object.values(obj)); // [ 123, '문자', true, [ 4, 5, 6 ] ]



Object.assign(): 객체 합치기, 객체 복사

  • 구문

    Object.assign(target, ...sources)
    • 반환 값 : 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣고, 그 대상 객체를 반환

  • 예시

    let obj1 = {
    num: 123,
    str: '문자',
}

let obj2 = {
    bool: true,
    arr: [4, 5, 6]
}

console.log(Object.assign(obj1, obj2)); // { num: 123, str: '문자', bool: true, arr: [ 4, 5, 6 ] }



Object.is(): 두 객체가 같은지 비교

  • 구문

    Object.is(value1, value2);
    • 반환 값 : 두 인수가 같은 값인지 여부를 나타내는 Boolean.

  • 예시

    Object.is('foo', 'foo');     // true
Object.is(window, window);   // true

Object.is('foo', 'bar');     // false
Object.is([], []);           // false

let test = { a: 1 };
Object.is(test, test);       // true

Object.is(null, null);       // true

// 특별한 경우
Object.is(0, -0);            // false
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true
profile
KIM DA MI
이전 포스트

[JavaScript] 배열

다음 포스트

[JavaScript] 원시 자료형과 참조 자료형

0개의 댓글