[TIL]Javascript - Array Method 3. 자주 쓰이는 메서드

 .length 

• 배열의 원소 수를 반환
• 메서드 끝에 ()를 사용하지 않는다.

let myArray =[ 1, 2, 3, 4 ];
console.log( myArray.length );     // 4
console.log( myArray.length() );   // Uncaught TypeError: arr.length is not a function

 

 

 indexOf(searchValue[ , fromIndex]) 

• 배열 안 요소의 인덱스 찾기
• parameter
  • searchValue : 찾을 문자열. 값이 없으면 "undefined"를 찾을 문자열로 사용 (Required)
  • fromIndex : 문자열에서 찾기 시작하는 위치 Index (Optional)
• 같은 문자열이 존재할 시 제일 먼저 나오는 index값을 반환

let danString = 'Hello dand world';
console.log(danString.indexOf('w'));   // 11
console.log(danString.indexOf('d'));   // 6

/* d의 갯수 찾기 */
const str = 'Hello dand world'
let pos = str.indexOf('d'); 
console.log(pos);                  // 6
 
let count = 0;

while (pos !== -1) {
  count++;
  pos = str.indexOf('d', pos + 1); // 첫 번째 d 이후의 index부터 d를 찾습니다.
}

console.log(count);                // 3

 

 

 lastindexOf(searchValue[ , fromIndex]) 

• 배열 안 요소의 인덱스 찾기
• 같은 문자열이 존재할 시 제일 먼저 나오는 index값을 반환

let danString = 'Hello dand world';
console.log(danString.indexOf('d'));       // 6
console.log(danString.lastIndexOf('d'));   // 15

 

 

 .includes(element, start) 

• parameter
  • element : 검색할 요소(Required)
  • start : default = 0, 배열에서 검색을 시작할 위치(Optional)
• boolean 값으로 반환. 해당 요소가 있으면 true/없으면 flase

let pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('at'));      // false
console.log(pets.includes('cat'));     // true

let pets = ['cat', 'dog', 'bat'];
let newPets = pets.filter((v)=> v.includes('at'));
console.log(newPets);     // ["cat","bat"]

 

 

 .filter(callbackFunction(currentValue, index, array), thisAgr) 

• 지정된 함수의 조건에 맞는 결과 값(true)를 가진 요소들로만 구성된 새로운 배열을 반환
• 조건에 맞는 요소가 없다면 빈 배열 반환
• 새로운 배열을 할당할 새로운 변수가 필요하다. 기존 배열은 변화 없다
•  parameter
  • callbackFuntion : 필수. 배열의 각 요소에 실행할 함수
    • currentValue : 현재  element의 value (Required)
    • index : 현재 element의 배열 index (Optional)
    • array : 현재 요소가 속한 배열 객체 (Optional)
  • thisArg
    • callback 실행시 this로 사용할 객체 (Optional)
    • 비어 있으면 undefined 값이 this 로 전달 됨

let numbers =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

/* 홀수로 이루어진 배열을 반환 */
function numOdd (value) {
    return value % 2 === 1;
}
let result1 = numbers.filter(numOdd);
console.log(result1);   // [1,3,5,7,9]

/* 짝수로만 이루어진 배열을 반환 */
let result2 = numbers.filter((value)=> value % 2 === 0);
console.log(result2);   // [2,4,6,8,10]

/* 조건에 부합하는 요소가 없을 때 */
let result3 = numbers.filter((v)=> v > 10 );
console.log(result3);  // []

 

/* 고양이를 찾아보기 */
let pet = [
  // {key:value}
  {kind:'cat', name: '냥냥' }, 
  {kind:'dog', name: '멍멍'}, 
  {kind:'cat', name: '먀먀' }, 
  {kind:'dog', name: '왈왈' }
];

function findCats() {
  let cats = pet.filter( v => v.kind == 'cat' )
  console.log(cats)
  return cats
}
findCats();    // [{kind:'cat', name: '냥냥' },{kind:'cat', name: '먀먀' }]

 

 

 .map(currentValue, index, array) 

• parameter
  • currentValue : 현재  element의 value (Required)
  • index : 현재 element의 배열 index (Optional)
  • array : 현재 요소가 속한 배열 객체 (Optional)
• 각 요소를 순회하며 callback함수 실행
• callback에서 return되는 값으로 배열 생성
• 빈 요소일 경우 함수 실행 안함

let numbers =[ 1, 2, 3, 4, 5];

let arrEven = numbers.map((value)=> value % 2 === 0);
console.log(arrEven);    // [ false, true, false, true, false ]

let arrTwice = numbers.map((value)=> value * 2);
console.log(arrTwice);   // [ 2, 4, 6, 8, 10 ]

 

 

 .forEach(callbackFunction(currnetValue, index, array), thisArg) 

• 배열의 모든 요소를 돌며 callback 함수 실행
•  parameter
  • callbackFuntion : 필수. 배열의 각 요소에 실행할 함수
    • currentValue : 현재  element의 value (Required)
    • index : 현재 element의 배열 index (Optional)
    • array : 현재 요소가 속한 배열 객체 (Optional)
  • thisArg
    • callback 실행시 this로 사용할 객체 (Optional)
    • 비어 있으면 undefined 값이 this 로 전달 됨

var arr =[ 1, 2, 3, 4 ];
arr.forEach( function( value ) {
  console.log( value );   // 1 2 3 4
});

 

• for문과 같은 기능이지만, break, continue 사용이 불가하다.

const arr = [1,2,3,4]; 
for (let i=0; i<arr.length; i++){ 
	console.log(arr[i]);     // 1 2 3 4
}

 

 

 

 

 

 

📚참고 자료

W3Cschool - js

https://www.w3schools.com/jsref/ 

MDN Web Doc - "Array"

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