(24) JavaScript - 객체 / 객체 다루기(수정,추가,삭제,in연산자)

객체를 자유자재로 다루기 위해 객체의 프로퍼티를 수정하고, 추가하고, 삭제해보자

객체의 프로퍼티 수정하기

객체를 수정하는 방법은 해당 프로퍼티에 접근해서 새로운 값을 할당해 주면 되는데

마치 변수의 값을 재할당하는 모습과 같다.

    let exp = {
        Name : '섭이',
        Year : 2024,
        areYouLame: true,
        'good Day': null,
        bestFace: {
            title:'차은우는 사람일까 신일까',
        }
    }
    //객체의 프로퍼티 수정하기
    console.log(exp.Name);
    exp.Name = 'SeopE'
    console.log(exp.Name);

▲exp의 Name이라는 프로퍼티에 영어로 'SeopE'라는 값을 할당했다.

실행해보면 문자열 '섭이'에서 'SeopE'로 변경 된 것을 확인 할 수 있다.

 

이런 방식으로 객체에 프로퍼티를 추가할 수있다.

 

객체의 프로퍼티 추가하기

    //객체의 프로퍼티 추가하기
    console.log(exp.ceoName);
    exp.ceoName = '윤형섭'
    console.log(exp.ceoName);

▲ 그런데 이렇게 객체에 존재하지 않는 프로퍼티에 접근하려고 하면 'undefined' 값이 나온다.

존재하지 않는 프로퍼티에 새로운 값을 할당해주면 (exp.ceoName = '윤형섭')

새로운 프로퍼티가 추가되는 것이다.

 

실행해보면 처음에는 undefined가 먼저 출력이 되고 그 다음 '윤형섭'이 출력 된 것을 확인할 수있다.

정말로 객체에 새로운 프로퍼티가 추가 됐을지 궁금하면 콘솔창에 직접 변수 'exp'를 쳐보면 

'ceoName' 프로퍼티가 추가가 된 것을 볼 수있다.

 

 

객체의 프로퍼티 삭제하기

삭제라는 의미의 delete 연산자를 활용하여 프로퍼티를 간단하게 삭제할 수 있다.

    //객체의 프로퍼티 삭제하기
    console.log(exp.areYouLame); //true 출력
    delete exp.areYouLame;      
    console.log(exp.areYouLame); //삭제됨에 따라 undefined

▲ 이렇게 delete라는 키워드 다음에 프로퍼티에 접근하게 되면 해당 프로퍼티는 삭제된다.

처음엔 true 였다가 프로퍼티가 삭제됨에 따라 undefined로 출력 된 것을 확인할 수 있고

직접 콘솔에 변수를 입력해 프로퍼티 'areYouLame'이 없어진 것을 확인 할 수 있다.

앞서 존재하지 않는 프로퍼티 값은 'undefined'라고 했었다.

그래서 프로퍼티 값과 undefined를 불일치 비교해서 객체의 프로퍼티 존재 여부를 확인 할 수 있다.

    console.log(exp.Name !== undefined);

그런데 undefined 외에도 in 연산자를 통해 프로퍼타의 존재 여부를 확인 할 수있다.

 

in 연산자

문법은 '프로퍼티 네임 in 객체' 이며 다음과 같다.

    //in 연산자
    console.log('Name' in exp);

▲ 프로퍼티 네임을 문자열로 작성한 다음 in 키워드를 써주고 확인할 객체를 작성하면 

객체 안에 'Name'을 가진 프로퍼티가 있는지 확인해서 불린 형태로 값을 리턴한다.

실행해보면 !== 와 같이 true가 두 번 출력 되는 것을 확인 할 수있다.

 

그런데 undefind와 비교하면 되는데 굳이 in 연산자를 사용할까?

단순히 짧아서 이해하기 쉽고 프로퍼티를 확인할 때 좀 더 안전하게 하기 위함이다.

   let exp = {
        Name : '섭이',
        Year : 2024,
        areYouLame: true,
        goodDay: undefined, // or null
        bestFace: {
            title:'차은우는 사람일까 신일까',
        }
    }

 

만약에 'gooDay' 프로퍼티에 undefined 값을 할당 했다고 가정해보자.

이렇게 되면 goodDay가 프로퍼티로 존재하고 있지만 undefined와 비교 했을 때는 false로 출력 될 것이다.

    console.log(exp.goodDay !== undefined);
    console.log('goodDay' in exp);

왼쪽이 goodDay 프로퍼티 값이 null 일 때 / 오른쪽이 undefined 일 때

 

이렇게 두 결과가 서로 다른 것을 확인할 수 있다.

사실 저 프로퍼티에 undefined 값을 할당 하는 것이 적절한 것은 아니지만 

실수로 undefined 값을 할당 한다거나, 혹은 다른 함수나 변수에 의해서 

의도치 않게 undefined 값이 할당될 수도 있기 때문에 

조금 더 안전하게 프로퍼티 값을 확인하기 위해서는 'in' 연산자를 사용하는 것이 좋다.

 

또한 in 연산자는 불린값을 리턴하니까 if문에서 조건 부분에 활용하기 용이하다.▼

    if ('Name' in exp) {
        console.log(`Name 값은 ${exp.Name} 입니다.`);
    }else {
        console.log(`Name 프로퍼티는 존재하지 않습니다.`);
    }

 

 

 

이렇게 할당 연산자와 delete 연산자, 그리고 in 연산자를 활용하면 객체를 조금 더 자유롭게 다룰 수 있다.

---

★GitHub 주소 (객체 다루기)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/8-%EA%B0%9D%EC%B2%B4/3.%EA%B0%9D%EC%B2%B4%EB%8B%A4%EB%A3%A8%EA%B8%B0.html

JavaScript_soloPlay/Basic/8-객체/3.객체다루기.html at main · SeopE9611/JavaScript_soloPlay

 

★Notion 주소 (객체 다루기 예제)

https://purrfect-gargoyle-935.notion.site/2-10de9530b3e1807c85cad72de19266e5?pvs=4

객체를 사용하여 문자열 출력 (2) | Notion