자주 사용하는 Array Methods - 1

July 30th 2018

자주 사용하는 Array Methods - 1

안녕하세요.

이번 포스팅에서는 Array에서 보편적으로 많이 사용하고 기본적인 method에 대해서 간단히 정리하고자 합니다.

보시면 아시겠지만, 꾸준히 사용하는 method들이라 포스팅을 생략할까 하다가 자주 사용한다는 것은 그만큼 중요하다는 뜻이기 때문에 마음을 고쳐먹었습니다. 그리고 무엇보다 저는 아직 초심자이니 아무것도 알지 못한다는 마음으로 배워야 할 것 같습니다.

Array methods - isArray - forEach - map - filter - push - pop - slice - splice - reduce - join - indexOf / includes / find 1. Array.isArray Summary - argument로 주어진 객체가 배열이면 true, 아니면 false를 반환함. - Syntax : Array.isArray(parameter)

Array.isArray([]); // true
Array.isArray([1]); // true
Array.isArray(); // false
Array.isArray('Array'); // false
Array.isArray({}); // false

2. forEach Summary - forEach method를 호출한 배열의 각 요소마다 argument로 주어진 callback 함수를 실행함. - return 값은 없음. - immutable - Syntax : arr.forEach(function callback(current value [, index [, array]]){ //Do something })

function printArr(current, index, array) {
  console.log(index + ' : ' + current);
}
var arr = ['hello', 5, 7];
arr.forEach(printArr);
// 0 : hello
// 1 : 5
// 2 : 7

3. map Summary - forEach와 비슷하지만, callback이 요소마다 적용되면 return 값이 있어야 하고, 이 return값들을 모아 새로운 배열을 반환함. - 기존 배열과 길이는 같지만, 요소가 다른 새 배열을 만들 때 유용함. - immutable - Syntax : arr.map(callback);

var numbers = [1, 2, 3];
var newNum = numbers.map(function(cur) {
  return cur * 2;
});
console.log(newNum); // => [2, 4, 6];

4. filter Summary - 조건에 부합하는 배열의 요소만 취해 새로운 배열을 반환함. - immutable - 관련 포스트 : https://chanwhekim.github.io/2018/07/24/arrayfilter/

[1, 2, 3].filter(function(cur) {
  return cur % 2 === 0;
});
// [2]

5. push Summary - method를 호출한 배열의 마지막 요소로 전달 받은 argument를 추가함. - 여러개의 argument 전달 가능함. - return value는 요소가 추가된 후의 배열 길이 - mutable

var arr = ['dog', 'cat'];
var returnValue = arr.push('elephant');
console.log(arr); // => ["dog", "cat", "elephant"]
console.log(returnValue); // => 3

6. pop Summary - method를 호출한 배열의 마지막 요소를 제거함. - return value는 제거한 마지막 요소 - mutable

var arr = ['dog', 'cat'];
var returnValue = arr.pop();
console.log(arr); // => ["dog"]
console.log(returnValue); // => "cat"

7. slice Summary - syntax : arr.slice([begin [, end]]) - argument begin부터 end 전의 요소까지 포함한 새로운 배열을 반환함. - argument가 없을면, 배열 전체를 반환함. - argument가 음수이면, 배열 끝에서부터의 길이를 나타냄. - immutable

var arr = ['flower', 'rose', 'cherryblossom', 'sunflower'];
var newArray = arr.slice(1, 3);
console.log(arr); // ["flower", "rose", "cherryblossom", "sunflower"]
console.log(newArray); // ["rose", "cherryblossom"]

8. splice Summary - 배열의 요소를 삭제하거나, 추가할 때 사용함. - syntac: arr.splice(start [, deleteCount [, item1 [, item2[, ...]]]]) - argument start : 배열 내 요소를 삭제할 시작 위치(index)를 설정 - argument deleteItem : 시작위치부터 삭제할 요소의 개수를 설정, 0이면 삭제를 하지 않음. - return 값은 삭제한 요소를 취한 새로운 배열 - mutable

var arr = ['flower', 'dog', 'rose', 'cherryblossom', 'sunflower'];
var returnValue = arr.splice(1, 1, 'tulip');
console.log(arr); // ["flower", "tulip", "rose", "cherryblossom", "sunflower"]
console.log(returnValue); // ["dog"]

9. reduce Summary - reduce는 배열 요소를 순차적으로 이동하며, callback을 적용합니다. 각 요소에 적용된 callback함수의 return 값을 다음 callback에 다시 인자로 전달하여, 최종적으로 하나의 값을 도출하는데 유용합니다. - syntac: arr.reduce(callback [, intialValue]) - 배열의 모든 요소의 계산을 누적해 하나의 결과값을 도출할 때 용이함. - immutable - 관련 포스팅으로 대체 : https://chanwhekim.github.io/2018/07/24/findminimumlengthofthreewords/

10. Join Summary - 배열의 모든 요소를 연결해 하나의 문자열을 반환합니다. - syntac : arr.join(argument); - 반환되는 문자열에서 배열의 각 요소를 구분할 문자열을 argument로 지정함. 생략시 ,로 구분함. - immutable

var arr = ['flower', 'rose', 'cherryblossom', 'sunflower'];
arr.join(); // "flower,rose,cherryblossom,sunflower"
arr.join(''); // "flowerrosecherryblossomsunflower"
arr.join(' '); // "flower rose cherryblossom sunflower"
arr.join(', '); // "flower, rose, cherryblossom, sunflower"

10. indexOf Summary - syntac : arr.indexOf(parameter); - 배열에서 argument가 위치한 첫번째 인덱스를 반환함. - 배열 내 찾는 요소가 없으면 -1을 반환함.

var arr = ['flower', 'rose', 'cherryblossom', 'sunflower'];
arr.indexOf('rose'); // 1
arr.indexOf('dog'); // -1

11. includes Summary - syntac : arr.includes(searchElement [, fromIndex]); - 배열 내 argument가 포함되어 있으면 true, 없으면 false를 반환함. - 배열 내 찾는 요소가 없으면 -1을 반환함.

var arr = ['flower', 'rose', 'cherryblossom', 'sunflower'];
arr.includes('rose'); // true
arr.includes('dog'); // false

12. find Summary - syntac : arr.find(callback) - 배열 내 callback으로 전달 받은 테스트 함수의 조건에 부합하는 첫 요소를 반환합니다. - immutable

var arr = ['flower', 'rose', 'cherryblossom', 'sunflower'];
arr.find(strLength); // "sunflower"

function strLength(cur) {
  return cur.length === 9;
}

Handmade with .