[JS/배열/Method/Array] Array를 잘 다루어보자!

JavaScript에서는 Array를 다룰 일이 많았다. React에서도 Map,filter,find 같은 메서드는 자주쓰기 때문에, 한번 쯤은  정리를 해야겠다 싶어, 이번 기회에 10개정도를 연습해보려고 한다!

배열을 문자열로 변경하기 (Join)

처리를 할 때는 배열형태가 좋지만, 마지막에 출력할 때는 결국 String형태로 바꿔야하는 경우가 자주있다. 즉 , 특정 배열을 모두 문자열로 나타내어, 출력하는 상황이 자주 발생한다. 

// make a string out of an array
const Target = ["i","love","you"]

join()

• 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.
• 반환: String을 반환합니다.
• 사용방법: array.join([seperator]) , seperator는 구분자로, 어떤 구분자로 배열을 합칠지를 의미합니다.

const arr=["i","love","you"]

const res1= arr.join(",") //expected "i,love,you"
const res2= arr.join("|") //expected "i|love|you"

console.log(res1)
console.log(res2)

문자열을 배열로 변경하기 

반대로, 문자열 입력을 받아서 배열로 변경하고 싶을 때가 있다. 즉 , 문자열을 프로래머가 처리를 위해, 배열로 변환하고 싶을 때, 이용하면 좋다.

//make a array out of string
const str = "i love you"

split()

• String 객체를 지정한 구분자/정규식을 이용하여, 여러 개의 문자열로 나눕니다.
• 반환 : Array를 반환합니다.
• 사용방법 : string.split(sperator)

const str = "i love you"

const res = str.split("") //expected ["i"," ","l","o","v","e"," ","y","o","u"]

const res2 =str.split(" ") //expected ["i","love","you"]
const res3 = str.split() //expected ["i love you"]

배열 뒤집기 

// make resversed array! 
const arr = [1,2,3,4,5]

배열의 순서를 뒤집고 싶은 상황은 흔합니다. 예를들어, 쇼핑몰에서 가격이 낮은 순 , 가격이 높은 순과 같이 배열의 순서를 완전히 뒤집는 기능이 있습니다.

reverse()

• 배열의 순서를 반전합니다.
• 반환: 해당 배열을 반전시킵니다. 
• 사용방법: variable = Array.reverse()

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

arr.reverse() //expected [5,4,3,2,1]

배열 수정하기

배열의 내부를 수정하고 싶을 때가 있습니다. 이때, 유용하게 쓸 수 있는 메서드들이 있습니다.  

const arr=[1,2,3,4,5,6] // expected [3,4,5,6]

slice()

일부만 사용하고 싶을 때, 유용하게 사용할 수 있습니다. 혹은 shallow copy를 할 때 이용할 수 있습니다.

• 어떤 배열의 begin부터 end까지 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.
• 원본배열은 바뀌지 않습니다.
• 사용방법: arr.slice(start,[end]) , 이때, end의 숫자는 범위에 포함되지 않습니다.

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

const sarr= arr.slice(2,4); //expected [3,4]

* 얕은복사(shallow copy) vs 깊은복사(deep copy)

얕은 복사는 객체의 참조값을 복사하고, 깊은 복사는 객체의 실제 값을 복사하게 됩니다.

1차원 배열같은 경우에는 , 둘의 차이가 거의 보이지 않습니다. 하지만 , 2차원 배열 즉 객체 안의 객체가 있는  "중첩"구조가 있는 객체인 경우에 둘은 극명한 차이를 띄게 됩니다.

얕은복사
 slice,spread 연산자를 이용하여 복사하는 방법입니다. 객체 안에 있는 원시값들은 깊은 복사가 기본이기 때문에, 원시값을 수정하는 것은 상관이 없습니다. 원본배열이 바뀌지 않습니다. 하지만, 객체 안의 객체를 수정할 때는, 원본 객체의 참조값을 그대로 갖고있기 때문에, 그 연결까지는 끊어지지 않습니다.

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


const copyArr= arr.slice()

const copyNestedArr= nestedArr.slice()

copyArr[0] = 10;
console.log(arr) // [1,2,3,4,5,6]
console.log(copyArr) //[10,2,3,4,5,6]

copyNestedArr[4][0] = 1

console.log(nestedArr) // [1,2,3,4,[1,6]]
console.log(copyNestedArr) // [1,2,3,4,[1,6]]

깊은복사
JSON.parse && JSON.stringify를 이용하거나, loadsh와 같은 라이브러리를 이용할 수 있습니다. JSON.stringify()는 객체를 Json문자열로 변환하는 과정에서, 원본 객체와의 참조관계가 다 끊어지게 됩니다.

//이번에는 object

const obj = {
	one:"one",
    numbers:{
    	one:1,
        two:2,
    },
    arr:[1,2,3,[4,5]]
}


const copy = JSON.parse(JSON.stringify(obj));

copy.numbers.one =3;
copy.arr[3].push(6)

console.log(obj) //{one:"one" , numbers:{one:1,two:2},arr:[1,2,3,[4,5]]}

console.log(copy) //{one:"one",numbers:{one:3,two:2},arr:[1,2,3,[4,5,6]]}​

splice()

• 배열의 기존요소를 삭제 또는 교체 또는 새요소를 추가할 수 있습니다.
• 반환: 제거한 요소들을 반환하게 됩니다.
• 배열을 "수정"합니다.

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

const dArr = arr.splice(1,2) 
// expected dArr : [2,3]
// expected arr : [1,4,5]

 

Refer

엘리님의 JS 10가지 유용한 배열 함수들