04 반복문
04-1 배열
배열은 여러 자료를 묶어서 활용할 수 있는 특수한 자료입니다.
배열 만들기
배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형입니다.
> const array = [273, 'String', true, function(){}, {}, [273, 103]]
> undefined
> array
> (6) [273, 'String', true, function(){}, {}, [273, 103]]배열 요소에 접근하기
각각의 요소에 접근하려면 배열 바로 뒤에 대괄호 [...]를 입력하고 그 안에 숫자를 넣습니다.
맨 처음 요소는 (0) 부터 시작됩니다.
배열 요소 개수 확인하기
배열 내부에 들어 있는 요소의 개수를 확인할 때는 배열의 length 속성을 사용합니다.
배열 뒷부분에 요소 추가하기
push() 메소드를 사용해 배열 뒷부분에 요소 추가하기
배열 뒷부분에 요소를 추가할 때는 push() 메소드를 사용합니다.
> const todos = ['우유 구매', '메일 확인', '운동']
> undefined
> todos
> (3) ['우유 구매', '메일 확인', '운동']
> todos.push('저녁 약속')
> 4
> todos.push('명상')
> 5
> todos
> (5) ['우유 구매', '메일 확인', '운동', '저녁 약속', '명상']인덱스를 사용해 배열 뒷부분에 요소 추가하기
자바스크립트의 배열의 길이는 고정이 아닙니다. 만약 배열이, 1~3번째까지 있는 경우 강제로 10번째 인덱스에 요소를 강제로 추가할 수 있습니다.
이때, 4~9번째까지의 인덱스는 empty가 됩니다.
인덱스로 요소를 추가하는 방법을 활용하면 아래와 같이 lengh 속성을 사용하여 배열의 마지막 위치에 요소를 추가할 수 있습니다.
> const fruitsB = ['사과', '배', '바나나']
> undefined
> fruitsB[fuitsB.length] = '귤'
> "귤"
> fruitsB
> (4) ["사과", "배", "바나나", "귤"]배열 요소 제거하기
배열에 요소를 제거하는 방법은 2가지 입니다.
- 첫째, 인덱스를 기반으로 제거하는 경우
- 둘째, 값을 기반으로 제거하는 경우
인덱스로 요소 제거하기
배열의 특정 인덱스에 있는 요소를 제거할 때는 splice() 메소드를 사용합니다.
splice는 접합의 의미로 다양하게 활용된다.
일부를 제거하는 경우에도 사용되지만, 중간에 다른 요소를 접합 즉, 중간에 요소를 추가할때에도 사용됩니다.
배열.splice(인덱스, 제거할 요소의 개수)> const fruitsB = ['사과', '배', '바나나']
> undefined
> fruitsB.splice(2, 1) >> 인덱스 2번부터 1개를 제거한다. (인덱스 2 = 바나나)
> ["바나나"]
> fruitsB
> ["사과", "배"]값으로 요소 제거하기
값을 기반으로 요소를 제거할 때는 배열 내부에서 특정 값의 위치를 찾는 indexof() 메소드를 사용해서 값의 위치를 추출한 뒤 splice() 메소드를 사용해 제거한다.
const 인덱스 = 배열.indexOf(요소)
배열.splice(인덱스, 1)indexOf()메소드는 배열 내부에 요소가 있는 경우에 인덱스를 리턴합니다.
만약, 배열 내부에 요소가 없는 경우 -1을 리턴합니다.
> const items = ['사과', '배', '바나나']
> undefined
> const index = items.indexOf('바나나')
> undefined
> index
> ["바나나"]
> items
> (2) ["사과", "배"]
> items.indexOf('바나나')
> -1배열의 특정 위치에 요소 추가하기
배열의 특정위치에 요소를 추가하는 코드는 자주 사용하지 않지만, 간혹 사용되지 알아보자.
splice()메소드를 사용합니다. splice() 메소드의 2번째 매개변수에 0을 입력하면, splice() 메소드는 아무 것도 제거하지 않으며, 3번째 매개변수에 추가하고 싶은 요소를 입력합니다.
배열.splice(인덱스, 0, 요소)04-2 반복문
for in 반복문
배열과 함께 사용할 수 잇는 반복문은 for in 반복문 입니다.
배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용합니다.
<script>
for (const 반복변수 in 배열 또는 객체) {
문장
}
</script><script>
//변수 지정
const todos = ['우유 구매', '업무 매일할일', '필라테스 수업']
//for in 반복문
for (const i in todos) {
console.log(`$(i)번째 할일 ${todos[i]}`)
}
</script>
for in 반복문은 구문 자체로 코드의양이 어느 정도 있어서 코드를 하나하나 입려하는 것이 힘들 수 있습니다. 이럴 때 코드 블록을 사용해주세요.
for in반복문은 안정적으로 쓰기위해선 추가로 코드를 입력해야된다. 가장 기초적인 반복문이라 알아보았지만, 이후 설명 하는for of반복문과for반복문을 활용하는 것이 좋다.
for of 반복문
for in 반복문의 안정성을 위해 나온 반복문이다.
<script>
for (const 반복 변수 of 배열 또는 객체) {
문장
}
// for in 문과 다르게 반복변수에 요소의 값이 들어갑니다.
</script>예시를 보게되면,
<script>
//변수 지정
const todos = ['우유 구매', '업무 매일할일', '필라테스 수업']
for (const todo of todos) {
console.log(`오늘의 할 일: ${todo}`)
}
</script>for 반복문
일반적으로 for 반복문은 특정회수만큼 반복하고 싶을때 사용하는 범용적인 반복문이다.
<script>
for (let i = 0; i < 반복 횟수; i++){
문장
}
</script>배열을 사용하는 경우
일반적으로 배열을 사용하는 경우는 배열의 length 메소드를 이용한다.
<script>
//변수 지정
const todos = ['우유 구매', '업무 매일할일', '필라테스 수업']
for (let i = 0; i < todos.length; i++ ) {
console.log(`오늘의 할 일: ${todo}`)
}
</script>while 반복문
while 반복문은 if 조건문과 형태가 매우 비슷한 반복문입니다. if 조건문과 다른 점은 문장을 한 번 만 실하고 끝나는 것이 아니라 불 표현식에서 true면 계속해서 문장을 실행한다는 것입니다.
while (불 표현식){
문장
}while 반복문의 경우 조건이 변하지 않는다면 무한루프에 빠질 수 있다.
때문에 아래와 같이 기본을 지키면서 사용해야된다.
<script>
let i = 0
while (confirm('계속 진행하시겠습니까?'){
alert(`${i}번째 반복입니다.`)
i = i + 1
}
</script>confirm에서 확인 버튼을 누르는 경우 >> true로 되어 반복
confirm에서 취소 버튼을 누르는 경우 >> false로 되어 정지
break 키워드
break 키워드는 switch 조건문에서와 같이 반복문을 벗어날 때 사용하는 키워드입니다.
while 반복문은 무한루프에 빠질수 있는데, break를 통해 무한루프를 빠져나올 수 있습니다.
<script>
while (true){
문장
} break
</script>continue 키워드
continue 키워드는 반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 잡업을 진행합니다.
<script>
// 변수를 선언합니다.
let output = 0;
// 반복문
for( let i = 0; i <= 10; i++){
continue
alert(i)
}
</script>코드가 실행되면, 경고창이 출력되지 않는다. continue 키워드로 인해 다시 다음 반복문이 실행이 된다.
