[JavaScript/jQuery] console과 객체의 주의점

안녕하세요! Plitche(플리체)입니다.
이번 포스팅의 내용은 jQuery를 이용해서 console과 객체의 주의점 입니다.

Intro

저는 JavaScript 코드를 작성을 할때에 debugger보다 console.log()가 익숙하여 많이 더 많이 사용하는 것 같습니다.

최근에 소스를 분석하다가 객체를 console.log()를 통해서 확인 하는 과정에서

한참을 고민했던 경험이 있어서 소개해 드리려 합니다.

결과가 어떻게 나올지 같이 예상하고 고민해보면서 보시면 좋을 것 같습니다.

---

1. 객체 생성 & console.log 찍기

person이라는 이름을 가진 Object(객체) 하나를 생성하겠습니다.
property(속성)으로는 이름과 나이까지만 간단히 생성하였습니다.

var person = {'name': 'plitche', 'age': 30}

그리고 난 후 console을 통하여 객체의 나이를 찍어보면 당연히 아래와 같이 결과가 나올 것입니다.

 

2. 객체 property(속성) 값(value) 변경 후 console.log 찍기

위의 동일한 객체에 age 값을 변경 후 다시 console.log를 찍으면

당연히 아래와 같이 변경된 값으로 Console 창에 표기될 것 입니다.

  var person = {'name': 'plitche', 'age': 30}
  person.age = 31
  console.log(person.age)
  console.log(person)

 

3. 값 변경 전&후 비교 console.log

자 그럼 여기서! 문제가 발생합니다.

동일하게 위의 person객체에서 age속성의 value를 변경하기 전과 후를 둘다 console.log를 통해 확인해보겠습니다.

위 코드를 작성하고 실행시켰을때 어떠한 결과가 나올까요??

  var person = {'name': 'plitche', 'age': 30}
  console.log(person) // 30
  person.age = 31
  console.log(person) // 31

저와 동일한 실수를 하신 분들이라면 위에 주석으로 작성해 놓은 것 처럼 30 -> 31 순서로 찍힌다고 생각 할 수있습니다.

 

4. 결과와 원인

엥?? 이게 무슨 문제가 된다는거죠?? 30, 31 순서대로 잘 나온거 아닌가요?

  ↓               ↓               ↓               ↓               ↓               ↓                ↓               ↓

로그를 펼쳐보면 객체(Object)의 속성 값이 둘다 31로 찍혀있는 모습을 볼 수 있다.

 

원인은 console.log는 참조를 로깅하기 때문에, 객체처럼 값이 변경되기 전에 찍은 콘솔이 최종 값으로 변경됩니다.

 

---

 

My thought

• 분명히 객체 속성 값을 console.log를 통해서 확인했는데,
  찍은 시점의 값이 문제가 없어서 한참을 분석하게 된 경험이 있습니다.
• 저와 같이 고생하시는 분들이 있으실까봐 공유드립니다. 하나씩 알아가면 되니까요!ㅎㅎ
  금주 한주도 고생하셨습니다.