[혼공학습단 10기 - 자바스크립트] 3주차 / Chapter 04. 반복문

04-1 배열

☑️문자열 복습

>const str = 'hello'
undefined
>str[2]
'l'
>str[str.length - 1]
'o'

배열 : 여러 개의 값을 모아놓은 것

• 배열 내부의 값을 요소(element)라고 부름!
• 기본 연산
  • a.length : 요소 개수 추출
  • a[인덱스] : 요소 추출

배열의 메서드

배열 뒤에 요소 추가하기 : push(요소)

>const a = [52, 273, 'hello', 'wow']
undefined
>a.push(200)
5
>a
(5) [52, 273, 'hello', 'wow', 200]

배열 중간에 요소 추가하기 : splice(인덱스, 0, 요소)

>a.splice(1, 0, '추가하기')
[]
>a
(6) [52, '추가하기', 273, 'hello', 'wow', 200]

인덱스로 배열의 요소 제거하기 : splice(인덱스, 1)

>a.splice(0,1)
[52]
>a
(5) ['추가하기', 273, 'hello', 'wow', 200]

배열 내부에서 값의 위치 찾기 : indexOf(요소)

>a.indexOf(273)
1
>a.indexOf('ohmygod')
-1

→ 값이 없을 경우, -1

값으로 배열의 요소 제거하기 : indexOf() + splice() 활용

>const index = a.indexOf('wow')
undefined
>a.splice(index, 1)
['wow']
>a
(4) ['추가하기', 273, 'hello', 200]

비파괴적 처리와 파괴적 처리

자료형에는 기본 자료형, 복합 자료형이 있음

• 기본 자료형 ⏩ 스택(stack)에 저장
  • 숫자/문자열/불
• 복합 자료형 ⏩ 힙(heap)에 저장
  • 배열/함수/객체

→복합 자료형은 기본 자료형보다 훨씬 크다

• 스택 : 기본 자료형과 주소 등을 저장하는 메모리 공간
• 힙 : 복합 자료형을 저장하는 메모리 공간
• 주소 : 저장된 자료의 위치
• 레퍼런스한다 : 스택의 주소가 힙의 자료를 가리키는 것
• 레퍼런스 변수 : 스택에 저장된 것 중에 주소가 저장된 변수

어떠한 처리 후 원본이 변경되지 않는다 ⇒ 비파괴적 처리

(example)

어떠한 처리 후 원본이 변경된다 ⇒ 파괴적 처리

(example)

여기서, const 상수 값은 변경 불가능하다고 했는데, const 배열은 왜 변경이 가능한가?

→ const는 스택에 있는 녀석들에게 적용되는 사항이다! 배열의 경우, 스택에는 주소가 들어가고, 그 결과 힙에 있는 요소는 처리가 가능하게 됨

저장을 할 때 사용하는 공간

• 스택(stack) : 스택스택 쌓는 공간[잘 쌓는 공간]→ 복합 자료형은 그 주소(address)!
• → 기본 자료형은 직접!
• 힙(heap) : 힙힙 던져서 쌓는 공간[대충 큰 것들을 던져서 쌓은 공간]
• → 복합 자료형의 본체가 저장!

처리 후에

원본이 변경되었다 → 파괴적 처리

원본이 변경되지 않았다 → 비파괴적 처리

---

확인문제1

3, 바나나, 32

확인문제2

4

[1, 2. 3. 4, 5]

확인문제3

비파괴적 처리, 파괴적 처리,

파괴적 처리, 비파괴적 처리

 

---

04-2 반복문

for 반복문

배열 등과 함께 사용하는 녀석 (forof 반복문, forin 반복문)

forin 반복문 : 배열 요소를 하나하나 꺼내서 특정 문장 실행할 때 사용

반복 변수(i)에는 요소의 인덱스들이 들어감

forof 반복문 : forin 반복문보다 반복할 때 안정적으로 사용 가능

반복 변수(i)에는 요소의 값이 들어감

그냥 범용적으로 사용하는 녀석 (for 반복문)

• 다른 언어와 형태가 거의 같아서, 기억해 둘 것만 필기함
• 반복 변수를 let으로 선언할 것!

~반복문 사용해보기~

1부터 n까지 더하기 (입력받아서~)

배열 출력하기

배열 반대로 출력하기

while 반복문

while(불_표현식){
	//실행문
}

1. 불_표현식을 확인한다

2-a. true → 본문 실행하고 1번으로 돌아감

2-b false → 종료

while반복문은 조건이 중요할 때, for반복문은 횟수가 중요할 때

let i = 0
while(confirm('계속 진행하시겠습니까?')){
  alert(`${i}번째 반복입니다.`)
  i++
}

break 키워드 사용해보기

• 조건문이나 반복문을 벗어날 때 사용되는 키워드

continue 키워드 사용해보기

• 반복문 내 반복 작업을 멈추고 반복문의 처음으로 돌아가서 다음 반복 작업 진행!

중첩 반복문 사용하기 (1)

중첩 반복문 사용하기 (2)

→ 다시 한 번 고민해보고 코드가 완성되면 블로그 글에 반영하겠음

let output = ''
for(let i = 0; i < 10; i++){
  for(let j = 9; j > i; j--){
    output += ' '
  }
  for(let k = 0; k < 2*i + 1; k++){
    output += '*'
  }
  output += '\n'
}

console.log(output)

결과

확인문제1

#for in 반복문

0

1

2

3

#for of 반복문

사과

배

귤

바나나

 

확인문제2

for문 내 const i → let i 로 고쳐야 반복문이 정상 실행 됩니다

 

확인문제3

확인문제4

이 또한 시간 투자해서 고민해보고 완성되면 다시 수정해서 올리겠음

 

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

비파괴적 처리 : 처리 후 원본 내용이 변경되지 ❌

파괴적 처리 : 처리 후 원본 내용 변경 ⭕

배열 같이 크기가 어느 정도인지 모르는 대상의 원본&결과를 모두 메모리에 저장하는 것 → 위험

배열 : 보통 메모리 절약할 수 있는 파괴적 처리로 이루어짐

but, 파괴적 처리는 메모리 절약되나 원본이 사라져 위험함

→ 현대 : 메모리 여유로움, 따라서 자료 보호를 위해 대부분 비파괴적 처리를 함

 

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

1번 ) split 함수로 배열로 잠깐 리턴한 것일 뿐, strA라는 문자열 자체에는 변함이 없음 → 비파괴적 처리

2번 ) push함수로 배열 요소 추가하였음 → 파괴적 처리

3번 ) arrayC라는 원래의 배열이 그대로 리턴됨. → 비파괴적 처리

4번 ) strD라는 문자열 자체는 여백도, 내용도 그대로임 → 비파괴적 처리