[혼공단] 혼자 공부하는 자바스크립트, 3주차 미션

Hyemin_12·2022년 7월 18일

혼공단

목록 보기

3/6

혼공JS 3주차 미션 : 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기

벌써 3주차에 접어든 혼공단..!! 아직까지 꾸준히 하고 있다는 사실이 놀랍고.. 앞으로도 열심히 해야겠다는 생각이 든다. ᑦ(⁎˙ ▿ ˙)ᐣ

기본 미션

3주차의 기본 미션은 비파괴적 처리와 파괴적 처리의 의미와 장단점을 설명하기이다.
비파괴적 처리와 파괴적 처리는 처음 들어본 단어라 매우 생소하게 느껴져서 더욱 열심히 공부했다.

먼저 비파괴적 처리와 파괴적 처리는, 자바스크립트의 자료 처리 연산자, 함수, 메소드를 처리 후 원본의 상태 변화에 따라 구분하는 것을 의미한다.

비파괴적 처리

비파괴적 처리는 처리 후에 원본 내용이 변경되지 않는다.
자료를 보호할 수 있다.
메모리를 많이 차지한다.

// 변수 선언
const a = "안녕"
const b = "하세요"

// a와 b를 + 연산자를 이용하여 연결
const c = a + b

console.log(c) // 안녕하세요

//원본의 내용이 변경되지 않음
console.log(a) // 안녕
console.log(b) //하세요

위 코드를 실행해 보면, 각각의 변수 a와 b에 저장되어있는 "안녕"과 "하세요"를 + 연산자를 사용하여 "안녕하세요"라는 하나의 문자열로 연결하였지만, 이 연결한 문자열을 c에 저장하여 a와 b의 원본 내용은 바뀌지 않았음을 알 수 있다.

파괴적 처리

파괴적 처리는 처리 후에 원본 내용이 변경된다.
메모리를 절약할 수 있다.
원본이 사라지기 때문에 위험하다.

// 변수 선언
const array = ["사과", "배", "바나나"]

console.log(array) // ["사과", "배", "바나나"]

// push => 배열의 뒷부분에 요소를 추가하는 메서드
array.push("귤")

// 원본인 array의 내용의 변경됨
console.log(array) // ["사과", "배", "바나나", "귤"]

위 코드를 실행해 보면, 배열 array에 요소를 추가해주는 push 메서드를 이용하여 귤을 추가해주며, 그 후 array를 출력하여 보면 원본인 array에 귤이 추가된 것을 볼 수 있다.

선택 미션

3주차 선택 미션은 p.173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기이다.

3-1

// 변수 선언 
const strA = "사과, 배, 바나나, 귤"
console.log(strA) // 사과, 배, 바나나, 귤

// split => 문자열을 나누어주는 메서드
console.log(strA.split(",")) // ["사과", "배", "바나나", "귤"]

// 원본 확인
console.log(strA) // 사과, 배, 바나나, 귤

split 메서드를 통해 문자열을 나눠주고, 그걸 출력했을 때에는 strA가 배열로 나오지만, 원본을 출력했을 때에는 문자열로 나오고 있음을 알 수 있다. 원본의 내용을 변경하지 않았으므로 비파괴적 처리이다.

3-2

// 변수 선언 
const arrayB = ["사과", "배", "바나나", "귤"]
console.log(arrayB) // ["사과", "배", "바나나", "귤"]

// 맨 뒤에 "감" 추가
console.log(arrayB.push("감")) // 5(다섯번째 자리에 있으므로)

// 원본 확인
console.log(arrayB) // ["사과", "배", "바나나", "귤", "감"]

push 메서드를 통해 배열 뒤에 요소를 추가할 때는 원본의 내용이 변경 되었음을 알 수 있으므로 파괴적 처리이다!

3-3

// 변수 선언 
const arrayC = [1, 2, 3, 4, 5]
console.log(arrayC) // [1, 2, 3, 4, 5]

// 요소를 요소 * 요소로 변경
console.log(arrayC.map((x) => x * x)) [1, 4, 9, 16, 25]

// 원본 확인
console.log(arrayC) // [1, 2, 3, 4, 5]

위 코드에서 먼저 map은 배열 내의 모든 요소를 돌며 주어진 함수의 결과를 모아 새로운 배열을 리턴하는 함수이다. 형식은 map((값) => { return 실행문}) 이며 실행문이 하나일 경우, map((값) => 실행문) 이렇게 줄일 수 있다. ヾ(@°▽°@)ノ
map을 사용하여 출력했을 때에는 제곱된 수가 출력되지만, 원본을 출력하면 내용이 변경되지 않았으므로 비파괴적 처리이다.

3-4

// 변수 선언 
const strD = " 여백이 포함된 메시지  "
console.log(strD) //  여백이 포함된 메시지  

// trim => 문자열의 양쪽 공백을 제거해주는 메서드
console.log(strD.trim()) // 여백이 포함된 메시지

// 원본 확인
console.log(strD) //  여백이 포함된 메시지