foo.x의 값은 무엇인가요?

개발 직군 면접으로 자바스크립트 퀴즈를 풀다가 다음과 같은 문제가 나왔습니다.

 

foo.x의 값은 무엇인가요?

var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};

bar의 값이 무엇인지도 생각해 보면 좋을 것 같습니다.

 

 

처음에는 풀지 못했지만 stackoverflow를 참고해서 이해하고 아래에 정리를 해두려고 합니다.

혹시 제가 잘못 이해하고 있다면 댓글로 알려주시기 바랍니다!

https://stackoverflow.com/questions/32342809/javascript-code-trick-whats-the-value-of-foo-x

JavaScript code trick: What's the value of foo.x

 

• 원칙 1 : 코드는 한 줄씩 실행된다
• 원칙 2: 할당이 이루어지는 같은 줄의 코드는 오른쪽에서 왼쪽으로 순서가 진행된다

 

마지막 줄이 작동하는 순서를 풀어보면 다음과 같습니다.

foo.x = foo = {n: 2}
{n: 1}.x = ( {n: 1} = {n: 2} )
{n: 1}.x = {n: 2}
{n: 1, x: {n: 2}}

• 실행되기 전 foo의 값은 {n:1}로 확정
• 마지막 결과값은 예전 foo가 참조하는 값이라서 bar가 참조하는 값이 됨
• 이제는 새로운 foo가 {n:2}가 됨
• 새롭게 코드를 console.log(foo.x) 로 치면 {n:2}에 x가 없으므로 foo.x는 undefined가 됨