혼자 공부하는 자바스크립트 Chapter 04

✅혼자 공부하는 자바스크립트

#	진도	기본 미션	선택 미션
3주차(1/16 ~ 1/24)	Chapter 04	비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기	p.173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기

Chapter 04-1 배열

배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다.
요소는 배열 내부에 있는 값을 말한다.

배열 만들기

배열의 형식
[요소, 요소, 요소, ... , 요소]

배열 요소에 접근하기
각각의 요소에 접근 하려면 배열 바로 뒤에 대괄호 [...]를 입력하고 그 안에 숫자를 넣는다. 자바스크립트는 가장 앞에 있는 욧호를 0번째로 표현하는데, 이때 요소의 순서를 인덱스 라고 부른다.

const numbers = [273, 52, 103, 32]
> numbers[1]
52
> numbers[1 + 1]
103
> numbers[1 * 3]
32

배열 요소 개수 확인하기
배열 내부에 들어있는 요소의 개수를 확인할 때는 배열의 length속성을 사용

const fruits = ['배', '사과', '키위', '바나나'] 
> fruits.length
4

배열 뒷부분에 요소 추가하기
배열 뒷부분에 요소를 추가할 때는 push()메소드를 사용한다.

const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
> todos
(3) ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
> todo.push('저녁 식사 준비하기')
4
> todos
(4) ["우유 구매", "업무 메일 확인하기", "필라테스 수업", "저녁 식사 준비하기"]

인덱스를 사용해 배열 뒷부분에 요소 추가하기

const fruitsA = ['사과', '배', '바나나'] 
> fruitsA[10] = '귤'  -> 배열 10번째 인덱스에 "귤을 추가합니다."
"귤"
> fruitsA
(11) ["사과", "배", "바나나", empty x 7, "귤"] 

인덱스로 요소 제거하기
배열의 특정 인덱스에 있는 요소를 제거할 때는 splice()메소드를 사용한다.

배열.splice(인덱스, 제거할 요소의 개수)

값으로 요소 제거하기

const 인덱스 = 배열.indexOf(요소)
배열.splice(인덱스, 1)

배열의 특정 위치에 요소 추가하기

배열.splice(인덱스, 0, 요소)

Chapter 04-2 반복문

for in 반복문 배열의 인덱스를 기반으로 반복할 때 사용

const 배열 = [ '바나나', '사과', '귤']
for (const 인덱스 in 배열) {
    console.log(인텍스, 배열[인덱스])
} // 0 바나나 1 사과 2 귤

for of 반복문 배열의 값을 기반으로 반복할 때 사용

const 배열 = [ '바나나', '사과', '귤']
for (const 요소 of 배열) {
    console.log(요소)
} // 바나나 - 사과 - 귤

for 반복문 횟수를 기반으로 반복할 때 사용함 (범용적)

for (let i = 0; i < 5; i++){
    console.log(`${i}번째 반복입니다.`)
} // 0번째 반복입니다. 1번째 반복입니다. 2번째 반복입니다. 3번째 반복입니다. 4번째 반복입니다.

"for은 let, for of in은 const"로 외우자!

while 반복문 조건을 기반으로 반복할 때 사용한다. if 조건문과 다른점은 문장을 한 번만 실행하고 끝나는 것이 아니라 불 표현식이 true면 계속해서 문장을 실행한다. 조건이 변하지 않는다면 무한히 반복 실행하므로 조건을 거짓으로 만들 수 있는 내용이 문장에 포함되어 있어야 한다.

while 반복문 사용 예)
1. 결과가 나올 때 까지
2. 특정 시간이 될 때까지
3. 파일을 읽으며 특정 단어를 찾을 때 까지
4. 등등

break swich 조건문이나 반복문을 벗어날 때 사용한다.
continue반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행한다.

기본미션

▶ 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기

비파괴적 처리 : 어떠한 처리 후에 원본 내용이 변경 되지 않는 처리를 의미한다.

장점 원본의 내용이 변경되지 않아서 자료를 보호 할 수 있다.
단점 많은 메모리를 사용하여 절약 할 수 없다.

let a = 10
let b = 20
a + b = 30

a+b를 더하기를하면 10과 20을 더한 30이 나온다. 연산은 원본을 변경하지 않는
비파괴적 처리의 예시이다.

파괴적 처리 : 어떠한 처리 후 원본 내용이 변경되는 처리를 의미한다.

장점 메모리를 절약할 수 있다.
단점 원본이 사라지거나 수정되어 수정되기 전의 데이터를 알지 못한다.

let c = [ 1, 2, 3]
c.push(4)
c => (4) [1, 2, 3, 4]

push()메소드를 사용해서 맨끝에 4를 추가 해보았다.
결과는 c의 요소가 추가되어 총 1.2.3.4가 출력되어 나온것으로
원본이 변경된 것이기 때문에 파괴적 처리를 한다고 볼 수 있다.

처리 후 원본 내용이 변경이 되지 않아 원본을 출력하게 되면 원본 그대로가 나온다.
과거에는 컴퓨터 메모리가 많이 부족하였기 때문에 최대한 절약하기 위해 대부분 '파괴적 처리'를 하였지만 현재는 메모리가 여유로운 상태라 대부분 '비파괴적 처리'를 한다.

선택 미션

▶ p.173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기

1. split을 한다고 해도 원본이 바뀌지 않았으므로 정답은 비파괴적 처리이다

> const strA = "사과,배,바나나,귤"
> strA.split(",")
(4) ["사과","배","바나나","귤"]
> strA
"사과,배,바나나,귤"

2. push("감") 을 하게 되면 내용에 "감"이 추가되면서 원본이 변경되어 파괴적 처리이다

> const arrayB = ["사과", "배", "바나나", "귤"]
> arrayB.push("감")
5
> arrayB
(5) ["사과", "배", "바나나", "귤", "감"]

3. 각자 배열에서 자기 자신을 곱하여 출력하지만 결론적으로 arrayC를 출력하게 되면 원본이 파괴되지 않아 비파괴적 처리이다.

> const arrayC= [1, 2, 3, 4, 5]
> arrayC.map((x) => x * x)
(5) [1, 4, 9, 16, 25]
> arrayC
(5) [1, 2, 3, 4, 5]

4. strD.trim() 을 하여 여백이 사라졌지만 원본이 변경되지 않아 비파괴적 처리이다

> const strD = "  여백이 포함된 메시지   "
> strD.trim()
"여백이 포함된 메시지"
> strD
"여백이 포함된 메시지"