[javascript] 배열 요소를 추출하기

배열 요소, 또는 일부를 가져와 사용할 필요가 있는 경우 사용하는 배열 요소 추출 메서드들에 대해 알아봅니다.

원본 배열의 요소를 제거하고 반환하는 메서드들도 있으므로 사용시 주의해야 합니다.

앞에서 하나씩 추출하기

shift() 메서드를 사용합니다. 

한번에 1개의 요소를 배열 앞에서 추출하며, 가져온 요소는 원본 배열에서 삭제됩니다.

const str1 = ['펭수', '라이언', '어피치'];
shiftret = str1.shift(); // '펭수' 를 반환
console.log(shiftret); // '펭수' 를 가진 문자열 변수. typeof로 ret를 확인하면 string 타입임.
console.log(str1); // '펭수' 요소가 빠진 나머지 배열이 됨.
//2개를 다시 추출
str1.shift();str1.shift();
console.log(str1);//빈 배열이 됨.
console.log(str1.shift());//빈 배열에서 다시 추출을 하려고 하므로 undefined를 반환함

뒤에서 하나씩 추출하기

pop() 메서드를 사용합니다.

한번에 1개의 요소를 배열 뒤에서 추출하며, 가져온 요소는 원본 배열에서 삭제됩니다.

const str2 = ['펭수', '라이언', '어피치'];
popret = str2.pop(); // '어피치' 를 반환
console.log(popret); // '어피치' 를 가진 문자열 변수. typeof로 ret를 확인하면 string 타입임
console.log(str2); // '어피치' 요소가 빠진 나머지 배열이 됨.
//2개를 다시 추출
str2.pop();
str2.pop();
console.log(str2);//빈 배열이 됨.
console.log(str2.shift());//빈 배열에서 다시 추출을 하려고 하므로 undefined를 반환함

특정 위치의 요소를 추출하기

slice() 메서드를 사용하며, 앞의 두 메서드와 달리 여러 개의 요소를 한꺼번에 추출할 수 있습니다.

인자로 시작 인덱스와 끝 인덱스 2개를 받아 인덱스 사이의 배열 요소를 추출합니다.

shift(), pop() 과 달리 원본 배열이 그대로 유지됩니다.

!주의할점

시작 인덱스 위치의 요소는 포함되고, 끝 인덱스의 요소는 포함되지 않습니다.

slice()의 반환값은 항상 배열이며, 반환할 요소가 없는 경우 빈 배열을 반환합니다.

끝 인덱스는 시작인덱스보다 커야 합니다. 그렇지 않을 경우 빈 배열을 반환합니다.

const str3 = ['펭수', '라이언', '어피치', '콘', '브라운', '무지'];
const sliceret = str3.slice(1,4); // ["라이언", "어피치", "콘"] 을 반환
console.log(sliceret);console.log(str3);console.log(str3.slice(0,10)); //배열 길이를 초과할 경우 끝 요소까지만 반환
console.log(str3.slice(10,0)); //반환할 배열이 없으므로 빈배열을 반환