javascript 배열,classList

배열

여러 개의 데이터를 보관하는 역할을 수행하는 객체이다.
이전까지 변수(또는 상수)에는 데이터를 하나씩만 대입할 수 있었지만, 배열을 사용하면 여러 개의 데이터를 대입할 수 있다.

let number = 3; //숫자 1개 대입
let numbers = [1, 2, 3]//배열을 이용해 숫자 세 개 대입!

배열을 만드는 두 가지 방법

1. 배열 리터럴
   쉼표로 구분한 값을 대괄호로 묶어서 표현

const arr = [1, 2, 3, 4, 5, 6, 7, 8] 

2. Array 생성자로 생성하기!
   배열을 만드는데 사용하는 기본 내장 생성자가 존재한다.

const arr = new Array(1, 2, 3, 4, 5, 6, 7, 8)

배열의 특징

배열 객체를 다루기 위해 알아두어야 할 몇 가지 특징들.

• 배열에 포함된 값 하나하나를 '배열요소'라고 한다.
• 각 배열 요소는 왼쪽부터 순서(번호)가 매겨진다. 이를 '인덱스 번호'라고 한다.
• 인덱스 번호는 0부터 시작한다.
• 배열 요소 수는 원하는 개수만큼 포함시킬 수 있으며, 0개일 수도 있다.
• 다양한 유형의 데이터를 포함할 수 있다. 숫자,문자열, 객체 등

인덱스 번호의 중요성

대괄호([])연산자를 이용해서 특정 인덱스 번호의 배열 요소를 참조할 수 있다. 참조할 수 있다는 것은 곧 읽거나 쓸 수 있다는 것을 의미한다.

const ohMyGirl = ["효정", "미미", "유아", "승희", "지호", "비니", "아린"]
console.log(ohMyGirl[0])//효정
console.log(ohMyGirl[2])//유아
console.log(ohMyGirl[5])//비니
console.log(ohMyGirl[9])//undefined!!

ohMyGirl[0] = "갓효정" //원래 효정이였지만, 갓효정으로 변경!
console.log(ohMyGirl)[0] //갓효정으로 나온다.

배열 메소드

배열은 객체이기에 메소드가 다수 정의되어 있다.(속성도)
유용하고 대표적인 메소드 몇가지만 적어 놓겠다.

종류가 너무나 다양하고 많아 다 보는것은 불가능하다. 그러므로 구글을 잘 이용하자!

Element.classList

classList 속성은 웹 요소(Element)로부터 클래스 콜렉션을 반환하는 속성이다.

<p class = "hello greet good">
  안녕하세요
</p>

const p = document.querySelector('p')
console.log(p.classList)

classlist를 사용하면 0:hello 1:greet 2:good 이렇게 나뉘어지는 것을 볼 수 있다.

관련 메소드