[JS/Basic/배열/Array] 자바스크립트의 배열

자바스크립트에는 "key - value"쌍을 이루는 강력한 객체리터럴이 있습니다. 하지만, 개발을 하다보면 첫 번째, 두 번째, 세 번째 등 "순서"가 중요한 순간이 있습니다. 그리고, 정렬을 위해서도 순서는 중요하게 됩니다.

 

 순서가 있는 데이터들의 집합을 다룰 때, 객체를 이용하면 손해입니다. 왜냐하면, 객체는 순서를 보장하지 않고 순서와 관련된 메서드가 보장되어있지 않습니다. 그리고, 배열은 프로그래밍 언어라면 무조건 갖고있다고 생각해도 무방합니다.

배열 (Array)

배열은 선언방법은 기본적으로 2가지 입니다.

• new 연산자를 이용하는 방법
• 대괄호를 이용하는 방법

const arr = [];
const arr1 = new Array();

배열의 접근방법

배열은 "인덱스"를 통해서 , 접근이 가능합니다.  그리고 시작은 0 부터입니다.

const articles = ["New York Times","Wall Street Journal","LA Times","USA Today"]

console.log(articles[0]) //NYtimes
console.log(articles[1]) //Wallstreet
...

배열의 메서드 

배열은 기본적으로 다양한 매서드들을 가지고 있습니다. 몇가지는 아주아주 자주 쓰이고, 유용하게 쓰이니까 확실하게 익혀봅시다!

 

Push , Pop , Shift , unshift

• 배열의 데이터를 관리하기 위한 메서드입니다. 그림으로 나타내면 직관적으로 이해하기 쉬워집니다.
• unshift , push는 "배열에 데이터를 넣는 함수"입니다.
• shift,pop은 "배열에 데이터를 빼는 함수"입니다. 

0이 배열의 앞이고, 5가 배열의 마지막 부분입니다.

Shift,unshift와 push,pop의 차이점

• Shift,unshift는 배열의 맨앞에서 연산이 일어나므로, 나머지 배열들을 옮겨주는 추가적인 연산이 필요해집니다. 코드로 보면 직관적입니다.
• Push/Pop은 배열의 맨 뒷공간에 넣고, 빼는거라서 연산이 상대적으로 빠릅니다.

See the Pen Array by Doge (@DogeIsFree) on CodePen.

 

 

 

 

length

• 배열의 길이를 반환합니다. 상당히 심플하면서 강력한 친구입니다.

slice,splice,concat

• 배열을 이용한 연산을 합니다. 배열을 자르거나, 배열의 일부분을 빼거나, 배열끼리 합치는 연산을 합니다.
• slice는 Shallow Copy(얕은 복사)를 하고, 새로운 배열을 반환합니다. 배열을 복사할 때 이용될 수 있습니다.

const arr=[1,2,3,4,5]
//slice[start,end) 
console.log(arr.slice(2,5)) //[3,4,5]

const copyArr = arr.slice() // shallow copy

• splice는 배열의 특정위치에 요소를 추가하거나 ,삭제할 수 있습니다. 원본의 배열을 바꿉니다.

//splice(index,제거할 요소 갯수, 배열에 추가될 요소)
const arr=[1,2,3,4,5,6,7]
arr.splice(3,2) //3번째 인덱스부터, 2개 삭제. [1,2,3,6,7]

const arr1=[1,2,3,4,5,6,7]
arr1.splice(2,1,"three") // [1,2,"three",4,5,6,7]

• concat은 다수의 배열을 합치고, 병합된 배열의 사본을 반환합니다.

const arr=[1,2,3]
const arr1=[4,5,6]
const arr2 = arr.concat(arr1);
console.log(arr2); //[1,2,3,4,5,6]

 

forEach

• 배열의 각 원소별로 callback함수를 실행합니다. 주로, 배열들을 순회할 때 사용합니다. 따로 배열을 반환하지 않습니다.

const fruits=["사과","바나나","딸기","수박","참외","멜론"];
// foreach 문법 
// arr.forEach((element,index,arr) =>{})
fruits.forEach((el,idx,ar)=>{
	console.log("요소:",el);
    console.log("인덱스:",idx);
    console.log("원본배열:",ar);
})

sort ,reverse

• 자바스크립트 배열에 내장되어있는 정렬방법입니다.
• 특이하게, compare식을 이용하는데, compare식은 다소 복잡해질 수 있기 때문에, 오름차순 , 내림차순 정도만 다루겠습니다.
• compare식을 비워놓는다면, unicode를 기준으로 정렬합니다.

const arr=[1,2,10,6]
//오름차순
arr.sort((a,b)=>a-b)
//내림차순
arr.sort((a,b)=>b-a)

toString,join

• 배열을 문자열로 나타내기 위해서 쓰이는 메서드입니다.
• 배열은 문자열을 담기위해서 많이 쓰이기도 합니다. ["안녕하세요","저는","Mapin","입니다"]라는 배열이 있을때, 하나하나 반복하는 것보다, 하나의 메서드로 문자열로 쭉 나타내면 매우 편합니다.

const arr=[1,2,3,4,5] 

console.log(arr.toString()) // 1,2,3,4,5 

console.log(arr.join('')) //12345

 

함수형 프로그래밍편에서 map,filter,reduce는 다 다루어보았습니다. 다음글에서 복습할겸 다시 이번에는 메서드와 제가 구현했던 것과 비교해보겠습니다.

map ,filter ,reduce