자바스크립트 고수도 헷갈리는 배열의 접근 방식

※ 제가 고수라는 뜻은 아닙니다

 

위 코드의 출력 값은 어떻게 될까? 첫줄에서 선언한 그대로 [9,8,7,6][1,2]이렇게 출력될까?

결과를 마음 속으로 생각해보고, 아래 더보기를 눌러 답을 확인해보자.

놀랍게도 답은 7이 나온다.

---

자바스크립트 배열의 접근 방식 이해하기

자바스크립트에서 배열은 매우 자주 사용 되는 자료형이다.

배열은 값들의 집합을 담고 있으며, 각 값은 인덱스를 통해 접근할 수 있다.

이번 글에서는 배열에 접근하는 방법과, 자바스크립트의 특이한 배열 접근 방식에 대해 알아보자!

---

 

자바스크립트 배열 기초

자바스크립트 배열은 값을 여러 개 저장할 수 있는 리스트 형태의 자료 구조이다. 배열에 저장된 각 값은 인덱스를 통해 접근할 수 있다.

배열의 인덱스는 0부터 시작하며, 배열[인덱스] 형식으로 배열의 특정 값을 가져올 수 있다.

const arr = [9, 8, 7, 6];
console.log(arr[0]);  // 9 출력
console.log(arr[2]);  // 7 출력

위 예제에서 볼 수 있듯이, 배열의 첫 번째 값은 인덱스를 통해 arr[0]을 통해 가져올 수 있다.

---

 

배열 내 배열 접근하기

자바스크립트 배열은 배열 자체를 값으로 가질 수 있다. 즉, 배열 안에 또 다른 배열이 있을 경우, 중첩된 배열로부터 값을 가져오는 것도 가능하다.

const nestedArr = [[1, 2], [3, 4], [5, 6]];
console.log(nestedArr[1][0]);  // 3 출력

위의 예제에서 nestedArr[1]은 [3, 4] 배열을 나타내며, 그 안의 첫 번째 요소를 nestedArr[1][0]으로 접근할 수 있다.

---

배열 접근의 독특한 방식

이번에는 처음 본 예시에서 본 배열을 살펴보자. 

const res = [9, 8, 7, 6][1, 2];
console.log(res);  // 7 출력

 

이 코드의 결과는 7이다.

배열 res가 단순히 [9, 8, 7, 6]이라는 배열에서 [1, 2]라는 2차원 배열을 반환하는 것처럼 보일 수 있지만,

자바스크립트에서는 1, 2처럼 쉼표로 구분된 값을 사용하면 마지막 값인 2가 배열의 인덱스로 사용된다.

 

쉽게 말하자면 [9, 8, 7, 6][1, 2]에서 자바스크립트는 [9, 8, 7, 6][2]로 해석되어 인덱스 두 번째 값인 7을 출력하게 되는 것이다.

 

---

쉼표 연산자의 역할

이 코드가 이렇게 작동하는 이유는 자바스크립트의 쉼표 연산자 때문이다. 쉼표 연산자는 왼쪽에 있는 값을 무시하고, 오른쪽에 있는 값을 반환한다. 즉, 1, 2처럼 쉼표로 연결된 값은 2만 남게 된다.

console.log((1, 2));  // 맨 뒤에 있는 값인 2 출력
const res = [9, 8, 7, 6],[1, 2]; // 맨 뒤에 있는 값인 [1,2] 출력

 

이와 같은 원리로 [9, 8, 7, 6][1, 2]는 결국 [9, 8, 7, 6][2]로 처리된다.

---

결론

자바스크립트 배열은 우리가 일반적으로 사용하는 직관적인 방식으로 접근할 수 있지만, 위에서 살펴본 예시 같이 쉼표 연산자와 결합되면 독특한 결과를 만들어 낼 수 있다.

 

자바스크립트는 유연하지만 드물게 예측과 다르게 작동할 수 있으므로 주의하면서 사용하자.

 

 

---

출처

- https://rahuulmiishra.medium.com/javascript-interview-question-why-does-9-8-7-6-1-2-7-a8c070d46cc6

- KUFE slack