8. 배열

배열(Array) 

변수를 묶음으로 다루는 것(변수가 연속적으로 나열) 

 

* JS 변수의 특징 

  1. 자료형 제한이 없다. 

  2. 길이의 제한이 없다. 

  (== Java Collenction List와 비슷)

 

* JS 배열 선언 방법 

  1. const arr1 = new Array(); -> 0칸짜리 배열 생성 

  2. const arr2 = new Array(3); -> 3칸짜리 빈 배열 생성 

  1. const arr3 = []; -> 0칸짜리 배열 생성 

  1. const arr3 = ['가', '나', '다']; -> 3칸짜리 초기화된 배열 생성 

const arr1 = new Array()
const arr2 = new Array(3)
const arr3 = []
const arr4 = ['가', '나', '다']

 

** 배열에 존재하지 않는 인덱스에 값을 대입하면 자동으로 추가되며 길이도 증가한다. 

    이때, 증가한 길이 중 값을 지정하지 않은 인덱스는 empty로 남아 있는다. 

const arr = []
arr[0] = "안녕?"
arr[1] = 123
arr[2] = true
arr[5] = "잘가~"

console.log(arr)

 

배열과 for문

1. 일반 for문: 배열, 컬렉션에서 사용 

const fruitArr = ["사과", "바나나", "망고", "포도", "자몽"]

for(let i = 0; i < fruitArr.length; i++){
    console.log(fruitArr[i])
}
// 결과: 사과 바나나 망고 포도 자몽

 

 

2. 배열.forEach(function(item, index) {반복 수행될 코드}) : 배열에서만 사용 가능

  - item: 현재 접근 중인 요소   /  index: 현재 인덱스 

  - 모든 배열함수가 함수를 매개변수로 받는다.

const fruitArr = ["사과", "바나나", "망고", "포도", "자몽"]

fruitArr.forEach(function(item, index){
    console.log(index + " : " + item)
})
// 결과
// 0 : 사과
// 1 : 바나나
// 2 : 망고
// 3 : 포도
// 4 : 자몽

 

 

3. for(item of 배열 또는 컬렉션){}  : 배열, 컬렉션

   : Java의 향상된 for문과 비슷하며 Symbol.iterator가 존재하는 객체에서만 사용 가능하다. 

const fruitArr = ["사과", "바나나", "망고", "포도", "자몽"]

for(let item of fruitArr) {
    console.log(item)
}
// 결과: 사과 바나나 망고 포도 자몽

Symbol.iterator : 결과창 Prototype을 열어보면 있음

 

응용: <li>에 있는 값을 얻어와 합 구하기 

const test = document.getElementsByTagName("li")
console.log(test)
// HTMLCollection(5) [li, li, li, li, li] -> forEach()문 제한 있음 

const listNum = document.querySelectorAll("#test > li")
console.log(listNum)
// NodeList [] -> 트리형태(자식과 부모형태로 가져왔음) : forEach()문 제한 있음 

// 즉 이런 경우는 일반 for문이나 for of문을 사용해야 함. 


// 1. 일반 for문
let sum = 0; 
for(let i = 0; i < listNum.length; i++) {
    sum += Number(listNum[i].innerHTML)
} 
console.log(sum) // 결과: 150

// 2. for of item
let sum2 = 0; 
for(let item of listNum) {
    sum2 += Number(item.innerHTML)
}
console.log(sum2) // 결과: 150

 

 

* 4. for(let key in 객체) : JS객체용 for문.. 

 

 

배열 관련 함수 

stack 구조와 관련이 있다.(First In Last Out) 

 

 - 배열.push() : 배열의 마지막 요소로 추가 

 - 배열.pop() : 배열의 마지막 요소를 꺼내옴

const arr = ["가", "나", "다", "라", "마"]

arr.push()
console.log(arr) // 결과 : ['가', '나', '다', '라', '마', '바']

arr.pop()
console.log(arr) // 결과 : ['가', '나', '다', '라', '마']

 

- 배열.indexOf("값") : 일치하는 값을 가진 요소의 Index를 반환, 없으면 -1 반환

const arr = ["사과", "포도", "수박"]

console.log(arr.indexOf("수박")) // 결과: 2
console.log(arr.indexOf("망고")) // 결과: -1

응용: 배열에 내가 원하는 값이 있는지 없는지 확인(자주 사용함)

const arr = ["사과", "포도", "수박"]

console.log((arr.indexOf("망고") != -1)) // 결과: false
// 1. (arr.indexOf("망고") 배열에 "망고"가 없으니 -1을 반환
// 2. -1 != -1 -> false 

console.log((arr.indexOf("수박") != -1)) // 결과: true
// 1. (arr.indexOf("수박") 배열에 "수박"이 있으니 수박의 인덱스 번호 2 반환
// 2. 2 != -1 -> true

 

 

- 배열.sort([정렬기준함수]) : 배열 내 요소를 오름차순으로 정렬(문자열), 정렬기준함수는 옵션으로 작성하면 결과가 달라짐

const arr = [2, 10, 5, 6, 1, 22, 51]

console.log(arr.sort()) 
// 결과: [1, 10, 2, 22, 5, 51, 6] -> 숫자의 원래 순서가 아닌 1, 1-1 처럼 정렬

console.log(arr.sort(function(a,b){return a-b}))
// 결과: [1, 2, 5, 6, 10, 22, 51] -> 오름차순

console.log(arr.sort(function(a,b){return b-a}))
// 결과: [51, 22, 10, 6, 5, 2, 1] -> 내림차순

console.log(arr)
// 결과: [51, 22, 10, 6, 5, 2, 1] -> 원래의 배열 순서도 바뀌게 된다. 
// 즉, sort()함수는 원본을 훼손시키는 함수로 원본을 유지하고 싶다면 깊은 복사를 사용하여 정렬해야 한다.

 

- 배열.toString() : 배열의 요소를 하나의 문자열로 출력 -> 요소 사이에   ,  추가

- 배열.join("구분자") : 배열 요소를 하나의 문자열로 출력 -> 요소 사이에 "구분자" 추가 

const arr = ["안녕", "자바", "스크립트"]
console.log(arr.toString()) // 결과: 안녕,자바,스크립트
console.log(arr.join("~"))  // 결과: 안녕~자바~스크립트

 

🥸 실습: 로또 번호 생성하기 

- 로또 번호: 6개의 난수, 중복X, 45번까지 있음, 오름차순 정렬 

const lottoBtn = document.getElementById("lottoBtn")
const resultArea = document.getElementById("resultArea")

lottoBtn.addEventListener("click", function(){
    lottoArr = []
    // 로또 번호를 담을 배열 

    while(lottoArr.length < 6) { 
 
        const random = Math.floor(Math.random() * 45 + 1)
        // 1 ~ 45까지의 난수를 저장할 변수 random(중복 비교할 때 사용)
        // 0부터 1까지의 난수이기 때문에 + 1을 해주어 0을 없애준다. 
        

        if(lottoArr.indexOf(random) == -1) {
            lottoArr.push(random)
        }
        // 중복검사
        // lottoArr 배열 안에 위에서 생성한 번호가 없다면 배열에 그 번호 추가 
        
    }
    resultArea.innerHTML = lottoArr.sort(function(a,b){return a-b}).join(" / ")
})