본문 바로가기
D.evelop/JavaScript

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

by Danne 2021. 8. 16.

 .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

 

 

 

 

 

 

반응형

댓글