09. 배열(Array)

1) 배열

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

- JS 변수의 특징 : 값이 저장되기 전까지 자료형이 지정되지 않음

- JS 배열 특징
1) 자료형 제한 X
2) 길이 제한 X
== Java의 Collection List와 비슷

- JS 배열 선언 방법
1) const arr1 = new Array(); // 0칸 짜리 배열 생성
2) const arr2 = new Array(3); // 3칸 짜리 배열 생성
3) const arr3 = []; // 0칸 짜리 배열 생성
4) const arr4 = ['사과', '딸기', '바나나']; // 3칸 짜리 초기화된 배열 생성

- 배열에 존재하지 않는 인덱스에 값을 대입하면 자동으로 추가되면서 길이가 증가

- 중간 인덱스를 건너뛰고 대입하면 건너 뛴 부분은 empty로 남는다

2) 배열 + for문 확인

1) 일반 for문 - 배열, 컬렉션

for(let i = 0; i < arr.length; i++){
  console.log(arr[i]);
}

2) 배열.forEach( function(item, index) { 반복수행 코드} ) - 배열만 가능
item : 현재 접근 중인 요소
index : 현재 인덱스
- 여러 요소를 얻어온 경우(HTMLCollection, NodeList)는 배열이 아니므로 forEach()문을 쓸 수 없다

arr.forEach( function(a, i) {
  console.log(i + " : " + a);
})

3) for( item of 배열(또는 컬렉션) ) {} - 배열, 컬렉션
  (symbol.iterator가 존재하는 객체에 사용가능)
  (== Java의 향상된 for문과 비슷하게 생김)
for(let item of arr){
  console.log(item);
}

4) for (let key in 객체) - JS 객체용 for문

✔️ li 태그에 작성된 값의 합 구하기
<button id="btn1"> 버튼 </button>
<ul id="test">
  <li>10</li>
  <li>20</li>
  <li>30</li>
  <li>40</li>
  <li>50</li>
</ul>

document.getElementById("test").addEventListener("click", function(){
  const list1 = document.getElementByTagName("li");
  // HTMLCollection
  const list2 = document.querySelectorAll("#test > li");
  // NodeList

  console.log(list1);
  console.log(list2);

  let sum = 0;

  for(let item of list2){
    sum += Number(item.innerText);
  }

  console.log("sum : " + sum);
})

3) 배열 관련 함수

(Stack 구조 관련 함수)
push() : 배열 마지막에 요소로 추가
pop() : 배열 마지막 요소를 꺼내옴

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

배열.sort([정렬 기준 함수])
배열 내 요소를 오름차순 정렬(문자열)
단, [정렬 기준 함수]가 작성되면 정렬 결과가 달라진다

배열.toString()
배열 요소를 하나의 문자열로 출력 ➡️ 요소 사이에 "," 추가

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

const arr = [];

arr.push("알");
arr.push("고");
arr.push("리");
arr.push("즘");
arr.push("공");
arr.push("부");

console.log(arr.toString());

const temp = arr.pop();
console.log(arr);
console.log(temp);

console.log(arr.indexOf('리'));
console.log(arr.indexOf('부'));

console.log(arr.sort);

const numArr = [5, 3, 2, 10, 1];
console.log(numArr.sort());

• 배열안의 값들을 숫자가 아니라 문자로 인식한다. 따라서 앞에 글자 1을 먼저 보고 정렬

console.log(numArr.sort(function(a,b){return a-b;}));
console.log(numArr.sort(function(a,b){return b-a;}));
console.log(numArr);

• sort() 함수는 원본 배열의 순서를 정렬한다. 즉, 원본 훼손이 발생한다( 깊은 복사를 이용해 해결할 수 있다 )

4) 로또 번호 생성기

<button id="btn3">로또 번호 생성기</button> 

[내가 푼 것]
document.getElementId("btn3").addEventListener("click", function(){
  let lotto = new Array(6);
  
  for(let i = 0; i < 6; i++) {
    lotto[i] = Math.floor(Math.random()*45 + 1);
    for(let j = 0; j < i; j++) {
      if(lotto[i] == lotto[j]) {
        i--;
      }
    }
  }
  
  lotto.sort(function(a,b){ return a-b });
  console.log("로또 번호 : " + lotto);
});

[선생님]
document.getElementById("btn3").addEventListener("click", function(){
  const lotto = []; // 빈 배열

  while(lotto.length < 6) { // 배열 요소가 6개 미만이면 반복
    const ran = Math.floor(Math.random()*45 + 1); // 1~45 난수

    //중복 검사
    if(lotto.indexOf(ran) == -1) { // 배열에 난수값이 없다면
      lotto.push(ran);
    }
  }

  lotto.sort(function(a,b){ return a-b }); // 오름차순 정렬
  console.log("로또 번호 : " + lotto);
});