지뢰찾기 게임을 만들다가 하나의 칸을 클릭하면 칸이 클릭되면서 그 칸에 지뢰가 없다면 칸 주변에 지뢰가 몇개 있는지 개수를 카운트해서 칸에 개수를 보여주는 기능을 구현할때 에러가 발생했습니다.

위와 같은 에러가 발생했죠. 칸을 클릭하면 칸을 둘러싸고 있는 칸을 모두 확인해 지뢰가 있는지 찾는데 칸으로 구성된 큰 table 의 테투리를 클릭하면 없는 칸을 확인하게 되는겁니다.이 칸으로 구성된 table 을 배열로 데이터를 관리하고 있다면 배열에 구성된 인덱스가 아닌 범위를 벗어난 인덱스 값을 불러오게 되는 것 입니다.

const arr = [1,2,3,4,5,6];

console.log(arr[6]) // undefined 

위와 같이 1차원 배열에서는 인덱스 범위를 벗어난 인덱스에 접근하면 에러가 발생하지 않고 undefined 가 출력 됩니다.
그럼 2차원 배열은 어떻게 되는지 알아 봅시다.

const arr = [[1,2,3,4,5,6],
             [1,2,3,4,5,6],
             [1,2,3,4,5,6],
             [1,2,3,4,5,6],
             [1,2,3,4,5,6],
             [1,2,3,4,5,6]];

console.log(arr[0][6]) // undefined 
console.log(arr[6][0]) // ncaught TypeError: Cannot read properties of undefined

위의 코드를 보면 arr 배열 2차원 배열을 생성 했습니다.
배열의 인덱스에 두가지 방법으로 접근 했더니 결과가 다르게 나온것을 확인 할 수 있습니다. 그럼 그 이유에 대해서 알아봅시다. 일단 2차원 배열은 좌측의 인덱스 부터 읽어 연산을 진행 합니다.
1. arr[0][6] 2번째 인덱스 값이 인덱스 범위를 벗어난 경우
arr[0] 을 읽고 그 이후에 [6] 을 읽습니다. arr[0] 은 인덱스 범위에 있기 떄문에 arr 0번째 배열인 [1,2,3,4,5,6] 으로 해석 됩니다. 이제 이 배열의 [6] 인덱스를 연산 합니다. arr[0] 배열에는 [6] 번째 인덱스가 없기 때문에 undefined 가 출력 됩니다.
2. arr[6][0] 1번쨰 인덱스 값이 인덱스 범위를 벗어난 경우
arr[6] 은 arr 에 존재하지 않습니다. 6번째 인덱스 이기 때문이죠. 그래서 undefined 이고 여기서 [0] 번째 인덱스를 찾습니다. 하지만 undefined 는 배열이 아니기 때문에 에러가 발생 합니다.

에러를 해결하는 방법

이런 상황에서 에러를 해결하는 방법은 두가지가 있다. 바로
ES2020 에서 추가된 ?? (널 병합) 연산자와 ?. (옵셔널 체이닝) 연산자를 사용하는 것 입니다.

널 병합 연산자를 사용하면 a ?? b 에서 a가 null 이나 undefined 인 경우 b 가 나오게 됩니다. 이 방법을 위의 예로 사용하면 (a[6]??[])[0] 로 undefined 가 나오게 됩니다. 여기서는 연산할때 undefined 가 나오게 된다면 [0] 연산을 할 때 에러가 발생하지 않도록 빈 배열을 반환하는 거죠.

옵셔널 체이닝 연산자는 null 이나 undefined의 속성을 조회하는 경우 에러가 발생하는 것을 막아주는데 사용 합니다.

옵셔널 체이닝 연산자를 사용하면 더 간편하게 이 에러를 해결 할 수 있습니다.
위의 예로 옵셔널 체이닝 연산자를 사용하면 a[6]?.[0] 로 undefined 가 나오게 됩니다. 옵셔널 체이닝의 작동 방법은 첫번째 인덱스를 연산할때 undefined 가 나온다면 뒤에 거는 연산하지도 않고 undefined 를 반환하게 되는 방법 입니다.

이 방법은 객체, 배열, 함수호출 등 모두 사용 할 수 있습니다.