[혼공자스] 04. 배열

 

 

 

배열 array

여러 자료를 묶어서 활용할 수 있는 특수한 자료
여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형

요소 element

배열 내부에 들어 있는 값
[요소, 요소, 요소, ... , 요소]

 

>const array = [273, 'String', true, function () { }, {}, [273, 103]]
undefined
>array
(6) [273, 'String', true, ƒ, {…}, Array(2)]

 

 

배열 요소에 접근하기
인덱스 : 요소의 순서
배열[인덱스]

>const numbers = [273, 52, 103, 32]
undefined
>numbers[0]
273
>numbers[1]
52
>numbers[1+1]
103
>numbers[1*3]
32

 

배열 요소 개수 확인하기
length: 배열 내부에 들어있는 요소의 개수를 확인할 때 사용
배열.length

>const fruits = ['배', '사과', '키위', '바나나']
undefined
>fruits
(4) ['배', '사과', '키위', '바나나']
>fruits[fruits.length-1]
'바나나'

    ㄴlength를 넣으면 1부터 시작해서 숫자를 센다. 요소와 배열로 들어가면 0부터 센다. 그래서 -1를 해준 것.

 

 

 

배열 뒷부분에 요소 추가하기

 

push( ) 메소드를 사용
배열.push(요소)

>const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
undefined
>todos
(3) ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
>todos.push('저녁 식사 준비하기')
4
>todos.push('피아노 연습하기')
5
>todos
(5) ['우유 구매', '업무 메일 확인하기', '필라테스 수업', '저녁 식사 준비하기', '피아노 연습하기']

push를 이용하여 뒷부분에 요소를 추가하면 숫자가 나오는데 이는 인덱스를 나타냄

※ const 는 상수인데 어떻게 변수처럼 사용이 가능하지? 라는 의문이 있을 수 있음. 이는 const 로 선언한 숫자 하나하나는 스택에 쌓여서 변경불가로 친다. 근데 배열을 const로 선언한 경우 배열은 힙이라는 곳에 있게 되고 힙에 있는 이 배열의 주소가 스택에 쌓이게 되는 것. 그래서 주소를 변경은 못하지만 힙에 있는 배열은 수정이 가능하다.

 

 

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

>const fruitsA = ['사과','배','바나나']
undefined
>fruitsA[10] = '귤'
'귤'
>fruitsA
(11) ['사과', '배', '바나나', empty × 7, '귤']

 

length속성을 사용하여 뒷부분에 요소 추가하기

>const fruitsB = ['사과','배', '바나나']
undefined
>fruitsB[fruitsB.length] = '귤'
'귤'
>fruitsB
(4) ['사과', '배', '바나나', '귤']

 

 

 

배열 요소 제거하기

 

인덱스로 요소 제거 "splice()" 메서드 사용"

접합 slice : 요소를 제거할 때도 사용/ 요소를 중간에 넣을 때도 사용

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

 

※ splice를 slice로 쓰지 않도록 조심 ※

>const itemsA = ['사과','배','바나나']
undefined
>itemsA.splice(2,1)
['바나나']
>itemsA
(2) ['사과', '배']

 

값으로 요소 제거 "indexOf( ) 사용하여 위치 추출 후 → splice( ) 사용해 제거" 

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

incdexOf() 메소드는 배열 내부에 요소가 있을 경우 인덱스를 리턴

배열 내부에 요소가 없을 때는 -1 리턴

 

>const itemsB = ['사과','배','바나나']
undefined
>const index = itemsB.indexOf('바나나')
undefined
>index //바나나의 위치 찾음
2
>itemsB.splice(index, 1) //바나나의 index
['바나나']
>itemsB
(2) ['사과', '배']
>itemsB.indexOf('바나나')
-1 //바나나는 배열에 없으므로 -1 리턴

 

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

 

배열의 특정위치(인덱스)에 요소를 추가할 때 "splice( ) 사용"

배열.splice(인덱스, 0, 요소)

>const itemsD = ['사과','귤','바나나','오렌지']
undefined
>itemsD.splice(1, 0, '양파')
[]
>itemsD
(5) ['사과', '양파', '귤', '바나나', '오렌지']

 

 

반복문 (for)

for in 반복문 "배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용"

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

 

<script>
    const todos = ['우유구매','업무 메일 확인','필라테스 수업']
    for (const i in todos) { //i는 반복변수
        console.log('${i}번째 할 일: ${todos[i]]')
    }
</script>

 

for of 반복문 

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

<script>
    cosnt todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
    for (const todo of todos) {
        console.log('오늘의 할 일: ${todo}')
    }
</script>

 

 

for 반복문 "특정 횟수만큼 반복하고 싶을 때 사용"

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

<script>
    //1부터 N까지 더하기
    let output = 0
    for (let i = 0; i <= 100; i++) {
        output += i
    }
    console.log('1~100까지 숫자를 모두 더하면 ${output}입니다.')
</script>

 

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

for 반복문은 배열과 함께 사용가능. 배열의 length속성 만큼 돌리는 형태로 사용.

<script> //for 반복문과 배열
    const todos = ['우유구매','업무메일확인','필라테스 수업']

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

<script> // for반복문으로 배열을 반대로 출력하기
    const todos = ['우유구매','업무 메일 확인','필라테스 수업']
    
    for (let i = 0; todos.length - 1; i >=0; i--){
        console.log('${i}번째 할 일 : ${i]}')
    }
</script>

 

 

반복문(while)

while반복문
불 표현식이 true면 계속 반복 (for 반복문처럼 한 번만 실행하고 끝나는 것 X)

<script> //무한 반복문
    let i = 0
    while (true) {
        alert('${i}번째 반복입니다.')
        i = i + 1
    }
</script>

<script> //while반복문 기본
    let i = 0
    while (confirm('계속 진행하시겠습니까?')) {
        //사용자가 [확인]버튼을 클릭하면 true가 되어 계속 반복.
        alert('${i}번째 반복입니다.')
        i = i + 1
    }
</script>

 

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

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

    while (i < array.length) {
        console.log('${i} : ${array[i]}')
        i++
    }
</script>

 

 

break키워드

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

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

        //진행 여부를 물어봅니다.
        const isContinue = confirm('계속하시겠습니까?')
        if (!isContinue) {
            break
        }
    }

    alert('프로그램 종료')
</script>

 

 

continue 키워드

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

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

    ㄴ 코드를 실행하면 경고창이 실행이 안됨. continue키워드를 만나면 바로 다음 반복작업으로 넘어가므로 alert()함수가 실행이 안됨.

 

<script>
    //변수를 선언
    let output = 0

    //반복문
    for (let i = 0; i < 10; i++) {
        //조건문
        if (i % 2 === 1) {
            continue
        }
        output =+ 1
    }

    //출력합니다.
    alert(output)
</script>

    ㄴ 조건문을 사용해서 홀수일 때 : continue 키워드를 만나 바로 다음 반복 작업으로 넘어가므로 짝수합만 구해짐.