안녕하새우🍤 벌써 혼공학습단 3주차라니,, 시간이 참 빠른 것 같아요. 2025년의 첫 달도 정신없이 지나가고 있어요. 요즘은 하루하루 흘러가는 게 너무 아까워요. 할 일하고 이제 좀 놀아볼까,,,? 하면 잘 시간이라닝 조금 더 효율적으로 살아야 될 것 같아용.
다들 연 초에 세운 목표 잘 지켜나가고 계신가용? 저는 계란말이로 시작했지만 스크램블이 되는 저의 요리같은 삶을 살고 있답니다.. 호호 그래도 같은 달걀이니까 괜찮아용. 그럼 다들 이번주도 화이팅하새우❗

---

✅ 진도: chater 04
✅ 기본숙제(필수): 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기
✅ 추가 숙제(선택): p. 173 확인문제 3번 문제 풀고, 풀이 과정 설명하기

---

04-1. 배열

- 배열: 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형(여러 자료를 묶어 활용 가능)

const 배열명 = [요소, 요소, ... ,요소]

<script>
const array = [273, 'string', true, function( ) { }, {}, [273, 103]] 
//배열 안에 숫자, 문자열, boolean, 함수, 다른 배열,, 등을 넣을 수 있음.
</script>

- 배열 요소에 접근 하는 방법: 인덱스 활용

배열 [인덱스]

<script>
const numbers = [273, 52, 103, 32]
</script>
> numbers[0] //콘솔입력
273//출력
> numbers[1+1]
103

- 배열 요소 개수 확인 : length 속성 사용

배열.length

<script>
const fruits = ['배', '사과', '키위', '바나나']
</script>
fruits.length //콘솔 입력
4 //콘솔 출력
fruits[fruits.length - 1]
'바나나'

- 배열 뒷부분에 요소 추가

1. push() 메소드

   배열.push(요소)

<script>
const todos = ['혼공단', '동아리', '프젝', '정처기']
</script>
> todos.push('중국어 공부') //콘솔 입력
5 //push()메소드로 요소가 추가된 후의 요소 개수 출력됨.

2. 인덱스 사용

<script>
const apple = ['ipone', 'ipad', 'appleWatch']
</script>
> apple[apple.length] = 'airpod'//배열의 마지막 위치에 추가
> apple[10] = 'ipod' //특정 인덱스에 추가, apple[4]~[9]: empty

..
🤔 배열.push()를 배우면서 두가지 궁금증이 생겨서 찾아봤새우
(제 정보가 틀렸다면,, 댓글 부탁함미다.)

1. 스택의 push와 배열의 push는 같은 건가,,?
   => push()의 기능 자체는 동일하지만 스택과 배열에 차이점이 있음
   - 스택은 LIFO 규칙을 따르는 데이터를 관리하는 자료 구조
   - 배열은 일반적인 데이터를 관리하는 자료구조
   => 배열이 더 넓은 범위의 개념

2. const는 상수를 선언할 때 사용하는 명령어인데 const로 선언한 배열에 요소를 추가할 수 있는 이유가 무엇일까?
   => const: 변수 자체의 변경은 제한하지만, 객체 내부 요소의 변경은 허용함.(객체의 속성이나 요소 변경 허용)
   => const : 배열이 저장된 메모리 주소(참조)의 변경 막음. but, 내부 요소 변경 허용//주소 내의 값 변경은 허용함.

..

- 배열 요소 제거

1. 인덱스 기반 제거

• splice() : 접합 // 특정 인덱스부터 n개의 요소를 제거한 후 합침.

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

<script>
const apple = ['ipone', 'ipad', 'appleWatch']

apple.splice(1,1)//'ipad'제거: 배열의 1번째 인덱스로부터 1개 요소를 제거
</script>

2. 값 기반 제거

• indexOf: 배열 내부의 특정 값의 위치를 찾음, 요소가 있을 경우 인덱스를 리턴하고 없을 경우 '-1' 리턴

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

<script>
const apple = ['ipone', 'ipad', 'appleWatch']
const index = apple.indexOf('ipad')//'ipad'의 인덱스: 1

apple.splice(index, 1)//'ipad'제거: 배열의 1번째 인덱스로부터 1개 요소를 제거
apple.indexOf('ipad')//-1 출력(ipad가 없으니까.)

</script>

+ 특정 문자열에서도 indexOf()메소드 사용 가능.

• 찾는 글자의 앞글자의 위치 인덱스를 출력

<script>
const apple = '원숭이 엉덩이는 빨개 빨가면 사과 사과는 맛있어'
apple.indexOf('빨개')//9 출력, 띄어쓰기 주의

</script>

3. 배열 내부에서 특정 값을 가진 요소 모두 제거

• filter() 메소드 사용

<script>
const apple = ['원숭이', '엉덩이는', '빨개', '빨가면', '사과', '사과', '맛있어']
apple.filter((item)=> item !== '사과' )
// 출력: (5) ['원숭이', '엉덩이는', '빨개', '빨가면', '맛있어']

</script>

+ 콜백함수: 다른 함수의 인자로 전달되어 실행되는 함수
\- filter()가 배열의 각 요소를 순회하며 콜백함수 실행
\- 콜백 함수가 true를 반환하는 요소만 새로운 배열에 포함
\- filter()는 원본 배열의 변경이 아닌 새로운 배열의 반환임.

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

배열.splice.(인덱스, 0, 요소)
// 0: 아무것도 제거하지 않음, 요소: 추가하고 싶은 요소 입력

<script>
const apple = ['원숭이', '엉덩이는', '빨가면', '사과', '사과', '맛있어']
apple.splice(2, 0, '빨개') //2번째 인덱스에 빨개 추가

</script>

🌟splice()가 접합이라는 점을 잘 활용하기.

---

✅ 기본숙제(필수): 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기

자료의 비파괴적 처리와 파괴적 처리

	비파괴적 처리	파괴적 처리
정의	처리 후 원본 내용이 변경되지 않음.	처리 후 원본 내용이 변경됨.
장점	원본을 보존할 수 있음.	메모리를 절약할 수 있음.
단점	메모리 부족 문제가 생김.	자료 보호가 어려움.
예시	'+'연산자를 사용해 문자열 a, b 연결한 문자열 c	array.push()

연습문제

✅ 추가 숙제(선택): p. 173 확인문제 3번 문제 풀고, 풀이 과정 설명하기

3. 다음 표시된 함수들이 파괴적 처리를 하는지 비파괴적 처리를 하는지 구분해 맞는 것에 O 표시하세요.(형광펜하겠새우)

1) [파괴적 처리 / 비파괴적 처리]

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

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

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

2) [ 파괴적 처리 / 비파괴적 처리]

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

> arrayB.push("감")
5

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

3) [파괴적 처리 / 비파괴적 처리]

> 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]

4) [파괴적 처리 / 비파괴적 처리]

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

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

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

---

04-2. 반복문

- for 반복문

1. for in 반복문

• 배열 요소를 하나하나 꺼내 특정 문장을 실행할 때 사용.
• 반복 변수에 배열이나 객체의 인덱스가 들어감.

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

<script>
const todos = ['혼공', '중국어', '운동']
for (const i in todos) {
console.log(`${i}번째 할 일: ${todos[i]}`)
}
</script>
//출력
 0번째 할 일: 혼공
 1번째 할 일: 중국어
 2번째 할 일: 운동

+ for in 보단 for of나 for이 더 안정적임.

2. for of 반복문

• 반복변수에 요소의 값이 들어감.

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

<script>
const todos = ['혼공', '중국어', '운동']
undefined
for (const todo of todos) {
console.log(`오늘의 할일: ${todo}`)    
}
</script>
//출력
 오늘의 할일: 혼공
 오늘의 할일: 중국어
 오늘의 할일: 운동

..
🤔 위의 예제에서 인덱스와 값 모두 출력하는 방법은 없을까?
(ex. 오늘의 할일: 1.운동) / 참고로 gpt한테 물어본거라 오류가 있다면 댓글 부탁드립니당,,
1) entries() 메소드 사용

• entries()는 [인덱스, 값] 형태의 배열을 반환해, 인덱스와 값 모두 받을 수 있음.

<script>
  const todos = ['혼공', '중국어', '운동'];

for (const [index, todo] of todos.entries()) {
  console.log(`오늘의 할일: ${index + 1}. ${todo}`);
}
</script>

2) forEach 활용

• 배열의 각 요소를 순회하면서 콜백 함수를 실행하는 메소드
• 중단이 필요하거나 비동기 코드가 있을 경우 for of가 더 적합함.

<script>
  todos.forEach((todo, index) => {
  console.log(`오늘의 할일: ${index + 1}. ${todo}`);
});
</script>

..

3. for 반복문

• 특정 횟수만큼 반복하고 싶을 때 사용함.

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

<script>
 for (let i=0; i<3; i++){//0이상 3미만이면 반복
  console.log(`${i}번째 반복입니다.`)
  }
</script>
//출력
0번째 반복입니다.
1번째 반복입니다.
2번째 반복입니다.

..
🤔for in, for of와 달리 for 반복문이 반복 변수를 let으로 선언하는 이유는?

• for in과 for of는 반복할 때마다 반복 변수를 새로 선언함. 즉, 기존의 변수에 재할당할 필요가 없음.(let을 쓸 수는 있지만, 안정성을 위해 const를 쓰는 게 좋음.)
• for 반복문은 반복 시 반복 변수에 값을 재할당하므로 let이어야 함.(i++하면 기존 i값에 더해진 값을 재할당.)
  ..

4. for 반복문 + 배열

• 배열의 length 속성(길이)만큼 반복을 돌리는 형태로 사용

<script>
const todos = ['혼공', '중국어', '운동']

for(let i=0; i < todos.length; i++){
    console.log(`${i}번째 할 일: ${todos[i]}`)}
</script>
//출력
0번째 할 일: 혼공
1번째 할 일: 중국어
2번째 할 일: 운동

- while 반복문

1. while 반복문

• 조건을 기반으로 사용하는 반복문이 필요할 때(if문과 유사함.)
• 불 표현식이 true이면 무한히 반복됨.
• 무한루프에 빠지지 않도록 조건을 거짓으로 만들 수 있는 내용이 있어야 함.(js는 무한 반복 사용 시 페이지 전체가 먹통이 될 수 있음.)

  while (불 표현식){
   문장
  }

<script>
while(confirm("계속 진행하시겠새우?")){
    //사용자가 [확인]버튼을 클릭하면 true가 되어 계속 반복
    alert(`${i}번째 반복입니다.`)
    i++
}
</script>
//결과
confirm창의 확인을 누를 때마다 alert창의 숫자가 올라가며 반복됨.

2. while 반복문 + 배열

<script>
let i = 0
const array = [1,2,3,4,5]

while (i < array.length) {
    console.log(`${i}번째 요소: ${array[i]}`)
    i++
}
</script>
//출력
0번째 요소: 1
1번째 요소: 2
2번째 요소: 3
3번째 요소: 4
4번째 요소: 5

- Keyword

1. break 키워드

• switch 조건문이나 반복문을 벗어날 때 사용

  while(true) {
  }break

<script>
for (let i=0; true; i++){
    alert(i+'번째 반복문입니다.')

    //진행 여부 물어봄
    const isContinue = confirm('계속 하시겠새우?')
    if(!isContinue) {
        break
    }
}
//취소를 누르면 반복이 끝나며 프로그램 종료 뜸.
alert('프로그램 종료')
</script>

2. continue 키워드

• 반복문 안의 현재 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 수행.

<script>
let output = 0
for(let i=0; i<=10; i++){
    if(i%2===1){
        continue
    }
    output+=1
}
alert(output)
</script>
//출력
6

- 중첩 반복문

• 반복문을 여러 겹 중첩해 사용하는 것
• n차원 처리를 할 때 주로 사용(ex. n차원 배열)

<script>
for(i=0; i<10; i++){
    for(j=0; j<i; j++){
        output += "*"
    }
    output += "\n"
}
console.log(output)
</script>
//출력
*
**
***
****
*****
******
*******
********
*********