배열의 결합
spread_ex05.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열의 결합</title>
<script>
let names = "한놈,두시기,석삼,너구리,오징어,육계장,칠면조,팔다리,구두쇠,쨍그랑".split(",");
let longevitys = "해,산,물,돌,달,소나무,불로초,거북,두루미,사슴".split(",");
// 예전 방식
let new_array1 = names.concat(longevitys);
// 스프레드 연산자 사용
let new_array2 = [...names, ...longevitys];
document.write(`names 배열의 길이 ${names.length}개<br>${names}<hr>`);
document.write(`longevitys 배열의 길이 ${longevitys.length}개<br>${longevitys}<hr>`);
document.write(`new_array1 배열의 길이 ${new_array1.length}개<br>${new_array1}<hr>`);
document.write(`new_array2 배열의 길이 ${new_array2.length}개<br>${new_array2}<hr>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
예전에 배열들을 결합하려면 concat()메서드를 사용해야 됐습니다.
| let new_array1 = names.concat(longevitys); |
하지만 전개 연산자를 사용하면 더욱 간결하게 처리가 가능합니다.
| let new_array2 = [...names, ...longevitys]; let new_array3 = [...names, ...[1,2,3,4],...[9,8,7,6]]; let new_array4 = [...names,11, 22,33,44,55, ....[55,66,77]]; |
배열의 복사
Value and Reference type
모든 데이터 타입은 값 타입(value type) 또는 참조 타입(reference type)을 가집니다.
값 타입(Value type) : 각각의 고유의 메모리를 가집니다.
참조 타입(Reference type) : 생성된 인스턴스들은 주소값을 가집니다.
복사에는 깊은 복사(Deep copy) 와 얕은 복사(Shallow copy) 두가지 종류가 있습니다.
깊은 복사(Deep copy, 값 복사)란?
데이터 자체를 통째로 복사하며 복사된 두 객체는 완전히 독립적인 메모리를 차지합니다. value type의 객체들은 깊은 복사를 하게 됩니다.
얕은 복사(Shallow copy, 주소 복사)란? :
얕은 복사는 아주 최소한만 복사를 수행합니다. 값을 복사한다 하더라도, 인스턴스가 메모리에 새로 생성되지 않고 값 자체를 복사하는 것이 아니라 주소값을 복사하여 같은 메모리를 가리키기 때문입니다.
reference type을 복사하는 경우 얕은 복사가 일어납니다.
새로운 인스턴스를 생성하지 않기 때문에 깊은 복사보다 상대적으로 속도가 빠르지만 하나를 변경하면 주소를 가리키는 모든 변수의 값이 같이 변경됩니다.
spread_ex06.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열의 복사</title>
<script>
let array1 = [1,2,3,4,5,6,7,8,9,0];
// 얕은복사 : 값이 아니라 주소가 복사되었다.
let array2 = array1;
document.write("array1 : " + array1 + "<br>");
document.write("array2 : " + array2 + "<br><br>");
// 두개 모두 변경되었다. 주소가 복사되었다. 얕은 복사이다.
array1[0]=999;
document.write("array1 : " + array1 + "<br>");
document.write("array2 : " + array2 + "<br>");
document.write("<hr>")
// 깊은 복사 : 주소가 아닌 실제 값이 복사된다.
let array3=[];
for(n of array1) array3.push(n); // 비효율적이다.
document.write("array1 : " + array1 + "<br>");
document.write("array3 : " + array3 + "<br><br>");
array1[0]=888;
array3[0]=333;
// 1개만 변경되었다. 새로운 배열이 만들어졌다. 깊은 복사이다.
document.write("array1 : " + array1 + "<br>");
document.write("array3 : " + array3 + "<br>");
document.write("<hr>")
let [...array4] = array1;
let array5 = [...array1];
document.write("array1 : " + array1 + "<br>");
document.write("array4 : " + array4 + "<br>");
document.write("array5 : " + array5 + "<br><br>");
array1[0]=777;
array4[0]=666;
array5[0]=555;
// 1개만 변경되었다. 새로운 배열이 만들어졌다. 깊은 복사이다.
document.write("array1 : " + array1 + "<br>");
document.write("array4 : " + array4 + "<br>");
document.write("array5 : " + array5 + "<br>");
document.write("<hr>")
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
변수에 배열명을 대입하면 주소가 복사되는 얕은 복사가 수행됩니다.
|
let array1 = [1,2,3,4,5,6,7,8,9,0];
//얕은복사 : 값이 아니라 주소가 복사되었다.
let array2 = array1;
document.write("array1 : " + array1 + "<br>");
document.write("array2 : " + array2 + "<br><br>");
//두개 모두 변경되었다. 주소가 복사되었다. 얕은 복사이다.
array1[0]=999;
document.write("array1 : " + array1 + "<br>");
document.write("array2 : " + array2 + "<br>");
|
위와 같은 경우를 방지하기 위해서는 실제 내용이 복사되는 깊은 복사를 수행애야 합니다.
예전방식 : 새로운 빈 배열을 만들고 별도로 하나씩 값을 복사해야 했습니다.
|
// 깊은 복사 : 주소가 아닌 실제 값이 복사된다.
let array3=[];
for(n of array1) array3.push(n); // 비효율적이다.
document.write("array1 : " + array1 + "<br>");
document.write("array3 : " + array3 + "<br><br>");
array1[0]=888;
array3[0]=333;
// 1개만 변경되었다. 새로운 배열이 만들어졌다. 깊은 복사이다.
document.write("array1 : " + array1 + "<br>");
document.write("array3 : " + array3 + "<br>");
|
전개 연산자를 이용한 깊은 복사
|
let [...array4] = array1;
let array5 = [...array1];
document.write("array1 : " + array1 + "<br>");
document.write("array4 : " + array4 + "<br>");
document.write("array5 : " + array5 + "<br><br>");
array1[0]=777;
array4[0]=666;
array5[0]=555;
// 1개만 변경되었다. 새로운 배열이 만들어졌다. 깊은 복사이다.
document.write("array1 : " + array1 + "<br>");
document.write("array4 : " + array4 + "<br>");
document.write("array5 : " + array5 + "<br>");
|
전개 연산자를 이용한 방법이 간단합니다.
배열 뒤집어 복사하기
spread_ex07.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열의 복사</title>
<script>
let names = "한놈,두시기,석삼,너구리,오징어,육개장,칠면조,팔푼이,구급차,십자가".split(",");
document.write(`names 배열의 길이 ${names.length}개<br>${names}<hr>`) // 원본
// 스프레드 연산자 사용
let [first,second] = names.reverse();
document.write(`first : ${first}<br>`)
document.write(`second : ${second}<br>`)
document.write(`numbers 배열의 길이 ${names.length}개 : ${names}<hr>`) // 바뀜
let [last] = [...names].reverse();
document.write(`last : ${last}<br>`)
document.write(`numbers 배열의 길이 ${names.length}개 : ${names}<hr>`) // 유지
let [num1,num2, ...other] = [...names].reverse();
document.write(`num1 : ${num1}<br>`)
document.write(`num2 : ${num2}<br>`)
document.write(`other 배열의 길이 ${other.length}개 : ${other}<hr>`) // 나머지를 배열로 받음
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] Spread Operator(전개 연산자) 함수에서 사용 (2) | 2024.10.17 |
|---|---|
| [JavaScript] Spread Operator(전개 연산자) 객체의 결합/복사 (1) | 2024.10.17 |
| [JavaScript] Spread Operator(전개 연산자) 기본 사용법 (0) | 2024.10.17 |
| [JavaScript] json-server 사용해보기 (6) | 2024.10.17 |
| [JavaScript] Set(중복을 불허하는 컬렉션) 사용하기 (2) | 2024.10.16 |
