[JavaScript 6] 배열과 반복문

김헤일리·2022년 11월 10일
JavaScriptpreonboarding항해99
0

JavaScript

목록 보기
7/20
  • 기초 문법에도 배열과 반복문에 대한 개념이 정리되어 있지만, 보다 자세한 정보를 추가하고자 한다.
  • 숫자, 문자열, 불린 같은 자료는 하나의 값만 가질 수 있기 때문에, 다수의 자료를 저장하기 위해선 배열이 필요하다.
    • 배열이 없었다면 변수 선언은 무한대로 했을 것,,,,,,,

배열 (Array)

  • 여러개의 변수를 한번에 묶어서 선언할 수 있는 자료형 (자료의 형태)
  • 대괄호 [ ]를 이용해 생성하고 각 값(요소/element)는 쉼표(,)를 이용해 구분한다.
    • 배열에 포함된 요소들은 모두 고유 순서번호인 index가 부여된다.

1. 배열 요소에 접근하기

  • 배열[인덱스] 형식으로 접근한다.
    • 예시:
      const numbers = [1, 2, 3, 4, 5]
	numbers[0] = 1
	numbers[3] = 4
    • 배열의 인덱스는 [0]부터 시작된다.

2. 배열 요소 개수 확인

  • 배열.length를 사용해서 배열의 길이를 확인할 수 있다.
    • 예시:
      const fruits = ['배', '사과', '키위', '바나나']
    fruits.length = 4 
  	fruits[fruits.length-1] = "바나나"
    • fruits.length의 경우, 배배열에 4개의 요소가 들어있기 때문에 4를 출력한다.
    • fruits[fruits.length-1]의 경우, length가 4였기 때문에, (4 - 1 = 3)이므로, 인덱스가 [ 3 ]인 "바나나"가 출력된다.

3. 배열에 요소 추가

  • 배열.push(요소)를 이용해서 배열 뒷부분에 요소를 추가할 수 있다.

    • 예시:

      const fruits = ['배', '사과', '키위', '바나나']

 fruits = (4) ['배', '사과', '키위', '바나나']
 fruits.push('수박') = 5 
  	
fruits = (4) ['배', '사과', '키위', '바나나', '수박']
      • push 메소드로 요소가 추가될 경우, 기존 요소 개수에서 추가된 요소의 개수가 출력된다.

  • 인덱스 번호로도 배열 뒷부분에 요소를 추가할 수 있다.

    • 예시 1:

      const fruits = ['배', '사과', '키위', '바나나']

 fruits[10] = '귤'
  	
 fruits = (11) ['배', '사과', '키위', '바나나', empty x 6, '귤' ]
      • fruits라는 배열에 요소는 4개였지만, 10번 인덱스에 '귤'이라는 요소를 강제로 추가하여 배열 끝부분에 요소가 추가 되었음.
      • 이때 비어있는 인덱스의 요소들은 "empty"로 표시됨.

    • 예시 2:

        const fruits = ['배', '사과', '키위', '바나나']

   fruits[fruits.length] = '귤'

   fruits = (5) ['배', '사과', '키위', '바나나', '귤' ]
      • .length의 경우, 배열의 끝번째 인덱스를 의미 하기 때문에, 추가하고자 하는 요소의 인덱스를 표현할 수 있는 방법은 여러가지가 있다.
      • 배열의 끝에 넣고 싶을 때 length를 자주 사용한다.

  • 배열.splice(인덱스, 0, 요소) 방식을 이용해서 배열의 특정 위치에 요소를 추가하는 방식도 있다.

    • 예시:

        const fruits = ['배', '사과', '키위', '바나나']

   fruits.splice(1,0,'오렌지') = [ ]

   fruits = (5) ['배', '오렌지', '사과', '키위', '바나나' ]
      • .splice의 경우, 매개변수가 3개가 있는데, 그 중 두번째 매개변수의 값을 "0"으로 설정하면 배열에서 어떤 요소도 삭제되지 않는다.
      • 첫번째 매개변수가 추가하고자 하는 요소의 인덱스, 세번째 매개변수는 넣고자하는 요소가 되는 것이다.

4. 배열에 요소 제거

  • 배열.splice(인덱스, 제거할 요소의 개수)를 이용해서 인덱스를 기반으로 요소를 제거할 수 있다.

    • 예시:

        const fruits = ['배', '사과', '키위', '바나나']

   fruits.splice(2,1) = ['키워'] //리턴 시 제거되는 요소 출력

   fruits = (3) ['배', '사과', '바나나' ]
      • .splice의 경우, 매개변수를 2개만 사용할 수도 있는데, 이때 특정 인덱스로부터 n개의 요소를 제거할 수 있다.

  • const 인덱스 = 배열.indexOf(요소) 메소드를 이용해서 값의 위치를 추출하고, splice()메소드를 이용해서 특정 요소를 제거할 수 있다.

    • 예시:

        const fruits = ['배', '사과', '키위', '바나나']
  
   const index = fruits.indexOf('바나나')
  
   index = 3
  
   fruits.splice(index, 1)

   fruits = ['배', '사과', '키위']

      • "index" 라는 상수를 선언할 때 이 상수의 값을 제거하고자 하는 요소의 인덱스로 지정한다.

      • 이때 해당 요소의 인덱스가 출력된다.

      • 그리고 splice()를 이용해서 첫번째 매개변수에 제거하고자 하는 요소의 인덱스를 지정하고, 두번째 매개변수에 제거할 요소의 개수를 지정한다.


  • 문자열에도 indexOf()를 사용할 수 있다.

    • 예시:
        const stringA = ['동해물과 백두산이 마르고 닳도록']
  
   stringA.indexOf('백두산') = 5
      • '백두산'의 앞글자인 '백'이 띄어쓰기를 포함하여 문자열 5번째에 속함으로, 5를 출력하게 된다.

5. 자료의 파괴와 비파괴

  • 자바스크립트의 연산자, 함수, 메소드 등으로 자료를 처리했을 때 결과물에 따라 자료 처리를 비파괴적 처리와, 파괴적 처리로 구분할 수 있다.

    • 비파괴적 처리: 처리 후 원본 내용이 변경되지 않음
    • 파괴적 처리: 처리 후 원본 내용이 변경됨

  • array의 값이 push, splice 등으로 요소가 추가/제거 되는 것은 파괴적 처리로 구분된다.

반복문

1. for in 반복문

  • 배열과 함께 사용하고, 배열 요소를 하나씩 꺼내서 특정 문장을 실행할 때 사용한다.
  • 배열의 인덱스를 기반으로 반복할 때 사용
    • 예시:
       const todos = ['반복문 끝내기', '함수 끝내기', '내일은 챕터 8까지 끝내기']
  
  for (const i in todos){
    console.log(`${i}번째 할 일: ${todos[i]}`)
   }
      • 반복변수를 "i"로 설정하고, "i"에 배열의 요소들의 인덱스가 들어가서 문장 출력 시 배열에 있던 요소들이 순서대로 출력된다.

2. for of 반복문

  • 배열과 함께 사용하고, 요소의 값을 반복변수로 사용한다. 하나씩 꺼내서 특정 문장을 실행할 때 사용한다.
  • 배열의 값을 기반으로 반복할 때 사용
    • 예시:
       const todos = ['반복문 끝내기', '함수 끝내기', '내일은 챕터 8까지 끝내기']
  
  for (const todo of todos){
    console.log(`오늘의 할 일: ${todo}`)
   }
      • 반복변수를 배열의 요소로 지정하고 요소의 값을 반복할 때 안정적으로 사용할 수 있다.

3. Break 키워드

  • switch 조건문이나 반복문을 벗어날 때 사용하는 키워드다.

  • while 반복문은 조건이 항상 "참"이다.

    • while 반복문은 조건을 기반으로 반복할 때 사용한다.

  • 반복문의 조건이 "참"일 경우 끝나지 않는 무한 루프에 빠지기 때문에 Break 키워드를 사용해야 반복문을 중단할 수 있다.

    • 예시:

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

    const isContinue = confirm('계속 하시겠습니까?')
       if (!isContinue) {
          break
      }
 }
 alert('프로그램 종료')
      1. 첫번째 반복문의 조건이 "참"으로 되어있기 때문에 반복변수 "i"가 무한대로 커지며 끝나지 않는 1번 알림창이 생성된다.
      2. 이때 아래에 있는 isContinue라는 변수도 실행될때 영원히 끝나지 않게된다.
      3. 그래서 무한반복에 빠지지 않기 위해 if(!isContinue)를 추가해서 confirm 창에서 [CANCEL] 버튼 클릭 시 Break 키워드를 만나기 때문에 "프로그램 종료"라는 마지막 알림창을 만날 수 있다.

4. Continue 키워드

  • Continue 키워드는 반복문 안의 반복 작업을 멈추고 처음으로 돌아가 다음 반복문을 실행하게된다.

    • 예시:

      let output = 0

 for (let i = 1; i<=10; i++){
     if (i%2 === 1){
        continue
        alert('홀수입니다.')
     }
     output += i
 }
 alert(output)
    1. output이라는 변수를 0으로 지정한다.
    2. 반복변수 "i"는 1부터 시작하고, "i"가 10보다 작을때까지만 "i"가 1씩 증가하면서 반복문이 진행된다.
    3. 만약 "i"를 2로 나눈 나머지값이 1, 혹은 홀수라면, 원래 홀수입니다라는 알림창이 생성되어야 한다.
    4. 하지만 이전에 Continue 키워드를 만났기 때문에 알림창이 생성되지 않고 다시 반복문으로 돌아간다.
    5. 그렇기 때문에 변수 "output"에 짝수만 더하기할당이 된다.
      • 더하기할당: 피연산자의 값을 변수에 추가하고 해당 값을 다시 변수에 재할당
      • [새로운 output] = ([기존output] +i)

5. 중첩 반복문

  • for 반복문을 여러번 중첩 시켜 사용하는 것을 중첩 반복문 이라고 한다.
    • for 반복문은 횟수를 기반으로 반복할때 사용한다.
  • 중첩 반복문은 여러겹으로 쌓여진 배열을 n-차원 배열이라고 한다.
    • [1,2,3] - 1차원 배열
    • [[1,2,3],[4,5,6]] - 2차원 배열

1. 중첩 반복문 예시: 피라미드 만들기

let output = ''

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

console.log(output)

  1. output이라는 변수를 선언. 해당 변수는 값이 없다. (빈문자열)

  2. 반복변수 "i"가 1일 때, "i"가 10보다 작을때까지만 "i"의 값이 하나씩 증가하며 반복문이 실행된다.

  3. 2번의 조건이 "참"일 때, 두번째 반복문이 시작된다.

  4. 반복변수 "j"가 0일 때, "j"의 값이 "i"보자 작을때까지만 "j"의 값이 하나씩 증가하며 반복문이 실행된다.

  5. 4번의 조건이 "참"일 때, 비어있던 변수 output에 '*'이 더하기할당 된다.

  6. 변수 output에 '*'이 더하기할당 되면, 그 다음으로 해당 변수에 줄바꿈이 추가된다.

  7. 줄바꿈까지 추가되면 다시 첫번째 반복문부터 재실행된다.

  8. 상세해석:

    • i = 1, j = 0 일때, '*'은 1개가 생성되고, 줄바꿈이 일어난다.

    • output에 더하기할당이 되었기 때문에, output의 값은 '*'이 되었다.

    • 반복문 재실행 시, i = 2, j = 1이 되고, 첫번째 반복문을 통해 output의 값이 '*'이 되고, 두번째 반복문이 실행될 때 output의 값은 더하기 할당으로 인해, 줄바꿈 + '**'이 된다.

    • 세번째 반복문 실행 시 i = 3, j = 2이 되고, (여전히 조건은 "참") 두번째 반복문과 더하기할당을 통해 output의 값이 줄바꿈 + '**'이 되어있기 때문에 세번째 반복문에서 출력되는 값은 '***'이다.

    • 이렇게 i < 10이라는 조건이 "참"일때까지 반복되고 i = 1부터 시작했기 때문에, 

      *
 **
 ***
 ****
 *****
 ******
 *******
 ********
 *********

    • 이런 형태의 피라미드가 생성된다.


2. 중첩 반복문 예시: 피라미드 2

let output = ''

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

console.log(output)

  1. output이라는 값이 비어있는 변수를 선언 (공백)

  2. 반복변수 "i"가 1일 때, "i"의 값이 5보다 작을때까지만 "i"의 값이 하나씩 증가한다.

  3. 첫번째 반복문이 "참"일 경우, 두번째 반복문이 실행된다.

  4. 반복변수 "j"가 5일 때, "j"의 값이 "i"의 값보다 클때까지만 "j"의 값이 1씩 작아지는 반복문 실행

  5. 두번째 반복문이 "참"일 경우, 변수 output에 띄어쓰기 " "가 더하기할당된다.

  6. 그 다음, 세번째 반복문이 실행되는데, 반복변수 "k"가 0일때, "k"의 값이 2(i-1)보다 작을때까지 "k"가 하나씩 증가한다.

  7. 6번의 조건이 "참"일 경우, output의 값에 '*'이 1개 더하기할당된다.

  8. 모든 반복문이 최종적으로 돌고나면 변수 output에 줄바꿈(\n)이 더하기할당되고, 반복문들의 조건이 "거짓"이 될때까지 반복문이 실행된다.

  9. 상세해석:

    • i = 1, j =5, 일때, 변수 output에 띄어쓰기가 추가되어 값은 " "이 되어있는 상태다.

    • 이때 반복문(k)가 실행되고, k = 0 일때, k < (2*i)-1 의 조건이 k < 2-1임으로, "k"의 값이 하나 증가된다.

    • 반복문(k)의 결과로 " "이 되어있는 상태의 변수 output에 *이 더하기할당되어 " *"이 되고, 반복문들의 최종 결과값으로 줄바꿈이 일어난다.

    • 그 다음, 두번째 반복문이 실행된다.

    • i = 2, j = 5 일때, 변수 output의 띄어쓰기가 더하기할당되어 값이 " *"이 된다. (띄어쓰기 2번 들어감)

    • 그리고 다시 반복문(k)가 실행되고, k = 1일 때, k < (2*i)-1의 조건이 k < 4-1임으로, "k"의 값이 하나 증가된다.

    • 그리고 이번 반목문(k)의 결과로 " *"이었던 변수 output의 값이 " **"로 변하고, 반복문들의 최종 결과값으로 줄바꿈이 또 일어난다.

    • 이렇게 모든 반복문이 i < 5인 조건이 "참"일때까지 반복되기 때문에 최종 결과는

          *
    ***
   *****
  *******

    • 이런 형태의 결과물이 생성된다. "i"가 5보다 작을때까지 진행되고 "i"는 1부터 시작했기 때문에, 총 4줄의 피라미드가 생성된다.


아... 중간에 break랑 continue 키워드 정리했던 부분 날아가서 다시 작성하느라 오래 걸렸다...
저장을 생활화 하자고 배웠다..
그리고 중첩반복문은 미쳤다... 절대로 지금 혼자 생각 할 수 없다...

ㅎ....

출처: 혼자 공부하는 자바스크립트 (한빛미디어)

profile
김헤일리
공부하느라 녹는 중... 밖에 안 나가서 버섯 피는 중... 🍄
이전 포스트

[JavaScript 5] 용어와 자료 유형

다음 포스트

[JavaScript 7] switch 조건문과 짧은 조건문

0개의 댓글