[Javascript] 객체에 정의되지 않은 요소의 참조를 예방하는 방법

1. 서론

 회사에 큰 손해를 끼치며 배운 JS문법을 정리하고 같은 실수를 반복하지 않기 위해 과정을 정리하고자 한다. 사견이지만 JS는 자유도가 너무 높은 객체인 것 같다. 코테는 C++, 서버는 JAVA로 개발하고 지금 사이드 프로젝트에서는 Python을 사용하고 있기에 JS는 이번에 입사한 회사에서 처음 사용해본다. 처음 접한건 학교 웹 개발 수업에서 들은 정도...

 

 자랑은 아닌데 따로 JS를 공부하지는 않았다. "여기저기 경험하고 다치면서 성장하는거지 뭐!" 라고 생각했는데 8톤 트럭에 치이고 콤마 상태 한 번 갔다 와보니 심각성을 느꼈다. 어떤 실수였는지에 대한 자세한 내용은 아래의 포스팅에 정리하였다.

---

https://apape1225.tistory.com/169

[산업기능요원] 크나큰 실수 기념 광기의 회고록 #3 👏🏻

---

2. 본론

문제 원인 정의

 

 굳이 굳이 굳이 굳이 굳이 굳이 문제의 원인을 정리하자면 다음과 같다.

---

1. 바보 같은 내 머리

2. 집중력 부족

3. 나의 오타력

4. 정의 되지 않은 객체 속성의 추가

---

 위의 여러 문제 중 4번을 방지하고자 한다.

 

 JS에서 가장 적응이 안됐던 문법 중 하나는 객체를 정의 한 후에도 속성을 매우 자유롭게 추가한다는 점이었다. 이걸 강제적으로 금지하는 문법을 찾아보다 가장 먼저 아래의 문법을 찾았다.

---

 

---

 

 이렇게 되면 객체에는 추가가 안되는데 추가가 되는 과정에서 버그가 발생하지 않는다. 그렇게 되면 없는 요소를 참조할 때 undifined로 참조가 되지 않을까? 라는 생각에 테스트를 해보았다.

---

---

 자 역시 정의되지 않은 속성은 undefined값으로 반환된다. 그럼 객체에 속성을 추가할 수 없게 되기는 했지만 그렇다고 내가 한 버그를 개발자 테스트 단계에서 잡았을까? 라는 생각은 들지 않는다. 다음 예시를 보자.

---

---

 자 결국 이 문법을 써도 나는 버그를 잡지 못했을 것이다. 그렇다면 정의되지 않은 속성을 "참조"하는 과정에서 버그가 발생해야한다는 것이다. 그래서 문제 원인을 다음과 같이 다시 정의했다.

---

문제: 정의되지 않은 객체 요소를 참조할 때 아무런 버그가 발생하지 않음.

---

 이것 저것 찾아보니 strict모드를 알게 되었다. MDN문서에서는 strict모드의 기능을 다음과 같이 정의했다.

---

---

 여기서 내가 기대하는 것은 1번이다. strict모드를 나의 코드에 적용하면 다음과 같은 결과가 나타난다.

---

---

 똑같네 흑흑...

 

 그래서 다시 여러 방법을 찾아보니 getter와 setter를 사용하는 방법이 있었다. 다음 예시를 보자.

---

---

 이렇게 객체별로 getter를 만들어 사용하면 실수할 확률이 "적어"지지 않을까 라는 생각이 든다.

3. 결어

  사실 만족스럽지 않은 결과이긴하다. 결국 정의되지 않은 요소를 참조할 때 버그를 발생하는 법을 찾지는 못했으니 말이다. 찾아본 방법들은 모드 예방 코드를 작성하는 것 뿐이었다.

 

 구조화된 버그 예방 코드들을 더 찾아볼 계획이다. 이 과정이 다 성장이겠구나 하고 최대한 성실하게 작성해보았다.