혼자 공부하는 자바스크립트_3주차 정리 및 미션

혼자 공부하는 자바스크립트 3주차

※ 순서

Chp 4. 정리

미션

 

Chp 4. 반복문

■ 배열

• 배열: 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형
  • 요소: 배열 내부에 있는 값
  • [요소, 요소, 요소, ..., 요소]

> const array = [273, 'String', true, function () { }, {}, [273, 103]]
undefined

> array
	(6) [273, "String", true, f, {...}, Array(2)]
     0: 273
     1: "String"
     2: true
     3: f ()
     4: {}
     5: (2) [273, 103]

• 배열 요소에 접근
  • 배열[인덱스]
  • 인덱스: 요소의 순서
  • 가장 첫 번째 요소의 인덱스 = 0
  • 여러 개의 요소를 갖기 때문에 배열의 이름은 복수형으로 짓기
  • 대괄호 내부에 계산식 넣기 가능
• 배열 요소 개수 확인
  • 배열.length
  • 자주 사용하는 패턴: 배열[배열.length - 1] → 배열의 마지막 요소 선택 시
• 배열 뒷부분에 요소 추가
  • push() 메소드 사용
    • 배열.push(요소)
  • 인덱스 사용
    • 배열[인덱스] = 요소
      • 해당하는 인덱스의 자리에 요소가 추가됨
      • 추가된 요소와 기존 요소 사이의 인덱스에 아무 것도 없는 경우 empty가 됨
• 배열 요소 제거
  • 인덱스 기반
    • splice() 메소드 사용
      • 배열.splice(인덱스, 제거할 요소의 개수)
        • 해당 인덱스로부터 정한 개수만큼 요소 제거
      • splice: 접합
        • 일부를 제거한 뒤 붙이는 것
        • 중간에 다른 요소를 넣고 붙이는 것
  • 값 기반
    • indexOf() 메소드 사용
      • const 인덱스 = 배열.indexOf(요소)
      • 배열.splice(인덱스, 1)
        • indexOf() 메소드 통해 값의 위치 추출
        • splice() 메소드 통해 제거
      • 배열 내부에 요소가 있을 경우 인덱스 리턴 ↔ 없을 경우 -1 리턴
      • 문자열의 indexOf() 메소드: 문자열 내부에서 특정 문자열의 위치 찾을 수 있음
• 배열의 특정 위치에 요소 추가
  • 배열.splice(인덱스, 0, 요소)
    • splice() 메소드의 1번째 매개변수: 추가하고 싶은 위치의 인덱스 
    • splice() 메소드의 2번째 매개변수: 0 입력하면 아무것도 제거 X
    • splice() 메소드의 3번째 매개변수: 추가하고 싶은 요소 입력

• 자료의 비파괴와 파괴 → (처리 후 원본의 상태 변화에 따라 구분)
  • 비파괴적 처리: 처리 후 원본 내용이 변경되지 않음
    • ex) '+' 연산자 통해 문자열 연결
  • 파괴적 처리: 처리 후 원본 내용이 변경됨
    • ex) push() 메소드 사용하여 뒷부분에 요소 추가

	비파괴적 처리	파괴적 처리
장점	자료 보호 가능	메모리 절약 가능
단점	많은 메모리 차지	원본이 사라지기 때문에 위험

 

■ 반복문

-반복문: 정해진 횟수만큼 반복하고 싶을 때 사용하는 문장 → 같은 코드를 여러 번 적는 것을 줄여 수고를 덜어줌

• for in 반복문: 배열의 인덱스 기반으로 반복
  • 반복 변수: 요소의 인덱스 입력
  • 추가 코드를 사용해야 안정적(예상에서 벗어나지 않는 형태)으로 쓸수 있는 기초적이지만 조금은 위험한 반복문.(일반적으로 추가 코드는 제거하고 사용해도 문제 X. for of 반복문이나 for 반복문을 활용하는 것이 좋음)

for (const 반복 변수 in 배열 또는 객체) {
	문장
}

• for of 반복문: 배열의 값 기반으로 반복
  • 반복 변수: 요소의 값 입력
  • 요소의 값을 반복할 때 안정적으로 사용 가능

for (const 반복 변수 of 배열 또는 객체) {
	문장
}

• for 반복문: 횟수 기반으로 반복
  • 특정 횟수만큼 반복하고 싶을 때 사용하는 범용적인 반복문

for (let i = 0; i < 반복 횟수; i++) {
	문장
}

• while 반복문: 조건 기반으로 반복
  • 무한 루프: 반복문이 무한 반복되는 것
    • while 문의 경우 조건이 변하지 않으면 무한 반복함 → 조건을 거짓으로 만들 수 있는 내용 포함 되어야함

while (bool 표현식) {
	문장
}

• break(키워드): switch 조건문 or 반복문을 벗어날 때 사용
  • while 반복문은 조건이 항상 참이므로 무한 루프에서 벗어나기 위해 break 키워드 사용

while (true) {

} break

• continue(키워드): 반복문 안의 반복 작업을 멈추고, 반복문의 처음으로 돌아가 다음 반복 작업 진행

for (let i = 0; i < n; i++) {
	continue
    alert(i)
}
//결과: 경고창 출력 X

-break 키워드나 continue 키워드는 반복문의 조건식을 적절히 만들면 필요 없는 구문

 

▶ 3주차 미션

    ▷ 기본 미션

Q. 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명

A. 비파괴적 처리는 처리 후에 원본 내용이 변경되지 않는 처리이고, 파괴적 처리는 처리 후에 원본 내용이 변경되는 처리를 의미한다. 파괴적 처리는 메모리를 절약할 수 있다는 장점이 있는 반면 원본이 사라져 위함하다는 단점이 있다. 이와 반대로 비파괴적 처리는 자료를 보호 가능하다는 장점이 있지만 많은 메모리를 차지한다는 단점이 있다. 그러나 현대의 포로그래밍 언어와 라이브러리는 메모리가 여유롭기 때문에 단점이 크게 느껴지지는 않을 듯 하다. 최근에는 널널해진 메모리와 자료 보호를 위해 대부분 비파괴적 처리를 많이 한다.

 

    ▷ 선택 미션

Q. 문제의 함수들이 파괴적 처리를 하는지 비파괴적 처리를 하는지 구분

A.

① 비파괴적 처리/ 처리 후에 원본 내용(strA)이 변경되지 않았기 때문

> const strA = "사과, 배, 바나나, 귤"
undefined

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

> strA
"사과, 배, 바나나, 귤"

② 파괴적 처리/ 처리 후에 원본 내용(arrayB)이 변경되었기 때문 → "감" 추가

> const arrayB = ["사과", "배", "바나나", "귤"]
undefined

> arrayB.push("감")
5

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

③ 비파괴적 처리/ 처리 후에 원본 내용(arrayC)이 변경되지 않았기 때문

> const arrayC = [1, 2, 3, 4, 5]
undefined

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

> arrayC
(5) [1, 2, 3, 4, 5]

④ 비파괴적 처리/ 처리 후에 원본 내용(strD)이 변경되지 않았기 때문

> const strD = " 여백이 포함된 메시지 "
undefined

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

> strD
" 여백이 포함된 메시지 "