[자기계발] 혼공단10기 자바스크립트 3주차 (반복문) & 중간 점검

3주차(7/17-7/23)
Chapter 04

 

Chapter 04. 반복문

1. 배열(Array)
여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형. 대괄호[]를 사용해 생성하고, 내부의 값을 쉼표(,)로 구분해 입력함.
배열 내부에 들어 있는 값을 요소(element)라고 하며, 어떠한 종류의 자료형도 요소가 될 수 있음.

1) 배열 만들기

[요소, 요소, 요소, ..., 요소]

 

2) 배열 요소에 접근하기

배열[인덱스]    //인덱스(index) : 요소의 순서

 

3) 배열 요소 개수 확인하기

배열.length
배열[배열.length - 1]       //배열의 마지막 요소를 선택할 때 자주 사용하는 패턴

 

4) 배열 뒷부분에 요소 추가하기
(1) push() 메소드를 사용해 배열 뒷부분에 요소 추가하기

배열.push(요소)

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

배열[배열.length] = 요소

 

5) 배열 요소 제거하기
(1) 인덱스로 요소 제거하기

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

(2) 값으로 요소 제거하기
배열 내부에서 특정 값의 위치를 찾는 indexOf() 메소드를 사용함.

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

* 문자열에서 indexOf() 메소드를 사용하면 특정 문자열의 위치를 찾을 수 있음.
* indexOf()와 splice() 메소드는 배열 내부 요소를 하나만 제거할 수 있지만, 특정 값을 가진 요소를 모두 제거하고 싶을 때는 filter() 메소드를 많이 사용함.

//Example
> const itemsE = ['사과', '배', '바나나', '귤', '귤']
Undefined
> itemsE.filter((item) => item !== '귤')
>>(3) ["사과", "배", "바나나"]

6) 배열의 특정 위치에 요소 추가하기
splice() 메소드의 2번째 매개변수에 0을 입력하면 splice() 메소드는 아무것도 제거하지 않으며, 3번째 매개변수에 추가하고 싶은 요소를 입력함.

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

남은 혼공단 투두리스트를 정리해서 배열 내용을 복습해보았다.
잊고 있었던 여름방학 일정도 확인하고, 가장 중요한 혼공족장님 응원하기도 체크했다가, 공부 안 하고 나가서 까까 사 먹고 싶었다가 억누르는 심정을 모두 담은 인증화면

 

2. 반복문
1) for in 반복문
배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용함. 

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

2) for of 반복문
배열 요소의 값을 반복할 때 사용함. for in 반복문과 다르게 반복 변수에 요소의 값이 들어감.

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

const todolist = ['3주차', '4주차', '여름방학', '5주차', '6주차', '혼공족장님 응원하기', '6주차까지 완주하기']
for (const i in todolist) {
    console.log(`혼공단 10기 ${i}번째 할 일 : ${todolist[i]}`)
}
for (const todo of todolist) {
    console.log(`혼공단 10기 남은 일 : ${todo}`)
}

3) for 반복문
특정 횟수만큼 반복하고 싶을 때 사용하는 범용적인 반복문.

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

 
(1) for 반복문과 함께 배열 사용하기
보통 배열의 length 속성만큼 반복을 돌리는 형태로 사용함.

//순서대로 출력하기
for(let i=0; i<todolist.length; i++) {
    console.log(`혼공단 10기 ${i}번째 할 일 : ${todolist[i]}`)
}
//반대로 출력하기
for(let i=todolist.length-1; i>=0; i--) {
    console.log(`혼공단 10기 ${i}번째 할 일 : ${todolist[i]}`)
}

4) while 반복문
불 표현식이 true면 계속해서 문장을 실행함.
조건이 변하지 않는다면 무한히 반복 실행(무한 루프)하므로, 조건을 거짓으로 만들 수 있는 내용이 문장에 포함되어 있어야 함.

while (불 표현식) {
    문장
}

(1) while 반복문과 함께 배열 사용하기
while 반복문과 for 반복문은 서로 대체해서 사용할 수 있음.

let i = 0
const array = [1, 2, 3, 4, 5]
while(i<array.length) {
    console.log(`${i} : ${array[i]}`)
    i++
}

5) break 키워드
switch 조건문이나 반복문을 벗어날 때 사용함.

6) continue 키워드
반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행함.

 

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

처리 후 원본의 상태 변화에 따라 구분한다.

- 비파괴적 처리 : 처리 후에 원본 내용이 변경되지 않는다.
ex) 문자열 a와 b를 연결하여 c를 만든 후에 a와 b를 살펴보면 원본 내용이 변하지 않는다.
장점 : 오류가 발생하더라도 원본이 영향을 받지 않기 때문에 쉽게 롤백하거나 수정이 가능하다.
단점 : 원본 코드를 수정하지 않으므로 일부 잠재적인 버그들을 감지하지 못할 수 있다.

- 파괴적 처리 : 처리 후에 원본 내용이 변경된다.
ex) 배열 a를 선언 후 push() 메소드를 실행한 뒤 배열의 값을 보면 원본 내용과 다르다.
장점 : 변경한 코드나 데이터의 결과를 직접 확인하고 검증할 수 있으며, 잠재적인 버그를 더 쉽게 발견하고 수정할 수 있다.
단점 : 올바르지 않은 수정은 원본에 손상을 줄 수 있으며, 취소를 위해 롤백이나 복구 과정이 필요하다.

비파괴적인 처리를 활용하여 안전하게 실험하고, 최종 결과를 얻기 위해 파괴적 처리를 활용하여 코드나 데이터를 최적화하는 방법을 고려한다.

 

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

비파괴적 처리
파괴적 처리
비파괴적 처리
비파괴적 처리
2번의 push() 메소드 사용은 array에 요소를 추가하였기 때문에 원본 내용에 변경이 생겼지만,
1, 3, 4번의 split(), map, trim() 메소드의 경우 원본 내용에 변경이 생기지 않았다.

Review

배열 역시 javaScript에서 어렵다고 생각했던 이론이다.
인덱스가 0부터 시작하는 것도 이해가 안갔었고, map과 함께 쓰이면 언제나 혼란 그 잡채였던..
이젠 조금 친해진 반복문도 이론 부분에선 괜찮다가 오랜만에 처음 코딩 공부할 때 끙끙댔던 피라미드 예제를 보니 그때의 기억이 새록새록 떠올랐다.
그땐 내 머리론 도저히 해결할 수 없다고 여겼던 고전적인 문제를 이제는 조금 보이는 걸 보면 나 그래도 조금 성장한 걸까?
벌써 1년이 다 되어가는 개발자 짬밥이 그래도 조금은 빛을 발하는 것 같아서 뿌듯한 오늘의 혼공!

 

중간 점검

오늘 3주차 과제 마무리로 벌써 반이 지났다!

족장님의 응원으로 문제집 사면 첫 부분만 깨끗하던 내가 지금까지 달려온 게 아닌가 싶다...♥

우리 족장님 따스운 응원 좀 보세요 세상 사람들.. 나만 알고 싶은데 이미 인기가 많으신 것 같아..

 

 

그리고 뚜둥 이것은! 1주차 우수 혼공족 선정 선물.. ><

나는 공부만 했을 뿐인데 간식까지 주셔 뭐야 뭐야 저 11기도 할래요

 

To. 족장님
우중충한 날씨가 가끔은(사실 매일) 공부하기 싫다는 생각이 들게 하긴 하지만.. 회사에서 업무 중에 조금씩 시간 내서 하고 있는 중이라 저는 힘들지 않아요 족장님! 열심히 각자의 꿈을 이루기 위해 노력하는 혼공단 멤버들 케어하시느라 매주 고생 많으신데, 항상 감사하고 남은 기간도 함께 힘내보도록 해요♪♬