JS : Object

?·2020년 9월 19일
0

What I've learned

목록 보기
10/21

객체! 객체!!! 객체!!!! 과연 그 객체란 무엇인가?

'객체'라는 단어는 프로그래밍을 배우면서 가장 많이 듣게 되는 단어가 아닌가 싶다. 그만큼 중요하고 잘 알아두어야 하는 부분일 것이다.

객체는

  • 중괄호로 감싸져 있고,
  • 콜론으로 구분 된 이름/ 값의 쌍들이
  • 쉼표로 분리된 목록의 형태이다.

또는 이렇게 말할 수도 있다.

서로 연관된 함수와 변수를 그룹핑하고 이름 붙인 것이라고 말이다.



객체 안에는 들어 있는 이름마다 각자의 값이 할당되어 있으며, ‘이름’key 또는 property name라고 불린다. ‘값’value 또는 property value라고도 말한다.

키는 마치 특정 값을 갖고 있는 변수같은 역할을 하며, 해당 키로 프로퍼티에 어떤 값이 저장 되었는지 알 수 있다.


프로퍼티에 접근

어떠한 객체의 property 값에 접근하고 싶을 때는 아래와 같다.

객체이름.프로퍼티이름
또는, 객체이름[“프로퍼티이름”]

그렇다면 점(dot)으로 접근하는 것과 대괄호로 접근하는 것에는 어떤 차이가 있는 것일까?

점(dot)은 키로 바로 접근할 때 사용한다. 이때는 따옴표 없이 키를 바로 써줘야 한다.
console.log(difficult.color);

반면 대괄호로 접근 할때는 키 이름을 따옴표로 감싸서 작성해줘야 한다.
console.log(difficult[‘color’];

또한 스페이스가 포함된 키는 대괄호로 접근해야 한다.
console.log(difficult[‘my name’];

console.log(difficult.my name); // 오류가 난다.
숫자로 된 키와 변수로 접근할 때도 항상 대괄호로 접근해야 한다.

let name = '키';
console.log(difficult[name]);



프로퍼티 할당

객체에 이미 키가 존재하는데, 다시 한 번 할당하면 값이 교체(수정)된다.
그러나 만약 이전에 없던 키로 접근하면, 새로운 프로퍼티가 추가 된다.
아래는 없었던 키에 값을 바로 입력해서 프로퍼티를 추가하는 방법이다.

console.log(difficult.realNewProperty); // 존재하지 않는 property명으로 접근하면 undefined가 나온다.
difficult.realNewProperty = ‘추가됐다’;

또한 객체는 프로퍼티의 값으로 스트링, 숫자, 함수는 물론 객체도 값으로 가질 수 있다는 점을 알아두자.

그리고 앞서 말 한 것과 같이 객체를 정의한 뒤에 property 값의 수정이 가능하다.

let myObj = {
  property1: "hello",
  property2: [1,2,3,4,5],
  property3: {
    childproperty: "haha"
  }
};

let name = "property1";

myObj[name] = ["hi", "hello"];

console.log(myObj);

위의 코드는 스트링 값을 갖고 있던 property1에 배열을 재할당하여 프로퍼티를 수정한 경우이다.

const로 선언된 객체(변수)의 경우에도 변수에 객체를 다시 할당하면 오류가 생기지만, 그 객체에 프로퍼티를 추가하거나 수정하는 것은 가능하다는 것을 잘 알아두자.

profile
?

0개의 댓글