주니어 프론트엔드 개발자 기술 면접을 보는 도중에 이런 문제를 받았습니다.
하얀 종이에 있는 게 뭔지 눈에 잘 들어오지도 않았지만 한번 더듬어본다는 생각으로 기록해 두겠습니다.
면접 시작 전에 해당 기업 CTO님께서 이런 말을 해주셨습니다
문제의 정답을 맞추는 것은 상관 없어요.
대부분 안믿으시긴 하시지만 정답과 상관없이 문제 푸는 모습을 보고 싶어요
그래도 문제 푸는 사람 입장에선 일단 눈 앞에 있는 문제를 해결하지 못하면 안되겠다는 강박이 생기긴 하더라구요.
정말 간단한 코드라 생각하지만, 자바스크립트의 특이한 작동 방식 덕분에 이런 현상이 나타난다고 합니다.
JavaScript code trick: What's the value of foo.x
var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};저는 foo.x는 {n:2} bar.x도 {n:2}라고 생각했습니다. 그때 답으로 어떻게 적었는지 모르겠지만,
아무리 생각해도 지금은 이 답 말고 떠오르질 않네요. 그럼 하나씩 콘솔에 한 번 찍어보겠습니다.
놀랍게도 foo.x는 undefined, bar는 {n:1, x:{n:2}}라는 결과를 볼 수 있었습니다.
왜 undefined가 등장했을까요?
그에 앞서 제가 먼저 답을 내놓은 과정을 기록해보겠습니다.
var foo={n:1}에서 변수foo는{n:1}이라는 객체를 할당한 상태라고 생각합니다.var bar = foo에서bar는foo와 같은 객체를 바라보게 됩니다.- 이때,
foo.x={n:2}를 입력하면, 자바스크립트에서 동적으로 객체에 x라는 값을 추가해서{n:2}라는 값을 넣어주게 됩니다.bar와foo는 같은 객체를 바라보고 있으니,bar.x를 접근하면{n:2}라는 값을 확인할 수 있습니다.- 그런데 여기서
foo.x = foo = {n:2}입니다.foo.x에 다시foo를 할당한다고? 그런데 그게{n:2}라고?- 그럼 결국 foo는 {n:2}로 재할당 되지 않을까?
라는 생각을 통해서 bar.x는 {n:2}, foo.x={n:2}라는 결과를 예상했습니다.
그렇다면?
조금 서칭을 해보니 ES5 문서에서 해당 개념에 대한 설명을 조금이나마 볼 수 있었습니다.
이를 조금 더 풀어쓴다면 다음과 같습니다.
- foo는 할당 전, 즉 문이 실행되기 이전에는 {n:1}을 참조하게 됩니다.
foo.x = foo = {n:1}은 다음과 같이 작성할 수 있습니다.{n:1}.x = ({n:1} = {n:2}- 따라서 위 식에서 .x는 참조할 것이 없어서 undefined가 반환되고, 이후 foo는 {n:2}라는 새로운 값을 참조합니다.
이런 방식으로 작동 되어서 아마 foo.x는 undefined를 반환하게 됩니다.
기본적인 객체 참조 방식의 순서를 알고 있다면 아마 쉽게 풀 수 있는 문제이지 않을까 싶네요.
다음 번에 해당 문제를 만나게 된다면, 이런식으로 설명할 수 있길 바라며 글 마무리하도록 하겠습니다.
