상세 컨텐츠

본문 제목

혼공 자바스크립트 3주차 (파괴적처리, 비파괴적처리)

혼공단/js

by nownow 2023. 7. 20. 19:53

본문

벌써 3주차까지 왔다.

3주차 기본미션으로는 이론적인 질문이 나왔다.

비파괴적 처리와 파괴적 처리에 대한 내용인데, 잘 모르는내용이다..

a와 b 문자열을 만든뒤 c에 둘을 붙인것을 저장해서 모두 출력해보면 위와 같다.

a와 b 모두 원본내용이 변하지 않고, 둘의 원본이 복사된 것이 합쳐져 c에 저장된다.

이렇게 처리 후 원본이 변경되지 않는 것이 비파괴적 처리다.

 

이번엔 이경우를 한번 보자.  원본 배열 arr을 두번 출력하고 있고 사이에 push 연산이 존재한다.

배열에 항목을 하나 추가하는 처리를 했으므로 원본이 변한다. 

이렇게 처리로 인해서 원본이 바뀌는 경우를 파괴적처리 라고 한다.

 

둘의 차이를 생각해보면

비파괴적 처리의 경우, 원본을 복사해서 다른 변수에 사용하기 때문에

메모리 사용량이 늘어나게 된다. 그렇지만 원본은 유지되므로 잘못된 연산을 해도 원본이 보존된다.

 

파괴적 처리의 경우, 원본을 사용해서 처리하고 바꾸기 때문에

원본을 복사하거나 하지 않아 메모리 사용량은 크지않지만, 잘못된 연산을 통해 필요한 원본을 유실할 수 있게된다.

  파괴적처리 비파괴적처리
메모리사용량 (배열 case) 더 적다 더 크다
원본 유실가능성 O X

현대에는 메모리가 꽤 여유로우므로 원본을 보존할 수 있는 비파괴적 처리로 많이 표준화가 되고 있다고 한다.

메모리의 크기에 제약이 있는 임베디드 개발같은 경우에서는 배열형태를 사용할 때 파괴적 처리를 해야하지 않을 까 싶다.

 

자바스크립트에서 배열을 사용한 파괴적,비파괴적 처리의 예시는 아래와같은 경우가 있다.

splice는 원본을 사용해서 원본 배열의 항목을 삭제하고 (파괴적처리)

slice는 원본에서 일정 부분을 반환하여 새로운 변수에 저장한다. (비파괴적처리)

 

 

선택과제

위 예시의 경우에는 구분자가 포함된 문자열을 받아 배열로 나누는 split을 사용하는 경우다.

strA 문자열로 split 메서드를 사용한 경우. 원본이 배열로 바뀌지 않고 (두번째출력 확인)

배열로 변환된 모습이 반환되는 것은 확인할 수 있다.

이경우 비파괴적 처리이다.

push의 경우에는 원본 배열에 값이 추가되어서 원본이 바뀌었다.

파괴적처리

map 함수로 명시된 조건에 따라 배열의 값을 바꾼다.

바꾸어진 값을 반환해주지만 원래 배열이 바뀌지는 않는다. 비파괴적처리.

문자열 전, 후 로 여백을 지워주는 trim 메서드를 사용할때도 적용된 값을 반환하고 원본은 바뀌지않는

비파괴적 처리다.

 

함수 인자로 데이터를 주는 call by value가 비파괴적 처리

함수 인자로 변수의 주소를 주어 원본에 변화를 줄 수 있는 call by reference가 파괴적 처리로 연결되는 것 같다.

 

 

오늘 내용에

추가로 읽어볼 블로그 포스팅

https://velog.io/@zeebeck/%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B3%B5%EC%82%ACcopy%EC%97%90%EB%8F%84-%EA%B9%8A%EC%9D%B4%EA%B0%80-%EC%9E%88%EB%8B%A4

 

데이터 복사(copy)에도 깊이가 있다?

이 내용은 자바스크립트 객체를 공부하던 중 아래 내용으로 부터 시작되었다.객체는 메모리를 효율적으로 사용하기 위해, 그리고 객체를 복사해 생성하는 비용을 절약하여 성능을 향상시키기

velog.io

user와 user2 모두 해당 객체를 가리키고 있는 변수(포인터)

user와 user2는 각각 생성된 두개의 객체(주소가 다르다)를 각각 가리키는 변수(포인터)

해당 객체 속의 값으로 비교했고 그럼 같은문자열이므로 true 반환.

관련글 더보기