230207 TIL : JS 객체의 속성에 대하여

개요

최근에 자바스크립트를 다시 천천히 파고 있다.

사실 이제 어느정도 초보 수준의 스크립트는 구사할 수 있는데,

참조형 데이터 타입은 실무에서도 사용하지만 뭔가 정말 기초적인 부분만 사용하고

더 잘 사용할 수 있는거 같은데 사용하지 못하는 느낌?

그래서 조금씩 공부해보고 그때그때 배운 내용을 정리해보도록 하려고 한다 🍈

---

객체의 속성에 대하여 (기본편)

사실 속성 하면 기본적으로 인터넷이나, 서적에서 나오는 문법은 이정도일 것이다.

1. 객체의 값에 접근할 때 : 점 표기법 / 대괄호 표기법

const myCar = {
  make: "Ford",
  model: "Mustang",
  year: 1969,
};

// Dot notation
myCar.make = "Ford";

// Bracket notation
myCar["make"] = "Ford";

- 유효한 자바스크립트 문자열

- 문자열로 변환 가능한 것이면 모두 가능, 빈 문자열도 가능

 

2. 자바스크립트 식별자가 유효하지 않은 경우에는 점 표기법으로는 접근이 불가능하다.

- 문자열에 여백이 있는 경우

- 하이픈

- 숫자로 시작

→ 이때는 대괄호 표기법으로 접근이 가능함. 

 

안타깝게도 나도 딱 요정도 알았던거 같다. 사실 이걸로도 어느정도 객체를 활용에 실무를 할 수 있다.

다만, 내가 느꼈던 점은 이걸로 될까? 싶어서 오늘 MDN과 이곳저곳을 기울며 추가로 안 점에 대해 작성해 보려고 한다.

---

추가로 알게 된 사항 💕

1. 대괄호 표기법은 키를 동적으로 사용할 때 사용하면 좋다.

const myObj = {}
const key = 'age';

myObj[key] = 133;

console.log(myObj)

- 키 변수의 값인 'age'를 객체의 키로 할당하게 된다.

- 이건 알았던 사항인데, 동적으로 사용할 수 있어서 대괄호 표기법을 사용하는지는 첨 알았다.

 

📍 여기서 하나 더 궁금했던 사항 : 왜 대괄호 표기법만 왜 동적으로 사용할 때 사용이 가능할까?

우선 MDN에서 이 둘의 설명에 대해서 천천히 읽어보았다.

 

참고 페이지 이동

- expression = 표현식이다.

- 표현식은 어떤 값으로 이행하는 임의의 유효한 코드 단위다. 그렇기 때문에 어떠한 표현식이 들어가든 대괄호 표기법은 값으로 평가하고 해당 값을 키로 사용할 수 있게 되는 것이다.

- 점 표기법은 바로 속성을 가져오는 형태이기 때문에 표현식을 평가할 수가 없다.

- 키라는 변수가 있음에도 obj.key는 키의 값인 22를 평가하지 않고, 키 자체를 속성으로 인지하여 키로 사용한다.

2. 대괄호 표기법의 속성은 문자열 혹은 심볼이다. 그 외의 다른 자료형은 문자열로 변환된다.

- console에 찍었을 때 아마 가끔 봤을 수도 있는데 바로 [object Object] 이다. 이게 대체 뭘까?? 항상 생각만 하고 넘어갔는데

이번에 공부하면서 알게 되었다.

- 앞서 말했듯이, 문자열 혹은 심볼이 아닌 자료형은 문자열로 변환된다! 즉, 객체도 문자열로 변환된다.

객체를 문자열로 변경하면 저런 값이 도출된다. 그렇기 때문에 사실상 객체를 키로 사용하면 안된다.

그 이유는 어떤 객체든 문자열로 변경하면 [object Object] 이 되기 때문이다.

- 그리고 배열도 마찬가지로 문자열로 변경된다.

 

- 배열을 키로 넣게되면 기괴한 키가 만들어진다. 이것도 문자열로 변환되기 때문이다. 과연 접근은 가능할까?

- 접근은 가능하다. 단, 이 역시 문자열과 헷갈릴 수도 있다. 예를 들어, 배열에 값이 하나인 경우?

 

- 이렇게 보면 결국 처음에 객체의 키가 문자열이었는지, 배열이었는지 확인이 어렵다.

 

참고 웹사이트 : MDN

---

 

오늘부터 자바스크립트 객체부터 쭉 ~ 빠르게 복습하려고 했는데

생각보다 내가 속성에 대해서 잘 몰랐던 부분이 많았고 (😂 반성) 그래서 정리하는 시간을 가지게 되었다.

현재 이미 실무에서 사용하고 있지만 제대로 이해하지 못하고 그냥 '하나의 수단', '하나의 방법'으로 여겼던 부분을 이해하게 되니 이제 이유를 알고 해당 부분을 활용할 수 있게 되었다 😋