TIL 66 | 배열1

배열이란 무엇이며, 배열을 생성하는 방법, 요소를 참조,갱신,삭제하는 방법과 Array.length 프로퍼티에 대해 정리해본다

배열이란❓

배열(array)은 여러 개의 값을 순차적으로 나열한 자료구조. 특정한 요소들을 일렬로 일정하게 모아둔 집합이라고 할 수 있다. JS에 배열이라는 타입은 존재하지 않는다. 배열은 객체 타입니다.

배열의 생성❗

리터럴 방식을 통한 배열 생성

const arr = [19, 44, 'banna', false];

• 배열에 들어간 하나 하나의 데이터들을 '요소, element'라고 부른다. HTML의 요소와 구분하기 위해서 item이라고 부르기도 한다.
• 모든 데이터 타입이 배열의 요소로 들어올수 있다(배열도 들어올 수 있다)
• 배열의 요소는 순서가 있다(index : 0부터 시작한다)
• index : 배열 데이터 내부에 들어있는 특정한 데이터의 위치를 가르키는 숫자

생성자 함수로 배열 생성

• Array 생성자 함수를 통해 배열을 생성할 수 있다
• Array 생성자 함수는 new 키워드와 함께 호출하지 않아도 배열을 생성하는 함수로 동작한다(예시5)
• Array 생성자 함수는 전달된 인수의 개수에 따라 다르게 동작한다
  • new Array()에 전달된 인수가 1개이고, 숫자인 경우 length 프로퍼티 값이 인수인 배열을 생성한다(예시1)
  • 전달된 인수가 없는 경우 빈 배열을 생성한다.(예시2)
  • 전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열 생성(예시3,4)

-예시1-
const arr = new Array(3); // 배열의 길이가 3이지만 요소가 비어있는 배열이 생성된다. 
console.log(arr) // [empty × 3]

-예시2-
const a = new Array(); 
console.log(a) // []
  
-예시3-
const arr1 = new Array(1,2,3);
console.log(arr1) // [1, 2, 3]

-예시4-
const arr2 = new Array("orange","mango","apple");
console.log(arr2) // ["orange","mango","apple"]

-예시5-
const b = Array(1, 2, 3)

console.log(b) // [1, 2, 3]

Array.of 메서드로 생성하기

• ES6에서 도입된 Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성한다
• Array 생성자 함수와는 다르게 전달된 인수가 1개고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다(예시1)

-예시1-
const arr = Array.of(1) 
console.log(arr) // [1]

const arr1 = Array.of(1,2,3) 
console.log(arr1) // [1,2,3]

const arr2 = Array.of('string') 
console.log(arr2) // ["string"]

Array.from 메서드로 생성하기

• ES6에서 도입된 Array.from 메서드는 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다

const arr = Array.from({length:2, 0:'a', 1:'b'}) 
console.log(arr) // ["a", "b"]

const arr1 = Array.from('Hello') 
console.log(arr1) // ["H", "e", "l", "l", "o"]

배열 요소의 참조❗

요소에 접근하기

• indexing : zero base로 돌아가는 index를 활용해 배열의 요소(element)를 조회하는 방법을 말한다
• 요소에 접근하고 싶을 때에는 대괄호 표기법을 사용한다. 대괄호 내에는 접근하고 싶은 요소의 인덱스를 지정한다.
• 배열은 사실 인덱스를 나타내는 문자열을 프로퍼티 키로 갖는 객체이다. 따라서 존재하지 않는 프로퍼티 키로 객체의 프로퍼티에 접근했을 때, undefined를 반환하는 것처럼 배열도 존재하지 않는 요소를 참조하면 undefined를 반홚나다(예시2)

- 예시1-
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

console.log(numbers[1]) // 2
console.log(fruits[0]) //  Apple

-예시2-
const arr = [1, 2];
console.log(arr[3]); // undefined

const arr1 = [1, ,3]
console.log(arr1[1]); // undefined
console.log(arr1[3]); // undefined  

배열 안의 배열의 요소에 접근하기

• 배열 안의 배열을 중첩된 배열이라고 부른다.
• 중첩된 배열의 요소에 접근할 수도 있다

let myArray1 = [19, 44, 'good', [100, 200, 500], false]

console.log(myArray1[2]); //  'good'

console.log(myArray1[3]); // [100, 200, 500]

let myArray1[3] = [100, 300, 500]

-중첩된 배열의 요소에 접근하기-

console.log(myArray1[3][0]); // 100

배열 요소의 변경❗

요소의 추가

• 배열에도 요소를 동적으로 추가할 수 있다
• 존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가된다. 이때 length 프로퍼티 값은 자동 갱신된다(예시2)
• 인덱스는 요소의 위치를 나타내기 때문에 반드시 0 이상의 정수(또는 정수형태의 문자열)를 사용해야 한다. 만약 정수 이외의 값을 인덱스처럼 사용하면 요소가 생성되는 것이 아니라 프로퍼티가 생성된다. 이 때 추가된 프로퍼티는 length 프로퍼티 값에 영향을 주지 않는다.(예시3)

- 예시1 - 
const arr = [0];
arr[1] = 1;

console.log(arr) // [0, 1]
console.log(arr.length) // 2

- 예시2 - 
const arr1 = [0,1];
arr1[100] = 100;

console.log(arr1); // [0, 1, empty × 98, 100]
console.log(arr1.length) // 101

- 예시 3-
const arr2 = [];
arr2[0] = 1; 
arr2['1'] = 2; 
  
console.log(arr2) // [1, 2]

arr2['foo'] = 3
arr2.bar = 4
arr2[1.1] = 5
arr2[-1] = 6

console.log(arr2) // [1, 2, foo: 3, bar: 4, 1.1: 5, -1: 6]

console.log(arr2.length) // 2

요소값의 갱신

• indexing 기법을 사용하여 수정하고 싶은 값으로 재할당을 해준다
• 메서드로 요소를 갱신하는 다양한 case는 뒤에서 다루기로 한다

let myArray = [19, 44, 'good', false]

myArray[0] = 500
myArray[3] = true

console.log(myArray); // [500, 44, "good", true]

요소의 삭제

• 배열은 객체이기 때문에 배열의 특정 요소를 삭제하기 위해 delete 연산자를 사용이 가능하다. length 프로퍼티에는 영향을 주지 않는다(삭제 후 길이가 변하지 않음)
• 메서드로 요소를 삭제하는 다양한 case는 뒤에서 다루기로 한다(희소배열을 만들지 않으면서 요소를 삭제하려면 .splice() 메서드를 사용해야 한다)

const arr3 = [1, 2, 3]

delete arr3[1];

console.log(arr3) // [1, empty, 3]
console.log(arr.length) // 3

length 프로퍼티❗

배열의 길이 구하기

• 배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다
• 리터럴 방식으로도 사용할 수 있다(예시2)

- 예시1-
let myArray = [19, 44, 'good', false]
console.log(myArray.length) // 4

- 예시2-
console.log([1, 2].length) // 2 (리터럴 방식으로 사용)

빈배열의 개수

• 빈 배열은 개수가 0으로 출력된다.
• 내용을 시각적으로 볼 수 없는 경우, 배열 데이터를 확인하는 경우에 이 방법 많이 쓰인다

console.log([].length) // 0                                 
                              

for문을 통해 순차적으로 요소에 접근하기

• 배열은 index와 length 프로퍼티를 갖기 때문에 for문을 통해 순차적으로 요소에 접근할 수 있다

let myArray = [19, 44, 'good', false]

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

[출력 되는 값]
19
44
"good"
false

배열의 길이와 인덱스를 이용하여 배열의 마지막 요소에 접근(인덱스가 0번부터 시작하는 속성 이용)

let myArray4 = [19, 44, 'good', [100, 200, 500], false]
let myArray5 = [900, 800, 700, 600]
let myArray6 = [7, 77, 777, 7777, 77777, 777777]

console.log(myArray4.length) // 5
console.log(myArray4[myArray4.length-1]); // false

console.log(myArray5[myArray6.length-1]); // 777777