언어/JavaScript

[혼공스] (자바스크립트) 챕터4. 배열(push, splice, indexOf), 반복문(for, while)

보리시스템 2022. 11. 2.

목차

   <WIL : What I Learned>

   - 반복되는/해야 하는 코드가 무엇인지 정확하게 파악하자

 

   <04-1 배열>
   1. 배열 만들기 : [요소, 요소, ..., 요소]
   2. 배열 요소에 접근 : 배열[인덱스]
   3. 배열 요소 개수 확인 : 배열.length
   4. 배열 뒷부분에 요소 추가 : push(), 인덱스
   5. 배열 요소 제거 : splice(), indexOf()
   6. 배열의 특정 위치에 요소 추가 : 배열.splice(인덱스, 0, 요소)
   +. 자료의 파괴적/비파괴적 처리

   <04-2 반복문>
   1. for in 반복문
   2. for of 반복문
   +. for in/of 반복문 차이 확인

   

   3. for 반복문
   4. while 반복문
   +. break 키워드
   +. continue 키워드

   @ 예제 문제
   1-1) 피라미드 만들기(반쪽)
   1-2) 피라미드 만들기(반쪽, *의 개수가 홀수로 산출)
   1-3) 피라미드 만들기(반쪽, *의 개수가 짝수로 산출)
   2) 피라미드 만들기
   3) 다이아몬드 만들기


 

WIL : What I Learned

- 반복되는/해야 하는 코드가 무엇인지 정확하게 파악하자

  • 피라미드 만들기(반쪽)
  1. 반복되는 코드는 'output +='이고, 9번 반복됨
  2. *은 1개씩 늘어나고, \n은 1개만 있는 형태임
  3. *가 1개씩 늘어나는 것을 만들기 위해 반복문을 한 번 더 만듦

 


 

04-1 배열

 

배열(array)? 여러 변수를 한 번에 선언해 다룰 수 있는 자료형
요소(element)? 배열 내부에 들어 있는 값
인덱스(index)? 요소의 순서 (1이 아닌 0부터 시작)

 

1. 배열 만들기 : [요소, 요소, ..., 요소]

  • 대괄호( [...] )를 사용해 생성하고 내부의 값을 쉼표(,)로 구분해 입력
  • 개발자 도구 콘솔창에서 배열 만들어 확인하기
> const arrays = ['bolee', 123, true, function () {}, [456, 789]]
undefined

> arrays
(5)['bolee', 123, true, ƒ, Array(2)]

// (5)은 요소 개수, ['bolee', ..., [456, 789]]은 요소

 

 

[참고] array 하단에 ▶가 활성화되어 있지 않는 경우
- array 부분에서 앤터를 치면 ▶가 나옴

 


 

2. 배열 요소에 접근 : 배열[인덱스]

[참고] 배열명은 복수형으로
배열은 여러 개의 요소를 갖기 때문에 일반적으로 복수형(arrays 등)으로 이름을 지음
> const numbers = [1, 2, 3, 4]
undefined

> numbers[0]
1

> numbers[1 + 2]	// numbers[3]으로 3번째에 위치한 4가 출력됨
4

 


 

3. 배열 요소 개수 확인 : 배열.length

> const fruits = ['사과', '귤', '딸기', '바나나']
undefined

> fruits.length
4

> fruits[fruits.length - 1]	// fruits[3]으로 3번째에 위치한 '바나나'가 출력됨
"바나나"

 


 

4. 배열 뒷부분에 요소 추가 : push(), 인덱스

  1) 배열.push(요소) 사용해 추가 

> const arrays = ['bolee', 123, true, function () {}, [456, 789]]
undefined

> arrays
(5) ['bolee', 123, true, ƒ, Array(2)]

> arrays.push('system')
6

> arrays
(6) ['bolee', 123, true, ƒ, Array(2), 'system']		// 배열 뒷부분에 요소가 추가됨

 

  2) 인덱스 사용해 추가

  • 배열의 길이는 고정이 아니므로 9번째에 요소를 추가하면 6~8번째 인덱스는 아무 것도 없는 empty가 됨
> const arrays = ['bolee', 123, true, function () {}, [456, 789], 'system']
undefined

> arrays[9] = 100
100

> arrays
(10) ['bolee', 123, true, ƒ, Array(2), 'system', empty × 3, 100]

 

5. 배열 요소 제거 : splice(), indexOf()

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

  • splice는 접합이라는 의미 
  • splice() 메소드는 인덱스로 1) 요소를 제거할 때 2) 요소를 중간에 넣을 때 사용
> const arrays = ['bolee', 123, true, function () {}, [456, 789], 'system']
undefined

> arrays.splice(1, 4)			// 배열의 1번째 인덱스부터 4개의 요소를 제거
(4) [123, true, ƒ, Array(2)]		// 제거된 요소가 배열로 리턴됨

> arrays						
(2) ['bolee', 'system']			// 배열에서 요소가 제거된 것을 확인할 수 있음

 

  2) const 인덱스 = 배열.indexOf(요소)

      배열.splice(인덱스, 1)

indexOf() 메소드?
- 배열 내부에서 특정 값의 위치를 찾는 메소드

- 출력값

 1) 배열 내부에 요소가 있는 경우 인덱스를 리턴
 2) 배열 내부에 요소가 없을 때는 -1을 리턴

- 문자열에서의 indexOf()
> const string = '보리 시스템에 오신 걸 환영합니다.'
undefined			//보 0, 리 1, 띄어쓰기 2, 시 3번째 인덱스에 위치

> string.indexOf('오신')	// '오신'의 앞글자인 '오'의 위치가 8번째 인덱스에 위치하므로
8				// 8을 리턴

> string.indexOf('신')
9

> string.indexOf(' ')		// '보리' 뒷부분의 띄어쓰기의 위치가 2번째 인덱스에 위치하므로
2				// 2를 리턴
  • indexOf()로 값의 위치를 추출한 뒤 splice()로 요소를 제거
> const arrays = ['bolee', 'system', 123]
undefined

> const index = arrays.indexOf('system')
undefined			// index를 배열 arrays의 요소'system'의 위치로 선언

> index				// index는 'system'의 인덱스를 리턴(1번째 요소이므로 1을 출력)
1

> arrays.splice(index, 1)	// 'system'부터 1개의 요소를 제거
['system']			// 제거되는 요소를 나타냄

> arrays			// arrays를 확인해보면
['bolee', 123]			// 요소 'system'는 제거되어 'bolee', 123만 남음

> arrays.splice(index, 3)	// 'system'부터 3개의 요소를 제거
[123]				// 제거되는 요소를 나타냄

> arrays			// arrays에는 
['bolee']			// 요소 'bolee'만 남음

> arrays.indexOf('system')	// 'system' 요소는 이미 제거되었기 때문에
-1				// -1을 리턴

 

  • filter()로 배열 내부에서 특정 값을 가진 요소 모두 제거
> const arrays = ['bolee', 123, 'system', 123]
undefined

> arrays.filter((array) => array !== 123)
(2) ['bolee', 'system']

 

6. 배열의 특정 위치에 요소 추가 : 배열.splice(인덱스, 0, 요소)

  • 자주 사용하는 코드는 아니지만 간혹 사용하므로 참고
> const arrays = ['bolee', 'system', 123, 456]
undefined

> arrays.splice(0, 3, 'add')	// 0번째 요소를 기준으로, 3개의 요소 제거, 'add'를 0번째에 추가
(3) ['bolee', 'system', 123]	// 제거되는 3개의 요소를 나타냄

> arrays
(2) ['add', 456]		// 0번째에 'add'가 추가된 것을 확인할 수 있음

 

+. 자료의 파괴적/비파괴적 처리

자료의 비파괴/파괴적 처리?
- JS는 자료 처리를 위해 다양한 연산자, 함수, 메소드를 제공하고, 이는 파괴적/비파괴적 처리로 구분

- [구분 기준] 처리후 원본 상태의 변화
1) 파괴적 처리 : 처리후 원본내용 변경됨
2) 비파괴적 처리 : 처리후 원본내용 변경 안됨

- [사용 이유] 메모리
(과거/파괴적 처리)와 자료 보호(현재/비파괴적 처리)
=> 초기에 표준화된 것들은 파괴적 처리로, 최근 표준화된 것들은 비파괴적 처리로 많이 함

1) 
파괴적 처리
과거에는 컴퓨터 메모리가 부족했기 때문에 배열처럼 거대해질 수 있는 자료는 메모리 절약을 위해 대부분 파괴적 처리로 이루어짐
*결과가 기본 자료형인 경우 메모리를 조금만 차지하기 때문에 원본, 결과를 모두 메모리에 저장해도 크게 무리가 없었으나, 배열처럼 크기를 모르는 대상의 원본과 결과를 모두 메모리에 저장하는 것은 위험할 수 있었음


2) 비파괴적 처리
메모리가 여유로운 현재는 자료 보호를 위해 대부분 비파괴적 처리를 함

 

  1) 비파괴적 처리

  • a, b를 연결해 c를 만들어도 a, b의 원본내용은 변경되지 않았음 
> const a = 'bolee'
undefined

> const b = 'system'
undefined

> const c = a + b
undefined

> c
'boleesystem'

> a
'bolee'

> b
'system'

 

  2) 파괴적 처리

  • push() 메소드를 실행한 뒤에는 arrays의 원본내용이 변경됨
> const arrays = ['bolee', 'system']
undefined

> arrays.push(123)
3

> arrays
(3) ['bolee', 'system', 123]

 


 

04-2 반복문

 

for in 반복문? 배열의 인덱스를 기반으로 반복할 때 사용 => 몇 번째?
for (const 반복변수 in 배열 또는 객체) {
    문장
}
 
for of 반복문? 배열의 값
을 기반으로 반복할 때 사용 => 값?
for (const 반복변수 of 배열 또는 객체) {
    문장
}

 
for 반복문? 횟수를 기반으로 반복할 때 사용

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

 
while 반복문? 
조건
을 기반으로 반복할 때 사용 / 무한루프(if 반복문과의 차이점)
 *무한루프가 되므로 조건을 거짓으로 만들 수 있다는 내용 문장에 포함되어 있어야 함

while (불 표현식) {
    문장
}

무한루프(infinite loop)?
 반복문이 무한 반복되는 것

* while 반복문의 경우 조건이 변하지 않는다면 무한히 반복 실행함
break 키워드? switch 조건문이나 반복문을 벗어날 때 사용
while (true) {

} break

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

=> break, continue 키워드는 조건식을 적절하게 만들면 필요없는 구문임
=> 해당 키워드를 적당히 사용하면 코드가 간결해 보이지만, 그런 적당한 경우는 드묾
=> 해당 키워드가 필요 없는 부분에 무리하게 사용하는 경우가 있는데 최대한 자제할 수 있도록 주의해야 함

 

1. for in 반복문

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

 

  • 배열 요소를 하나씩 꺼내 특정 문장을 실행할 때 사용
  • for in 반복문은 아래와 같은 코드(stuffs[n] 등)를 추가해 사용해야 안정적(예상에서 벗어나지 않는 형태)으로 쓸 수 있는 조금 위험한 반복문임 => 따라서 for of, for 반복문을 활용하는 것이 더욱 좋음

 

  • 입력 코드 1
<script>
    const stuffs = ['노트북', '키보드', '마우스']

    for (const i in stuffs) {
        console.log(i)
    }
</script>
  • 출력 결과 1

 

  • 입력 코드 2
<script>
    const stuffs = ['노트북', '키보드', '마우스']

    for (const i in stuffs) {
        console.log(`${i}번째 준비물 : ${stuffs[i]}`)
    }
</script>
  • 출력 결과 2

 

2. for of 반복문

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

 

  • 요소의 값을 반복할 때 안정적으로 사용할 수 있음
  • 입력 코드
<script>
    const stuffs = ['노트북', '키보드', '마우스']

    for (const stuff of stuffs) {
        console.log(`준비물 : ${stuff}`)
    }
</script>
  • 출력 결과

 

+. for in/of 반복문 차이 확인

  • 입력 코드
<script>
    const array = ['사과', '배', '귤', '바나나']

    console.log('# for in 반복문')
    for (const i in array) {
        console.log(i)
    }

    console.log('# for of 반복문')
    for (const i of array) {
        console.log(i)
    }
</script>
  • 출력 결과

 


 

3. for 반복문

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

 

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

 

  1) for 반복문 기본

  • 입력 코드
<script>
    for (let i = 0; i < 5; i++) {
        console.log(`${i}번째 반복입니다.`)
    }
</script>
  • 출력 결과

 

  2-1) 1부터 100까지 더하기

  • 입력 코드
<script>
    let output = 0
    for (let i = 1; i <= 100; i++) {
        output += i
    }    
    console.log(`1~100까지 숫자를 모두 더하면 ${output}입니다.`)
</script>
  • 출력 결과

 

  2-2) 1부터 100까지 곱하기

  • 입력 코드 : 2-1의 코드에서 output의 초기값 0을 1로 바꾸고, output += i를 output *= i로 바꾸면 됨
<script>
    let output = 1
    for (let i=1; i<=100; i++){
        output *= i
    }
    console.log(`1~100까지 숫자를 모두 곱하면 ${output}입니다.`)
</script>
  • 출력 코드

 

항등원(Identity)?
- 임의의 수 a와 어떤 수를 연산했을 때 a가 나오게 하는 그 어떤 수
- 어떤 대상에 여러 번 처리하는 코드를 작성할 때!

 

 

  3) 배열 출력하기

  • 입력 코드
<script>
    const stuffs = ['노트북', '키보드', '마우스']

    for (let i = 0; i < stuffs.length; i++){
        console.log(`${i}번째 준비물 : ${stuffs[i]}`)
    }
</script>
  • 출력 결과

 

  4) 반대 순서로 배열 출력하기

for (let i = 0; i < stuffs.length; i++)의 출력 결과의 순서를 반대로 하려면
for (let i = stuffs.length - 1; i >= 0; i--)

 

  • 입력 코드
<script>
    const stuffs = ['노트북', '키보드', '마우스']

    for (let i = stuffs.length - 1; i >= 0; i--){
        console.log(`${i}번째 준비물 : ${stuffs[i]}`)
    }
</script>
  • 출력 결과

 


 

4. while 반복문

while (불 표현식) {
  문장
}

 

  • if 조건문과 공통점? 형태가 매우 비슷
  • if 조건문과 차이점? 문장을 한 번만 실행하고 끝나는 것이 아닌 불 표현식이 true면 계속해서 문장을 실행함

 

  1) 무한 반복문

  • 입력 코드
<script>
    let i = 0
    while (true) {
        alert(`${i}번째 반복입니다.`)
        i += 1
    }
</script>

 

  • 출력 결과 : 확인 버튼을 클릭할 때마다 숫자가 하나씩 증가하며 경고창이 계속 뜸
- 다른 프로그래밍 언어에서는 '데이터를 전달받을 때까지 기다린다'와 같은 목적으로 무한 반복문을 사용하기도 함
- JS에서 무한 반복을 사용하면 페이지 전체가 먹통이 되는 문제가 발생함
- break 구문 등을 활용해 반드시 무한 반복을 벗어나도록 코드를 구현해야 함

 

  2) while 반복문 기본

  • 입력 코드
<script>
    let i = 0
    while (confirm('계속 진행하시겠습니까?')) {
        alert(`${i}번째 반복입니다.`)
        i += 1
    }
</script>
  • 출력 결과 : 확인 버튼을 누르면 'i번째 반복입니다.' 경고창이 뜨고, 취소를 누르면 반복이 종료됨

 

  3) 배열 출력하기

  • 입력 코드
<script>
    let i = 0
    const arrays = [1, 2, 3, 4, 5]
    
    while (i < arrays.length) {
        console.log(`${i}번째 숫자 : ${arrays[i]}`)
        i++
    }
</script>
  • 출력 결과

 


 

+. break 키워드

while (true) {

} break

 

  • 입력 코드 : 몇 번째 반복문인지 경고창을 출력하고 사용자에게 한 번 더 반복 작업을 수행할지 묻는 프로그램
<script>
    for (let i = 0; true; i++) {
        alert(i + '번째 반복문입니다.')

        const isContinue = confirm('계속 진행하시겠습니까?')
        if (!isContinue) {
            break
        }
    }

    alert('프로그램 종료')
</script>
  • 출력결과

 


 

+. continue 키워드

  • 반복문 안의 반복 작업을 맘추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행
  • 입력 코드 : 0~10 사이의 짝수의 합 구하기
<script>
    let output = 0
    
    for (let i = 1; i <= 10; i++){
        if (i % 2 === 1){
            continue
        }
        output += i
    }
    
    alert(output)
</script>
  • 출력 결과 : 홀수일 때는 continue 키워드를 만나 바로 다음 반복 작업으로 넘어가므로 짝수의 합(30)만 출력

 


 

@ 예제 문제

1-1) 피라미드 만들기(반쪽)

  • 입력 코드 1 : 중첩 반복문 사용
<script>
    let output = ''
        for (let i = 0; i < 9; i++) {		// 9줄의 피라미드를 만들어야 하므로 9번 반복
            for (let j = 0; j < i + 1; j++){
                output += '*'
            }
            output += `\n`
        }
    console.log(output)
</script>
  • 입력 코드 2 
<script>
    let output = ''
        let num = ''
        for (let i = 0; i < 9; i++) {
            output += '*'
            num += output + `\n`
    }
    console.log(num)
</script>
  • 출력 결과

 

  • 이해하는 방법
1. 반복되는 코드는 'output +='이고, 9번 반복됨
=> for 반복문으로 i를 9번까지 반복
=> for (i = 0; i < 9; i++)

2. *은 1개씩 늘어나고, \n은 1개만 있는 형태임
=> output += '*'와 output += '\n'으로 분리해서 작성

3. *가 1개씩 늘어나는 것을 만들기 위해 반복문을 한 번 더 만듦
=> *는 j를 1번 반복, **는 j를 2번 반복, ***는 j를 3번 반복하는 즉,  i + 1만큼 반복함
=> for (j = 0; j < i + 1; j++)

+. i가 1인 경우로 보면
=> for (let j = 0; j < 4; j++) { }를 2번 반복함
=> output은 '*\n**\n'로 아래의 형태를 출력됨
*
**
<script>
    let output = ''
    
    output += '*\n'			
    output += '**\n'
    output += '***\n'
    output += '****\n'
    output += '*****\n'
    output += '******\n'
    output += '*******\n'
    output += '********\n'
    output += '*********\n'
</script>

 

1-2) 피라미드 만들기(반쪽, *의 개수가 홀수로 산출)

  • 입력 코드 : 1-1번 문제의 코드에서 j < i + 1를 j < (2 * i +1)로 바꾸면 됨
<script>
    let output = ''
        for (let i = 0; i < 9; i++){
            for (let j = 0; j < (2 * i + 1); j++){
                output += '*'
            }
            output += '\n'
        }
    console.log(output)
</script>
  • 출력 결과

 

1-3) 피라미드 만들기(반쪽, *의 개수가 짝수로 산출)

  • 입력 코드 : 1-2번 문제의 코드에서 j < (2 * i +1)를 j < (2 * i)로 바꾸면 됨
<script>
    let output = ''
        for (let i = 0; i < 9; i++){
            for (let j = 0; j < (2 * i); j++){
                output += '*'
            }
            output += '\n'
        }
    console.log(output)
</script>
  • 출력 결과

 

2) 피라미드 만들기

  • 입력 코드
<script>
    let output = ''
        for (let i = 0; i < 14; i++) {
            for (let j = 0; j < 13 - i; j++) {	// for (let j = 14; j > i; j--)로 작성해도 됨
                output += ' '
            }
         for (let k = 0; k < (2 * i + 1); k++){	// *가 1, 3, 5...개로 증가하려면 2*i에 1을 더하면 됨 
                output += '*'
            }
            output += '\n'
    }
    console.log(output)
</script>
  • 출력 결과

 

3) 다이아몬드 만들기

  • 입력 코드
<script>
    let output = ''
    
    for (let i = 0; i < 9; i++){
        for (let k = 0; k < 9 - i; k++){
            output += ' '
        }
        for (let j = 0; j < (2 * i + 1); j++){
            output += '*'
        }
        output += `\n`
    }
    for (let i = 0; i < 10; i++){
        for (let k = 0; k < i; k++){
            output += ' '
        }
        for (let j = 0; j < (2 * (9 - i) + 1); j++){
            output += '*'
        }
        output += `\n`
    }
    
    console.log(output)
</script>
  • 출력 결과

 

 


 

※ [출처] 이 게시글은 복습의 목적으로 작성하였습니다. <혼자서 공부하는 자바스크립트(한빛미디어)>에서 발췌한 내용이 포함되어 있으니 자세한 내용은 꼭 해당 서적을 참고하셔서 학습 이해에 도움 받으시길 바라겠습니다.