자바스크립트 배열 컨트롤 중급편 1/2

 

자바스크립트 배열 컨트롤 중급 편 1/2

 

 

 

자바스크립트의 배열은 프로그래밍에서 매우 중요한 데이터 구조이다. 배열은 여러 개의 항목을 하나의 변수에 저장할 수 있어서 데이터를 효율적으로 관리할 수 있게 해 준다. 기본적인 배열의 사용법부터 시작해서, 배열의 다양한 고급 기술들에 대해 알아보도록 하자. 배열을 다루는 다양한 메서드와 기술들을 통해 보다 효율적이고 강력한 코드를 작성하는 방법에 대해 알아보도록 하겠다. 함께 자바스크립트 배열의 매력에 빠져보자!

 

자바스크립트 배열 관련 함수 1/2

 

728x90

 

먼저 이번 글에서 다를 배열 관련 함수들의 목차는 다음과 같다

 

배열 관련 함수들

✔ concat() ✔ push() ✔ unshift() ✔ pop() ✔ shift() ✔ reverse() ✔ join() ✔ sort() ✔ indexOf()

 

 

위의 함수들 이에도 더 있으나 이번 글에서는 위 9가지 함수에 대해서 예제와 함께 알아보도록 하겠다.

 

 

 

concat()

 

"concat"은 "concatenate"의 줄임말로, 이 메서드를 사용하면 두 배열을 하나로 결합할 수 있다. 즉, 기존의 배열에 다른 배열을 이어붙여 새로운 배열을 만들어낼 수 있다. 이를 통해 배열을 효율적으로 결합하고, 데이터를 조작하거나 조합하는 데 유용하게 활용할 수 있다. 이러한 배열 메서드를 통해 자바스크립트에서 강력하고 유연한 데이터 다루기를 경험해 볼 수 있겠다.

 

var colors = [ "검정", "흰색", "파란"];
var colors2 = [ "녹색", "노란", "보라"];

document.write (colors.concat (colors2));
// 출력 : 검정, 흰색, 파란, 녹색, 노란, 보라

 

결과화면 :

자바스크립트 concat() 결과

 

 

 

push()

"push" 메서드는 기존의 배열에 새 항목을 추가할 때 사용할 수 있다. 이를 통해 하나의 항목 또는 여러 항목을 배열의 끝에 추가할 수 있다. 이는 배열을 동적으로 확장하거나, 새로운 데이터를 추가함으로써 데이터 구조를 유연하게 유지할 수 있는데 도움이 된다. 따라서 "cpush" 메서드는 배열을 다루는데 있어서 매우 유용한 기능 중 하나로 활용될 수 있다.

 

var colors = [ "검정", "흰색", "파란"];
colors.push ( "녹색", "노란");
document.write (colors);
// 출력 : 검정, 흰색, 파란, 녹색, 노란

 

결과화면 :

자바스크립트 push() 결과

 

 

 

unshift()

 

"unshift()" 메서드는 "push()"와 유사하면서도 약간 결이 다르다. "push()" 메서드는 배열의 오른쪽 끝에 새 항목을 추가하는 반면, "unshift()" 메서드는 배열의 왼쪽 끝(즉, 처음)부터 항목을 추가한다. 이를 통해 배열의 시작 부분에 새로운 항목을 추가할 수 있어서, 배열의 구조를 유지하면서도 새로운 데이터를 쉽게 삽입할 수 있다.

 

 

var colors = [ "검정", "흰색", "파란"];
colors.unshift ( "녹색");
document.write (colors);
// 출력 : 녹색, 검정, 흰색, 파란

결과화면 :

자바스크립트 unshift() 결과

 

 

 

 

pop()

 

"pop()" 메서드는 "push()"와는 반대로 작용하는데, 배열의 마지막 요소를 삭제한다. 이 메서드를 사용하면 배열에서 마지막 항목을 제거할 수 있어서, 배열의 길이를 줄이거나 더 이상 필요하지 않은 데이터를 제거하는 데 유용하다고 할 수 있겠다. "pop()"을 사용하면 배열의 구조를 유지하면서도 마지막 요소를 효과적으로 제거할 수 있다.

 

var colors = [ "검정", "흰색", "파란"];
colors.pop();
document.write (colors);
// 출력 : 검정, 흰색

결과화면 :

자바스크립트 pop() 결과

 

 

 

 

shift()

 

"shift()" 메서드는 "unshift()"와는 반대로 작용하는데, 배열의 첫 번째 요소를 제거한다. 이 메서드를 사용하면 배열에서 첫 번째 항목을 제거할 수 있어서, 배열의 길이를 줄이거나 더 이상 필요하지 않은 데이터를 제거하는 데 유용하다. "shift()"를 사용하면 배열의 구조를 유지하면서도 첫 번째 요소를 효과적으로 제거할 수 있다.

 

var colors = [ "검정", "흰색", "파란"];
colors.shift();
document.write (colors);
// 출력 : 흰색, 파란

결과화면 :

자바스크립트 shift() 결과

 

 

 

 

reserve()

오래 전 카세트테이프 플레이어에는 오토리버스 기능이 있었다.
A면을 모두 재생하면 자동으로 반대로 돌리면서 B면을 재생하는 신박한 기능이었다.
reverse()도 비슷하다. 
"reverse()" 메서드는 배열의 요소들의 순서를 반대로 뒤집어주는 기능을 한다. 이 메서드를 사용하면 배열의 첫 번째 요소가 마지막 요소로, 두 번째 요소가 뒤에서 두 번째 요소로 이동하여 배열이 뒤집히게 된다. 이를 통해 기존 배열의 요소 순서를 거꾸로 만들어주어, 데이터를 역순으로 처리하거나 특정한 순서로 재배치할 때 유용하게 활용된다.

var colors = [ "검정", "흰색", "파란"];
reverseColors = colors.reverse();
document.write (reverseColors);
// 출력 : 파란,흰색,검정

결과화면 :

자바스크립트 reserve() 결과

 

 

 

 

join()

 

JavaScript의 join() 메소드는 배열의 모든 요소를 하나의 문자열로 결합하는 데 사용된다. 이때, 배열의 각 요소 사이에는 지정된 구분자를 넣을 수 있다. 만약 구분자를 지정하지 않으면 기본적으로 쉼표가 사용된다. 결합된 문자열은 새로운 문자열로 반환되며, 기존의 배열은 변경되지 않는다. 이를 통해 배열의 요소들을 특정 문자열로 이어 붙이거나, 원하는 형식으로 출력할 수 있다.

 

var colors = [ "검정", "흰색", "파란"];
joinColors = colors.join();
document.write (joinColors);
// 출력 : 검정,흰색,파란

결과화면 :

자바스크립트 join() 결과

 

 

 

sort()

 

JavaScript의 sort() 메서드는 배열의 요소를 기본적으로 유니코드 코드 포인트 순서로 정렬한다. 이때, 숫자와 문자열이 혼합되어 있을 경우, 숫자는 문자열로 변환되어 정렬된다. 또한, 기본적으로는 사전식으로 정렬되며, 한글 또한 가나다순으로 정렬된다.

또한, sort() 메소드는 기본적으로 배열을 정렬하는데, 이때 원본 배열의 순서가 변경된다. 만약 이러한 동작을 원하지 않는다면, slice() 메서드를 사용하여 사본을 만들어 정렬한 후에 사용하는 것이 좋겠다.

var colors = [ "검정", "흰색", "파란"];
colors.sort();
document.write (colors);
// 출력 : 검정,파란,흰색

결과화면 :

자바스크립트 sort()

 

 

 

 

indexOf()

 

JavaScript의 indexOf() 메소드는메서드는 배열에서 지정된 요소를 찾아 그 인덱스를 반환한다. 만약 배열에 해당 요소가 존재하지 않는다면 -1을 반환한다. 이때, indexOf() 메서드는 배열을 왼쪽(첫 번째 요소부터)에서 오른쪽(마지막 요소까지)으로 검색하며, 해당 요소의 인덱스를 반환한다.

또한, indexOf() 메소드는 두 번째 매개변수를 통해 검색을 시작할 인덱스를 지정할 수 있다. 이를 통해 원하는 범위 내에서 요소를 검색할 수 있다. 만약 두 번째 매개변수를 지정하지 않으면, 검색은 배열의 처음부터 시작한다.

var colors = [ "검정", "흰색", "파란"];
document.write (colors.indexOf ( '파란'));
// 출력 : 2

 

결과화면 :

자바스크립트 indexOf() 결과