JavaScript 입문 : 객체 - 배열 (Array) 기본 (3) includes(), indexOf(), lastIndexOf(), 배열반복

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

1. 배열 요소 찾기

 

셀 수 없을 정도로 많은 배열중에서 요소가 있는지 없는지 확인할 수 있는 기능은 변수명.includes(  )를 이용해서 알 수 있습니다. 결과값은 true 또는 false로 표시됩니다. 

 

2. Index 위치 찾기

 

Index의 위치를 나타내어 주는 명령어로 앞에서부터 카운팅되는 indexOf( )와 뒤에서부터 카운팅되는 lastIndexOf(  )가 있습니다. 

다음 배열을 기준으로 보겠습니다.

'바나나'의 Index 위치를 앞과 뒤에서 찾아 보겠습니다.

 

배열의 숫자가 수백, 수천개로 이루어져 있을때 유용하게 사용할 수 있는 툴입니다. 만일 Index에 없는 항목을 검색하게 되면 결과값은 '-1'을 나타냅니다. 

 

예를 들어 같은 배열에 '사과'를 검색해 보도록 하겠습니다. 

 

3. 배열 반복

 

배열도 반복문 (while이나 for)으로 나타낼 수 있습니다. 

 

상기 while문을 for문으로 나타내 보겠습니다. 

 

---

 

<Quiz>

 

제로초 TV의 퀴즈를 하나 가져와서 풀어 보겠습니다. indexOf()와 splice()를 사용해서 '라'를 모두 제거하시오. 

 

const arr = ['가', '라', '다', '라', '마', '라'];

 

일단 indexOf()를 이용하여 '라'가 들어 있는 index 위치를 알아보고 splice()를 이용해서 지우면 될 것 같습니다. 여기서 생각해야 될 점은 '라'를 한꺼번에 찾을 수 있지 않고 하나 찾아서 삭제하고 하나 찾아서 삭제해야 됩니다. 

 

<풀이 1>

 

변수가 3개 사용되겠네요. 

 

첫번째 작업입니다. 

위 그림을 보면 아직 2개의 '라'가 존재합니다. 

 

변수를 만들어서 '라'를 또한번 제거하겠습니다. 

하나가 더 남아 있습니다. 변수를 하나 더 만들어서 '라'를 제거 하겠습니다. 

 

<풀이 2>

상기 과정을 좀 더 간편하게 해보겠습니다. 즉, index위치를 찾고 위치의 숫자와 지우는 개수를 사용하면 될 것 같습니다. arr라는 변수만을 사용하는 개념입니다. 

 

 

※ 풀이 2번을 기준으로 해야합니다.

 

컴퓨터는 풀이 2번처럼 순차적으로 반복이 되어 결과값을 내놓기 때문에 좀 더 단순한 코딩이 나와야 합니다. 이를 기준으로 반복문을 작성할 수 있어야합니다. 

 

예를 들어 indexOf(  )의 값이 false값을 나타내는 경우가 -1의 결과값이 나오는 경우라고 지난시간 배웠습니다. 이를 이용해서 반복문을 나타내봅니다. 

 

'라'를 칮는 indexOf( ) 의 결과값이 1, 2, 3으로 증가하면서 최종 false값은 -1이라는 개념으로 while문을 작성하면 다음과 같습니다. 

아래 그림도 같은 결과값이 나오네요.