본문 바로가기
JS/JS 기초

JS- 객체(Object)

by 쫑뚱이 2022. 8. 25.
728x90
반응형

JS- 객체(Object)


오늘은 JS에서 정말 중요하게 사용되는

객체에 대해 알아보겠습니다.

 

객체란 간단하게 수납공간이라고

생각하시면 될 것 같습니다.

 

이것이 의미하는 바는

우리는 사용될 것 같은

물건을 미리 구매해서

수납공간에 저장해 놓은 다음

 

추후에 필요성에 따라 수납공간에서

꺼내어 사용합니다.

 

객체도 수납공간과 똑같다고 보시면 됩니다.

 

객체는

let 변수이름 = {
    키(key): 값(value);
    ex) name(key): 'james'(value), //콤마(,)가 포인트입니다.
    .
    .
    .
    .
}

이런 식으로 키(key)와 값(value)으로 구성된 프로퍼티를

작성하며 프로퍼티 끝에는 콤마를 넣어주시는 것을

습관적으로 사용하시는 것이 좋습니다.

 

이유는 추후에 프로퍼티의

수정, 삭제, 이동할 경우 발생될 수 있는

오류를 예방하기 위함입니다.

 

객체는 원하는 프로퍼티에

접근, 추가, 삭제, 축약을 할 수 있습니다.

 

(1)

프로퍼티 접근

 

먼저 접근은 점(.)과 대괄호([])를 사용하여 접근할 수 있는데

예를 들어 나를 소개하는 객체가

있을 경우 접근하는 방식을 보여드리면

 

let myName = {
    name: 'james',
    age: 33,
    gender: M,
}

이런 코드가 있을 때

접근할 때는 먼저 변수 이름을 먼저 작성한 후

점(.)이나 대괄호([])를 사용하셔서 원하는 프로퍼티의

키를 기입하시면 됩니다.

 

myName.name, myName ['name']

이런 식으로 작성해서 접근할 수 있습니다.

 

(2)

프로퍼티 추가

 

두 번째는 없는 프로퍼티를 추가할 수 있는

방식입니다.

 

직접 작성하셔도 되지만

빠르게 프로퍼티를 추가해야 하는 경우에

사용할 수 있는 방식입니다.

 

위에 코드 예시를 그대로 사용해서 보여드리면

myName.from='Korea', myName ['from']='Korea'

이런 식으로 새로운 프로퍼티의 키와 값을

입력해 줄 수 있습니다.

 

(3)

프로퍼티 삭제

 

프로퍼티 삭제는 정말 간단합니다.

프로퍼티가 필요 없어진 경우

빠르게 삭제를 해야 하는 경우에 사용할 수 있는

방식입니다.

 

삭제 방식은 해당 프로퍼티 앞에

delete를 써주시면 됩니다.

 

위에 코드 예시를 이어서 설명드리겠습니다.

 

위에서 from프로퍼티를 만들었었는데

해당 프로퍼티를 삭제해보면

delete myName.from 이런 식으로

사용할 수 있습니다.

 

(4)

프로퍼티 축약

 

프로퍼티 축약은 말 그대로 간단하게 작성하는 방식입니다.

프로퍼티에서 만약 키와 값이 동일한 경우

키와 값 중 한 가지만 작성하셔도 됩니다.

 

예시를 보여드리면

let myName = {
    name, //name : name,과 같고
    age, //age : age,와 같습니다
    .
    .
    .
}

이런 식으로 축약할 수 있습니다.

 


 

오늘은 객체에 대해 간단하게 알아보았습니다.

 

객체는 처음 부분에서 설명드렸듯이

수납공간에 필요한 아이템을 저장해놔서

필요할 때 꺼내서 사용할 수 있는 방식입니다.

 

그래서 객체는 처음에 깔끔하게 작성하는 것이 중요합니다.

깔끔하게 작성한다는 것은

한 가지의 객체는

한 가지 동작만을 담당하시는 것이 좋고

 

객체를 만들었던 변수의 이름은

해당 객체가 어떤 내용을 가지고 있는지

알아볼 수 있는 이름을 지정하는 것이 중요합니다.

 

물론 위에 내용이 해당하지 않아도

동작은 할 수 있습니다.

 

하지만

추후에 수정, 이동, 삭제를 할 경우

더욱 빠르게 작업할 수 있도록 도움을 줄 것입니다.

 

객체는 저장된 정보에서

원하는 부분을 비교, 문 등을

사용하여 일치하는지 확인하고

 

원하는 정보와 일치하는 경우

원하는 결과의 값을 출력하는 방식으로

사용할 수 있어서

 

로그인, 회원 정보의 확인과 같은

일에서도 사용될 수 있습니다.

 

감사합니다!!

728x90
반응형

댓글