리코딩 : 자바스크립트(JavaScript)

자바스크립트 11. 배열 메소드

BreezeBm 2020. 10. 16. 16:17

고차함수를 배웠으니까! 알아두면 유용한 배열 메소드를 기록해보자!

(underbar과제인데 정말 정말 정말 정말 쉽지 않았다구....)

 

먼저 slice부터 기록해보자!

let arr = ['s', 't', 'a', 'r', 'b'];
// arr.slice([start], [end])
arr.slice(0, 2); // ['s', 't']

slice에는 인덱스 값을 주어서 시작하는 인덱스 번호(start)를 포함하고, 끝 번호(end)를 제외한 사이에 있는 요소를 리턴한다. 위의 코드는 배열을 0번째 인덱스 요소를 포함하고 2번 이전에 있는 요소를 리턴했다. slice경우에는 기존의 배열의 건드리지 않으면서 배열을 조작해 새로운 배열을 만들 때 유용하다. 

let arr = [1, 2, 3, 4, 5];
arr.slice(-2); // [4, 5]

그리고 이렇게 음수값을 주게 되면, 맨마지막 요소인 5가 -1의 인덱스값을 가지고, 위의 코드는 -2의 인덱스 값을 가지는 4부터 5까지를 리턴하게 된다. 

 

 

두번째는 concat이다.

(cat이 있기래 귀여웡 했는데, concatenate; 사슬같이 잇다. 연쇄시키다. 연결시키다 였음...)

let arr1 = [1, 2];
let arr2 = [3, 4];
arr1.concat(arr2); // [1, 2, 3, 4]

이렇게 두개의 배열이 있을 때 하나로 합치고 싶을 때에는 concat을 활용해서 합쳐줄 수 있다. 굳이 배열을 합치는 것 뿐만 아니라 내가 추가하고 싶은 요소들도 추가할 수 있다.

let arr3 = ['black', 'pink'];
arr3.concat('in', 'your', 'area'); // ['black', 'pink', 'in', 'your', 'area'];

let busan = ['CentumCity'];
busan.concat({landmark : 'Medical Street', 'SSGdepartment Store'}); // ['CentumCity' {landmark : 'Medical Street', 'SSGdepartment Store'}]

이렇게 내가 넣고 싶은 요소들을 추가해 줄 수 있다!

 

 

세번째로는 every & some이다.

every의 경우에는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 모든 요소가 조건을 만족할 때 true를 반환한다.  

some의 경우에는 배열의 각 요소를 순화하며 콜백 함수를 실행하며 하나의 요소라도 조건을 만족 할 때 true를 반환한다. 

// arr.every
let arr1 = [1, 3, 5, 7, 9];
let result1 = arr1.every(function (el) {
 return el < 6; // 7은 조건을 만족하지 않기 때문에 수행을 중단하고 즉시 false를 즉시 반환한다.
});
console.log(result1); // false

// arr.some
let arr2 = [1, 2, 3, 5, 6, 7];
let result2 = arr2.some(function (el) { 6은 조건을 만족하기 때문에 수행을 중단하고 즉시 true를 반환한다.
 return el % 2 === 0; 
});
console.log(result2) // true

 

다시 말하자면, every의 경우에는 하나의 요소라도 조건을 만족하지 않게 되면 false를 반환하게 되고, some의 경우에는 모든 요소가 다 만족하지 않으면 false를 반환하게 된다. 

 

 

네번째로는 includes이다. 

영어의 의미대로 include메소드는 배열이 특정 요소를 포함하고 있는지 판별한다.

let class = ['math', 'english', 'history'];
arr.includes('math'); // true
arr.includes('science'); // false
arr.includes('nglish'); // false

배열 안에 특정 요소를 포함하고 있으면 true를 리턴하고, 그렇지 않으면 false를 리턴하게 된다. 한글자라도 틀리면 안된다!

 

 

다섯번째로는 indexOf이다.

indexOf는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하고 않으면 -1을 반환한다.

// arr.indexOf(searchElment = 배열에서 찾는 요소 [, fromIndex = 검색을 시작할 인덱스 번호])
let arr = [2, 4, 6, 8, 10];
arr.indexOf(10); // 4
arr.indexOf(7); // -1
arr.indexOf(8, 2); // 3

이렇게 내가 찾고자하는 순서를 지정해서 요소를 찾을 수도 있다.

 

다음에 계속해서 배열 메소드를 기록하자!