본문 바로가기
JS/JS 기초

JS- 배열(Array)

by 쫑뚱이 2022. 8. 25.
728x90
반응형

JS- 배열(Array)


오늘은 배열에 대해 알아보겠습니다.

 

배열은 순서가 있는 리스트로

비슷한 유형의 데이터들이

순서를 가지고 구성되어 있는 상태를

의미합니다.

 

배열이 유용한 이유는

모든 자료형 구조를 사용할 수 있으며

객체와 동일하게 수정과 추가, 삭제가 가능합니다.

 

배열은

let 배열 이름 = ['배열 내용1', '배열 내용2', ...];
//이런식으로 구성됩니다.

//배열을 호출하는 방식은
console.log(배열이름[0]; // 이럴 경우 배열 내용1이 호출됩니다.

이런 식으로 작성하는데

 

대괄호[] 안에 배치가 됩니다.

배열은 1부터 시작하는 것이 아니고

0부터 번호를 시작하기 때문에

가장 처음 배열의 요소는

0입니다.

 

배열을 사용할 경우 짧으면

상관이 없지만

엄청 긴 배열이 있다고 가정하시면

배열이 몇 개가 있는지 배열의 내용을 추가하거나

수정하는 경우 매우 오랜 시간이 걸릴 수 있습니다.

 

이럴 경우 배열에서 유용한 도구가 있습니다.

 

(1)

배열의 길이

 

배열의 길이란 배열이 몇 개로 구성되어 있는지

확인할 수 있는 것을 의미합니다.

 

앞서 말씀드렸듯이

배열이 짧으면 상관이 없으나

엄청 길어서 몇 개인지 확인할 때는

정말 많은 시간이 소요될 것입니다.

 

이럴 때 배열에서 length을 사용하면

빠르게 해결할 수 있습니다.

 

사용 방식은 

배열이름.length //이렇게 사용하면 배열의 길이를 확인 할 수있습니다.

 

(2)

배열의 끝에 추가

 

배열의 끝에 추가하는 방식은

 

빠르게 배열에 구성요소를 추가하는 방식으로

push()를 사용하시면 됩니다.

 

//예시를 보여드리면

let ex = ['배열1', '배열2', '배열3',]; 
//이렇게 3개로 구성된 배열에 push를 사용하면

ex.push('배열4')
//배열 마지막에 배열4를 추가할 수 있습니다.

 

(3)

배열 끝에 제거

 

배열의 끝에 추가하는 방식을 봤으니

이젠 제거하는 방식을 말씀드리겠습니다.

 

이때는 pop()을 사용하시면 됩니다.

사용 방식은 위에 추가하는

방식과 동일하게 사용할 수 있습니다.

 

(4)

배열 가장 앞에 추가/ 제거

 

이젠 맨 뒤가 아닌 가장 앞에 요소를

추가/ 제거하는 방식을 소개하겠습니다.

 

추가하는 방식은 unshift()를

제거하는 방식은 shift()를

사용하시면 됩니다.

 

사용 방식은 위에 방식과 동일합니다.

 

위에 배열에서 추가, 수정, 삭제, 길이를

확인하는 방식을 알아두시면 좋습니다.

 

배열을 사용할 때

반복문인 for문을 함께 사용할 수 있습니다.

 

예시를 보시면

let ex = ['배열1', '배열2', '배열3,' '배열4'];

for(let index = 0; index < days.length; index++){
    console.log(ex[index])
}

 

이런 식으로 사용할 수 있으며

위에 코드를 해석하면

 

1. 배열의 0부터 호출한다.

2. 이때 배열의 번호가 배열의 길이

보다 작다면

3. console.log로 ex배열을 호출할 것이다.

 

4. console.log가 호출되면 배열의 번호가 +1되고

5. 다시 2번으로 돌아가 배열의 번호가

배열의 길이보다 작은지 비교하고

 

결과가 false가 나올 때까지 진행된다.

 

이렇게 해석할 수 있으며

이런 식으로 for문과 응용하여 사용할 수 있습니다.

 

배열을 사용하는 이유는

빠르게 함수를 불러들일 수 있으며

정리하기도 편리하기 때문에 사용합니다.

 


 

오늘은 배열에 대해 알아보았습니다.

 

배열은 비슷한 유형의 데이터들을

순서가 있는 리스트로 정리하여

원하는 데이터를 호출하거나, 추가하거나,

제거하거나, 수정합니다.

 

감사합니다!

 

728x90
반응형

'JS > JS 기초' 카테고리의 다른 글

JS- 구조 분해 할당(Destructuring assignment)  (0) 2022.09.07
JS- 심볼(Symbol)  (0) 2022.08.30
JS- 객체(Object)  (3) 2022.08.25
JS- 인터프리터 언어  (0) 2022.08.25
JS- 함수 표현식과 함수 선언문의 차이, 화살표 함수  (0) 2022.08.20

댓글