javascript array method : indexOf

MDN에서 array 메소드 중에 많이 쓰는 것들을 그대로 따라 작성 해 보고 있다. 그중 indexOf메소드를 공부해 보았다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

Array.prototype.indexOf()

 

indexOf는 배열의 몇번째 요소로부터(fromIndex) 검색해 나오는 인덱스를 반환하는 메소드다.

var beasts = ['ant','bison','camel','duck','bison'];


console.log(beasts.indexOf('bison'));

console.log(beasts.indexOf('bison',2));

console.log(beasts.indexOf('giraffe')); 

마지막 console.log에서 giraffe는 beats 에 없는 값이므로 -1을 반환한다.

var array = [2, 8, 9];
array.indexOf(2);
var array = [2, 8, 9];
array.indexOf(2); //2가 처음으로 나오는 인덱스는 0
array.indexOf(7); //7은 존재하지 않으므로 -1
console.log(array.indexOf(9, 2)); //2
console.log(array.indexOf(2, -1)); //-1
console.log(array.indexOf(2, -3)); //0

fromIndex가 2일 때 array의 2번째 값으로부터 나오는 9의 최초인덱스인 2를 반환한다.

fromIndex가 -1일 때는, -1번째 값이라는 게 애초에 없으므로 -1을 반환한다고 이해했다. 

그러나 마지막 구문은 이해가 되지 않았다. fromIndex가 음수일 경우에도 배열의 앞에서 뒤까지 검색을 한다고 하는데, 어디가 앞인 건가?

왼쪽이 앞인가 오른쪽이 앞인가? 0번이 앞이라고 치고, 그런데 왜 반환되는 인덱스 값이 0인지 모르겠다.

주변에 물어보았다. 그런데 실무에서 잘 쓰지 않는다고 한다.

그그럼...일단은 패스해보겠다.

 

var indices = [];
var array123 = ['a', 'b', 'a', 'c', 'a', 'd'];

console.log(array123.indexOf('a', 1)); 

var element = 'a';
var idx = array123.indexOf(element);
console.log(element + "dddd");

console.log(element);
console.log("idx에" + idx + "이 할당되었다."); 


while(idx != -1){
  indices.push(idx); 
  console.log(idx + "을 push"); //0을 push
  console.log(indices);
  idx = array123.indexOf(element, idx + 1); 
  console.log("idx는 " + idx);
}

console.log(indices);

배열 내의 최초의 인덱스값을 의미하므로, array123의 1번째 값(b)다음으로 a가 나오는 인덱스는 2다.

element 라는 변수에는 a값이 들어있으므로, indexOf(element)는 0을 반환하고 idx에 할당한다. 

반복문을 사용해 idx가 -1이 아닌 동안 idx값을 계속해서 indices의 빈 배열에 순서대로 넣어준다. idx는 element 변수의 최초 인덱스부터 시작하고 idx를  1씩 증가시킨다. 반환된 값을 계속 idx에 할당하면 a라는 값이 세 번 들어가있는 배열이 되고, 네번째부터는 존재하지않는다. -1이 반환되면 반복문이 끝난다.

 

indices 에 들어간 idx는 0, 2, 4이므로 [0,2,4]가 반환된다.

 

계속 헷갈리는 것은, MDN의 구문에서 배열의 이름을 array로 지정하고 array.indexOf라고 코드를 작성하는데

array.indexOf의 array가 배열의 이름인지, 원래 있는 함수인지 모르겠다는 것이다. 계속 그렇게 혼동이 와서 이름을 다른 것으로 바꿔보면서 공부한다. 이번에도 array뒤에 123을 붙여보고 나서야 문제를 풀 수 있었다. indexOf메소드 앞에 붙는 것은 배열 이름이었엉.