4.1. 배열

4.1.1. 배열 만들기

배열 : 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형

[ 요소, 요소, 요소, …]

const array = [273, 'String', 'true', function() {} , {}, [273, 103] ]

4.1.2. 배열 요소에 접근하기

배열 [인덱스]

자바스크립트는 가장 앞에 있는 요소를 0번째로 표현

const num = [273, 52, 103, 32]   //undefined
num[0]   //273
num[1]   //52

num[1+1] //103
num[1*3]  //32

4.1.3. 배열 요소 개수 확인하기

배열.length

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

alert(fruit.length) //4
alert(fruit[fruit.length] -1 )   //바나나

4.1.4. 배열 뒷부분에 요소 추가

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

배열.push(요소)

const todos = ['serve cvnt', 'eat the stage up', 'be a cvntress']

todos.push('eat shit down')

todos.push('get a bob')

alert(todos)

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

js에서 배열의 길이는 고정이 아니므로, n개의 요소를 가진 배열에도 강제로 n+10, n+20번째.. 인덱스에 요소를 강제 추가할 수 있음

const fruits = ['사과', '파인애플', '배']
fruits[10] = '귤'

alert(fruits)

4.1.5. 배열 요소 제거하기

인덱스로 요소 제거하기 splice()

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

const items = ['사과', '배', '파인애플']
items.splice(2,1) //배열의 2번째 인덱스로부터 1개 요소를 제거 , ['파인애플'] 제거된 요소가 배열로 리턴됨

값으로 요소 제거하기 indexOf()

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

const items = ['사과', '배', '파인애플']
const index = items.indexOf('배')

items.splice(index,1) //배열의 2번째 인덱스로부터 1개 요소를 제거 , ['바나나'] 제거된 요소가 배열로 리턴됨

indexOf() : 배열 내부에 찾는 요소가 없을 경우 -1 return

4.1.6. 배열의 특정 위치에 요소 추가하기

배열.splice(인덱스, 0, 요소) : 2번째 매개변수에 0을 입력하면 splice() 메소드는 아무 것도 제거하지 않음

const items = ['사과', '배', '파인애플', '오렌지']
items.splice(1,0, '바나나')

alert(items)   //사과, 바나나, 배, 파인애플, 오렌지

4.1.7. 확인 문제

• 1. 2번째 인덱스에 있는 값
  2. 3
  3. 바나나
  4. 32

• 2. 4, [1,2,3,4,5]

• 3. 1. 비파괴적
     2. 파괴적
     3. 비파괴적
     4. 비파괴적

4.2. 반복문

for in	for of	for
배열과 함께 사용	요소 값을 반복할 때	기본

4.2.1. for in 반복문

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

const todos = ['우유 구매', '업무 메일 확인', '필라테스 수업']

for (const i in todos){
   console.log(`${i}번째 할 일 : ${todos[i]}`)
}

4.2.2. for of 반복문

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

const todos = ['우유 구매', '업무 메일 확인', '필라테스 수업']

for (const todo of todos){
   console.log(`오늘의 할 일 : ${todo}`)
}

4.2.3. for 반복문

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

for (let i = 0; i<5; i++){
   console.log(`${i}번째 반복입니다`)
}

• 1부터 n까지 더하기

  let output = 0
  for (let i = 1; i<= 100; i++){
     output += i
  }
  console.log(`1~100까지 숫자를 모두 더하면 ${output}입니다`)

for 반복문과 함께 배열 사용하기

const todos = ['우유 구매', '업무 메일 확인', '필라테스 수업']

for (let i = 0; i < todos.length; i++){
   console.log(`${i}번째 할 일: ${todos[i]}`)
}

for 반복문으로 배열 반대로 출력하기

const todos = ['우유 구매', '업무 메일 확인', '필라테스 수업']

for (let i = todos.length -1 ; i >= 0; i--){ //배열의 마지막 요소부터 0까지 하나씩 빼면서 반복 
   console.log(`${i}번째 할 일: ${todos[i]}`)
}

4.2.4. while 반복문

while (불 표현식){
	문장
}

let i = 0
while (true){
   alert(`${i}번째 반복임`)
   i = i + 1
}

• while 반복문 기본

  let i = 0
  while (confirm('계속 진행할래?')){  //사용자가 확인을 누르면 true 가 되어 반복
     alert(`${i}번째 반복임`)
     i = i + 1
  }

while 반복문과 함께 배열 사용하기

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

while (i < array.length){
   console.log(`${i} : ${array[i]}`)
   i++
}

4.2.5. break 키워드

while (true) {
} break

• break활용

  for (let i = 0; true; i++){
     alert(i + '번째 반복문입니다')
  
  //진행 여부 물어보기
     const isContinue = confirm('진행할래?')
     if (!isContinue){ 
        break
     }
  }
  
  alert('프로그램 종료')

4.2.6. continue 키워드

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

for (let i = 0; i<5; i++){
   //현재 반복 작업을 중지하고 다음 반복 작업을 수행 
   continue
   alert(i)
}

• continue 활용 (1)

  let output = 0
  
  //반복문
  for (let i = 0; i <= 10; i++){
     //현재 반복 작업을 중지하고 다음 반복 작업을 수행 
     continue
     alert(i)
  }

• continue 활용 (2)

  let output = 0
  
  //반복문
  for (let i = 0; i <= 10; i++){
     
     if (i % 2 === 1){
        //홀수면 현재 반복을 중지하기 
        continue;
     }
     output += 1
  }
  alert(output)

4.2.7. 누적 예제

중첩 반복문을 사용하는 피라미드

• 중첩 반복문 사용 (1)

  //변수 선언 
  let output = ''
  
  //중첩 반복문
  for (let i = 1; i < 10; i++){
     for (let j = 0; j < i; j++){
        output += '*'
     }
     output += '\n'
  }
  
  console.log(output)

• 중첩 반복문 사용 (2)

  //변수 선언 
  let output = ''
  
  //중첩 반복문
  for (let i = 1; i < 15; i++){
     for (let j = 15; j > i; j--){
        output += ' '
     }
  
     for (let m = 0; m < 2 * i - 1; m++){
        output += '*'
     }
     output += '\n'
  }
  
  console.log(output)

4.2.8. 확인 문제

• 1

  #for in 반복문

  0

  1

  2

  3

  #for of 반복문

  사과

  배

  귤

  바나나

  #for of 반복문
  

• 2

  const가 아니라 변수인 let을 선언해야 한다
  

• 3

  let output = 1;
  for (let i = 1; i < 100; i++){
     output *= i;
  }
  console.log(output)

• 4

  //변수 선언
  let output = ''
  const size = 5
  
  // 위 절반 프린트 
  for (let i = 1; i <= size; i++) {
     let spaces = '';
     let stars = '';
  
     // 간격 만들기 
     for (let j = 0; j < size - i; j++) {
       spaces += ' ';
     }
  
     // * 만들기 
     for (let k = 0; k < 2 * i - 1; k++) {
       stars += '*';
     }
  
     console.log(spaces + stars);
   }
  
   // 바닥 절반 프린트 
   for (let i = size - 1; i >= 1; i--) {
     let spaces = '';
     let stars = '';
  
     // 간격 만들기 
     for (let j = 0; j < size - i; j++) {
       spaces += ' ';
     }
  
     // * 만들기 
     for (let k = 0; k < 2 * i - 1; k++) {
       stars += '*';
     }
  
     console.log(spaces + stars);
   }