1. Array.isArray()
- Array.isArray() 메서드는 전달받은 값이 배열인지 아닌지를 검사한다.
let words = ["사과", "배" , "오렌지"];
Array.isArray(words); // true
Array.isArray([1,2,3); // true2. 원본 배열을 변경하는 메서드(mutable)
- 원본 배열을 변경하는 메서드를 사용할 경우 return문을 바로 붙이지 못 한다.
function addToBack([1, 2, 3], 4) {
return arr.push(4); // -> 이 단계에서는 3을 추가한 배열의 길이 4를 반환하기 때문에 배열의 형태로
//반환하는게 아니라서 이 단계에서 return을 하면 안 되고 return arr를 따로 해줘야 한다
}
function addToBack(arr, el) {
arr.push(el);
return arr // **return arr를 따로 해준다**
}1) push() (요소 추가)
- push() 메서드는 하나 이상의 요소를 배열 끝에 추가하고, 변경된 배열의 길이를 반환한다.
- 원본 배열은 추가한 요소의 수만큼 길이(length)가 늘어난다.
let fruits = ["사과", "오렌지"];
fruits.push("배"); // 3 -> 변경된 배열의 길이 반환
console.log(fruits) // ["사과", "오렌지", "배"];2) unshift() (요소 추가)
- unshift() 메서드는 하나 이상의 요소를 배열 가장 앞에 추가하고, 변경된 배열의 길이를 반환한다.
- 원본 배열은 추가한 요소의 수만큼 길이(length)가 늘어난다.
let fruits = ["오렌지", "배"];
fruits.unshift('사과'); // 3
console.log(fruits) // ["사과", "오렌지", "배"];3) pop() (요소 제거)
- pop() 메서드는 배열의 가장 마지막 요소를 제거하고, 제거된 요소를 반환한다.
- pop() 메서드를 실행할 때마다 배열의 길이는 1씩 줄어든다.
let fruits = ["사과", "오렌지", "배"];
fruits.pop(); // "배"
console.log(fruits) // 배열이 "배"를 제외하고 ["사과", "오렌지"]"로 바뀜4) shift() (요소 제거)
- shift() 메서드는 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환한다.
- shift() 메서드를 실행할 때마다 배열의 길이가 1씩 줄어든다.
let fruits = ["사과", "오렌지", "배"];
fruits.shift(); // "사과"
console.log(fruits) // 배열에서 "사과"를 제거하고 ["오렌지", "배"]로 바뀜5) splice()
- 기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경한다.
- 첫 번째 인수는 새로운 요소가 삽입될 위치의 인덱스이며, 두 번째 인수는 제거할 요소의 개수이다.
- 두 번째 이후의 인수들은 지정된 인덱스부터 차례대로 삽입된다.
- 이 메서드는 배열에서 제거된 요소를 빈 배열의 형태로 반환하며, 아무 요소도 제거되지 않았으면 빈 배열을 반환한다.
- 예제1. 요소를 제거하지 않고 2번 index에 '딸기', '사과' 추가
let fruits = ['수박', '바나나', '망고', '두리안'];
let removed = fruits.splice(2, 0, '딸기', '사과');
console.log(fruits); // ['수박', '바나나', '딸기', '사과', '망고', '두리안'];
console.log(removed); // [];- 예제2. 2번 index에서 1개 요소 제거
let fruits = ['수박', '바나나', '망고', '두리안'];
let removed = fruits.splice(2, 1);
console.log(fruits); // ['수박', '바나나', '두리안'];
console.log(removed); // ['망고'];- 예제3. 1번 index에서 2개 요소 제거 후 '멜론' 추가
let fruits = ['수박', '바나나', '망고', '두리안'];
let removed = fruits.splice(1, 2, '멜론');
console.log(fruits); // ['수박', '멜론', '두리안'];
console.log(removed); // ['바나나', '망고'];- 예제4. 끝에서 2번째 요소부터 2개의 요소를 제거
let fruits = ['수박', '바나나', '망고', '두리안'];
let removed = fruits.splice(-2, 2);
console.log(fruits); // ['수박', '바나나'];
console.log(removed); // ['망고', '두리안'];- 예제5. 1번 index 포함 이후의 모든 요소 제거
let fruits = ['수박', '바나나', '망고', '두리안'];
let removed = fruits.splice(1);
console.log(fruits); // ['수박'];
console.log(removed); // ['바나나', '망고', '두리안'];3. 원본 배열을 변경하지 않고 참조만 하는 메서드(immutable)
1) slice()
-
slice메서드는substring과 동일하게 동작하며, 배열로부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용되는 메서드이다. -
substring과는 달리slice메서드는 음수인 인수를 전달할 수 있으며, 음수인 인수를 전달하면 대상 문자열의 가장 뒤에서부터 시작하여 문자열을 잘라내어 반환한다. -
첫 번째 인자로 시작 인덱스, 두 번째 인자로 종료 인덱스를 받으며, 시작 인덱스 부터 종료 인덱스 바로 앞까지의 값을 복사하여 반환한다.
- 기본 문법
arr.slice([begin[, end]])
begin: 추출 시작점에 대한 인덱스
- 시작 인덱스가 없거나 0일 경우 0번째 인덱스부터 마지막 인덱스까지 전부 추출한다. -> 원본 배열 그대로 추출
- 음수를 지정할 경우 배열의 끝에서부터의 길이를 나타낸다.
- 배열의 길이와 같거나 큰 수를 지정한 경우 빈 배열을 반환한다.end: 추출을 종료할 기준 인덱스(end를 제외한(end 이전의) 인덱스까지만 추출)
- 종료 인덱스가 없거나 0일 경우 시작 인덱스부터 배열의 끝까지 추출한다.
- 음수를 지정한 경우 배열의 끝에서부터의 길이를 나타낸다. (slice(2, -1)를 하면 세 번째부터 끝에서 두 번째 요소까지 추출)
- 배열의 길이와 같거나 큰 수를 지정한 경우 배열의 끝까지 추출한다.
let arr = ['a', 'b', 'c', 'd', 'e', 'f'];
let arr1 = arr.slice(); // ['a', 'b', 'c', 'd', 'e', 'f']
let arr2 = arr.slice(4); // ['e', 'f']
let arr3 = arr.slice(0, 4); // ['a', 'b', 'c', 'd']
let arr4 = arr.slice(4, 4); // []
let arr5 = arr.slice(3, 20); // ['d', 'e', 'f']
let arr6 = arr.slice(2, 0); // []
let arr7 = arr.slice(10, 1); // []
let arr8 = arr.slice(-3); // ['d', 'e', 'f']
let arr9 = arr.slice(-3, -1); // ['d', 'e']
let arr10 = arr.slice(-3, 2); // []
let arr11 = arr.slice(-3, 4); // ['d']
2) concat()
- 해당 배열의 뒤에 인수로 전달받은 배열을 합쳐서 새로운 배열을 반환한다.
let arr1 = new Array ("배열 1", "배열 2");
let arr2 = new Array ("배열 3", "배열 4");
let arr = arr1.concat(arr2);var test1 = [1, 2, 3];
var test2 = [4, 5, 6];
console.log(test1.concat(test2)); // [1, 2, 3, 4, 5, 6]3) join()
- 배열의 모든 요소를 하나의 문자열로 반환한다.
- 인수로 전달받은 문자열은 배열 요소 사이를 구분 짓는 구분자로 사용되며, 인수가 없으면 기본값으로 쉼표(
,)를 구분자로 사용한다.
const arr = ['바람', '비', '물'];
console.log(arr.join()); // 바람,비,물
console.log(arr.join('')); // 바람비물
console.log(arr.join(' ')); // 바람 비 물
console.log(arr.join('-')); // 바람-비-물4. 원본 배열을 반복적으로 참조하는 메서드
1) indexOf()
- 배열에서 지정된 요소를 찾을 수 있는 인덱스를 반환하고 존재하지 않으면 -1을 반환한다.
- 요소를 검색할 때 대소문자를 구분한다.
let words = ["Radagast", "the", "Brown"];
word.indexOf('the'); // 1
word.indexOf('Radagast'); // 0
word.indexOf('Brown'); // 2
word.indexOf('없는단어'); // -1- 배열 안에 특정 요소가 존재하는지에 대한 검사
let words = ["Radagast", "the", "Brown"];
word.indexOf('Brown'); !== -1 // true
word.indexOf('없는단어') !== -1 // false- 배열 안에 특정 요소가 존재하는지에 대한 검사를 하는 함수
function hasElement(arr, element) {
let isPresent = arr.indexOf(element) !== -1;
return isPresent;
}
hasElement(words, 'Brown') // true
hasElement(words, '없는것') // false2) includes()
- 배열이 특정 요소를 포함하고 있는지를 반환한다.
let words = ["Radagast", "the", "Brown"];
word.inclueds('Brown'); // true
word.inclueds('없는단어'); // false