배열 정리.js(20211227)

홍륜건·2021년 12월 27일
0

1.자바스크립트 배열은 실제로는 객체라서 어떤 자료형도 넣을 수 있다.
같은 자료형이 아니라도 그룹핑이 가능.
예를 들어

const Array = ['apple',3,undifined,[1,4,7,2]
,null,{name: '민수',day:'1227'},3.12423]

문자열, 정수, 실수, 배열, 객체, undefined,null 등 여러 자료형을 넣을 수 있다.
js의 배열은 '객체'이기 때문!

2.배열선언시 크기 지정하지 않고, 동적으로 배열요소를 추가 할 수 있다.

const fruit = []
fruit[0] = 'apple'
fruit[1] = 'banana'

배열크기를 지정하려면 쉼표를 사용하면 된다.

const car = [,,,]

3.Array 생성자 함수를 사용하여 배열을 생성할 수 있다. new키워드를 사용.

빈 배열을 선언하면서 배열 크기만 지정
const animal = new Array(5)

선언과 동시에 함수 인자를 할당
const tea = new Array('녹차','홍차','마테차')

4.배열의 CRUD(생성,조회,수정,삭제)

const arr = []

생성
arr[0] = 'a'
arr[1] = 'b'
arr[2] = 'c'

조회
for(let i=0;i<arr.length;i++){
console.log(arr[i])
}
for(indx in arr){//for ~in문은 배열의 인덱스 값
console.log(arr[index])
}
for(value in arr){//for ~in문은 배열 각각의 값
console.log(arr[index])
}

수정
arr[1] = 'd'

삭제
delete arr[1]

5.배열 참조
const movies = ['Harry Potter', 'Indiana Jhones', 'Jurassic Park', 'Iron man', 'Spider man']
const fruits = ['apple', 'banana', 'orange']

const movies_copied = movies

movies_copied는 movies가 가리키는 배열 주소값을 참조한다.
js에서는 배열의 주소값에 접근 하는 것은 불가능 하다. js가 동적으로 값을 부여하기 때문.

레퍼런스 값을 변경하려면 다른 주소값을 할당하면 된다.
movies_copied = fuits

null 값을 주면 주소값을 삭제한다.
movies[2] = null

6.얕은 복사
원본 배열을 변경하면 복사한 배열도 동일한 값을 가진다. 왜냐하면 배열의 주소가 동일하기 때문이다.

스프레드 연산자(...)를 사용하면 원본 배열을 복사할 수 있다.
새로운 배열이 생성되기 때문에 원본과 복사한 배열의 주소값이 다르다.
이렇게 복사한 배열은 수정을 하여도 원본은 변경되지 않아 독립적으로 사용가능 하다.
movies_copied = [...movies] //스프레드 연산자

위에 스프레드 연산자를 사용하면 배열을 복사 할 수 있지만, 이는 얕은 복사(shallow copy)다.
만약 객체 안에 객체가 있을 경우 한개의 객체라도 원본 객체를 참조 하고 있다면 이를 '얕은 복사' 라고 한다.

얕은 복사를 하는 방법으로는
object.assign() 혹은 스프레드 문법등이 있다.

const arr = [1,2,[3,4]]
const copied = Object.assign([].arr)//object.assign()

checker(arr, copied) // true
copied[2].push(5)
checker(arr, copied) // true

object.assign()은 첫번째 요소로 들어온 객체에 다음인자로 들어온 객체를 복사해준다.
checker로 확인해보면 copied[2]의 값에 5를 집어넣어도 둘의 값이 모두 바껴서 두배열이 같다고 나온다.

7.깊은 복사
깊은 복사는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 만한다.

깊은 복사의 방법으로는 JSON.parse()&JSON.stringfy() 메소드 사용과 재귀함수를 이용한 복사 그리고 Lodash와 Ramda가 있다.

const arr = [1, 2, [3, 4]];
const copied = JSON.parse(JSON.stringfy(arr))

checker(arr, copied) // true
copied[2].push(5)
checker(arr, copied) // false

JSON.parse는 스트링 포멧을 js오브젝트로 변화해 주고
JSON.stringfy 는 js 오브젝트를 스트링 포멧으로 변환해 준다.

이는 문자열로 변경 후 그것을 다시 해석해 원본 객체로 변경하는 과정에서 문자열 데이터 타입이 불변성의 형질을 띠는 원시 타입이기 때문이다.

원시 타입은 복사 할 때 복사된 값을 다른 메모리에 할당 하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치치 않는다.

원시타입
-Number
-String
-Boolean
-Null
-Undefined

다만 JSON을 사용할 때 깊은 복사가 불가능 한 타입들이 있다.
함수(functions), Date객체, 정규표현식, Infinity 등등의 데이터는 복사 되지 않고 유실된다. 또한 속도가 느리다는 단점도 있다.

재귀 함수를 이용한 복사의 방법은
const obj = [1, 2, [3, 4]]

function copyObj(obj){
const result = {}
for(let key in obj){
if(typeof obj[key] === 'object'){//obj[key]의 값이 object 이면
result[key] = copyObj(obj[key])//함수를 다시 불러 와서 한번 더 복사한다.
}else{
result[key] = obj[key]//아니라면 그냥 복사한다.
}
}return result
}
const copiedObj = copyObj(obj);

profile
초보 개발자 지망생

0개의 댓글