2차원 배열에서의 index error 처리

2차원 이상의 배열에서 인덱스의 범위를 벗어나는 경우, 에러가 발생한다.

 

공원산책 문제를 풀면서 계속 error가 났다.

풀다가 도저히 해결이 나지 않아 질문을 올리니 index error가 난다는 답변이 달렸다.

index error가 도대체 뭔가 싶어 구글링을 하였다.

 

 

# 2차원 배열에서 인덱스를 벗어나면?

- 인덱스를 벗어나서 에러가 발생하는 상황을 확인해보자.

- 2차원 배열에서 두 가지의 경우를 살펴보자.

1/ 배열의 두 번째 인덱스값을 벗어난 경우  → arr[0][5]

2/ 배열의 첫 번째 인덱스값을 벗어난 경우 → arr[-1][0]

const arr=[[1, 2, 3, 4, 5], 
           [3, 7, 1, 6, 1],
           [7, 2, 5, 3, 4],
           [4, 3, 6, 4, 1],
           [8, 7, 3, 5, 2]];
           
arr[0][5] // 값 undefined
arr[-1][0] // Uncaught TypeError..

 

 

# 에러가 발생하는 원인

- 위에서 두가지 인덱스를 벗어나는 경우를 확인해보았다.

- 두 경우 모두 인덱스를 벗어났지만, 결과는 다르게 나온다.

- 그렇다면, 두 가지 경우를 JS는 어떻게 해석하는지 확인해보자.

 

 

 

## 연산자 우선순위

- 2차원 배열이 해석되는 순서를 이해하면, JS가 해당 구문을 어떻게 해석하는지 알 수 있다.

- MDN에서 확인해보면, [ ]연산자는 좌결합성인 것을 확인할 수 있다.

 

** '결합성'이란?

• 연산 순서를 말한다.
• 좌결합성 : left to right. 왼쪽에서 오른쪽으로 연산 진행.
• 우결합성 : right to left. 오른쪽에서 왼쪽으로 연산 진행

- 2차원 배열은 []연산자가 두개 사용됐으며, 좌결합성으로 인해 왼쪽부터 연산된다.

 

 

1/ 두 번째 인덱스값이 벗어난 경우 : arr[0][5]

- 2차원 배열은 좌결합성으로 인해 왼쪽부터 arr[0]를 먼저 해석한다.

- 이후에 그 결과값을 가지고 다시 [5] 연산을 수행한다.

- 즉, a[0]로 첫번째 행인 [1,2,3,4,5]라는 1차원이 배열로 해석된다.

- 이후 이 1차원 배열에서 두 번째 인덱스 값인 [5]를 연산한다.

하지만 [1, 2, 3, 4, 5]에서 5라는 인덱스는 존재하지 않으므로 undefined로 해석된다.

 

 

2/ 첫 번째 인덱스 값이 벗어난 경우: arr[-1][0]

- 이것도 역시 arr[-1] 부터 해석해나가면 된다.

- a라는 2차원 배열에서 -1이라는 행은 존재하지 않기 때문에 undefined

- 이 undefined에서 다시 [0]이라는 해석을 수행하지만, undefined은 배열의 형태가 아니므로

- Uncaught TypeError 에러가 발생한다.

arr[-1][0]
arr[-1] // undefined
undefined[0] // Uncaught TypeError: Cannot read property '0' of undefined

 

 

 

## ?? 연산자를 통한 에러 처리

- 인덱스를 벗어나는 경우 에러가 나지 않게 처리해보자.

- 첫 번째 인덱스를 연산의 결과 undefined 에서 두 번째 인덱스 연산을 하는 것이 에러의 원인이다.

이를 방지하기 위해, 첫 번째 인덱스가 undefined인 경우, ?? 연산자로 빈 배열로 대체한다.

두 번째 인덱스에서 배열이 인덱스를 벗어나도 undefined이므로 에러를 방지할 수 있다.

(arr[1] ?? [])[0]
(undefined ?? []) // []
[][0] // undefined

 

* 널병합연산자(??)에 대한 글 ↓

널 병합 연산자 ?? (Nullish coalescing operator)

 

 

# 정리

- 2차원 배열에서 인덱스를 벗어나면 에러를 발생하는 경우가 있다.

- 이는 첫번째 인덱스 연산에서 undefined이 된 상태에서

- 두 번째 인덱스 연산을 수행하면서 발생하는 에러이다.

- 따라서 첫번째 인덱스 연산에서 undefined인 경우, ?? 연산자(널 병합 연산자)를 통해 빈 배열로 변환해주면 에러를 방지할 수 있다.

 

 

참조: https://tiaz.dev/JavaScript/2

2차원 배열, 인덱스 에러 처리