본문 바로가기
Understanding JavaScript

[JS] What is Array?(배열이란?)

by Luciditas 2022. 12. 29.
728x90

배열이란? 

배열(array)이란 여러 개의 값을 순차적으로 나열한 자료구조를 뜻한다.

배열은 대괄호 [ ]를 사용해서 표현하고 그 안에 들어가는 값을 배열의 요소(element)라고 한다.

여기서 요소의 순번을 인덱스(index)라고 하는데 주의할 점은 이 순번은 0부터 시작한다는 것이다.

즉, 배열의 첫 번째 인덱스 값은 0이다.

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

[code] arr이라는 배열의 요소는 1,2,3,4,5,6,7,이고 각각의 index값은 0,1,2,3,4,5,6이다.

 

 

배열을 정의하는 표현에서 여러개의 값보다 더 중요한 것이 순차적이라는 표현이다.

왜냐하면 배열에서 요소의 순서가 다르다는 것은 다른 배열이라는 뜻이기 때문이다.

그렇다면 아래의 코드를 보고 두 배열이 같은 배열인지 확인해보자.

let arr1 = ['apple', 'pear', 'peach', 'watermelon', 'pineapple', 'orange'];
let arr2 = ['pear', 'watermelon', 'pineapple', 'peach', 'orange', 'apple'];
arr1 === arr2 // ture? or false?

arr1과 arr2는 서로 다른 배열이다.

두 배열의 순서가 다르기 때문이다.

arr1과 arr2를 보면서 인덱스와 요소를 다시 한 번 정리해보자.

arr1의 인덱스와 요소는 이렇게 볼 수 있겠네요!

arr1[0]: // 'apple'
arr2[3]: // 'peach'

[code] 배열의 인덱스 값을 넣으면 해당 인덱스의 요소를 알 수 있다.

배열의 특징

배열은 몇가지의 특징이 있다.

 

1 JavaScript의 모든 값은 배열이 될 수 있다.

  (원시값은 물론이고 객체, 함수, 배열등)

let arr1 = ['apple', 'pear', 'peach'];
let arr2 = ['apple', 7, function (){}, 8: eight];

2. 배열은 요소의 개수, 다시말해 배열의 길이를 나타내는 length 프로퍼티를 가집니다.

let arr1 = ['apple', 'pear', 'peach'];
console.log(arr1.length); // 3

3. 배열은 length 프로퍼티를 가지므로 for문을 통해 접근할 수 있어요!

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

[code] 배열의 순회를 통해서 배열의 모든 요소를 다 순회할 수 있다.

 

 

4. 배열은 객체(Object) 타입이다.

(배열이라는 타입은 존재하지 않는다.)

 

배열은 객체 타입이지만 일반 객체와는 구분되는 독특한 특징이 있습니다.

[표] 객체와 배열의 차이점. 제일 중요한 차이점은 값의 순서와 lenght 프로퍼티!!!

자주 사용하는 배열 매서드


Array.isArray(): 해당 코드가 배열인지 확인해주는 메서드, boolean 형태로 나타난다. ( = true, false의 형태)
 **console.table : table의 형태로 console 값을 나타내는 메서드 (참고: 배열의 메서드는 아님;)
- arr.push() : 새로운 index값을 추가해서 기존 index값 뒤로 index를 붙이고 기존 element값 뒤로 element를 붙인다.
 *예) arr.push('morning') -> 기존 배열의 마지막 index 값 뒤로 붙는다.
- arr.pop() : arr.push의 반대되는 개념으로 기존 배열의 마지막 index값과 element값을 제거한다.
 *예) arr.pop() -> 앞서 추가했던 'morning'이 삭제된다.
arr.shift() -> 맨 앞에있는 index값과 element값을 삭제한다.
arr.unshift -> 맨 앞에있는 index값과 element값을 추가한다.
arr.indexOf() :괄호 안의 element값의 index값이 얼마인지를 구할 수 있는 메서드.

★★★★

arr.push() / arr.pop() / arr.unshift() / arr.shift()는 새로운 배열을 만들어 내는 것이 아닌

기존의 함수에서 element만 맨 뒤에 이어 붙이고 맨 뒤에 있는 걸 삭제하고 / 맨 앞에 이어 붙이고 / 맨 앞에 있는 걸 삭제 하는 것이다.

★★★★

 

★★★★

.slice()는 복사 및 붙여 넣기다.
.concat()은 두 배열을 이어 붙이는 것이다.

이 두 메서드의 특징은 새로운 배열을 만들어야 한다는 것

★★★★

 



 *예) let words = ['How', 'are', 'you?'];
 words.indexOf ('are');
 라면 1이라는 값이 나온다. 여기서 1은 'are'라는 element의 index값이다.

 ** 만약 () 안에 변수로 선언한 배열의 단어를 넣지 않는 다면 -1이 나온다.

 --> 해당 단어가 변수로 선언한 배열에 속해 있는지 알 수 있는 방법
 *예) words.indexOf('are')  !== -1 / words.indexOf('arm')  !== -1
 *답) true                                / false

- function hasElement(*arr*, *element*) {
   let isPresent = *arr*.indexOf (*element*) !== -1;
   return isPresent;
}
 *arr*, *element*은 다른 걸로 대체 가능 (*att*과 *element*는 예시일 뿐이다 헷갈리지 말자.)
 * hasElement (배열, 찾으려는 엘리먼트) -> true or false로 나오게 하고 싶음

 

728x90