Growth from the root - Vanilla JavaScript - 배열

이형준·2023년 4월 24일
0
post-thumbnail

배열

📃 순서가 있는 컬렉션을 다뤄야 할 때 객체를 사용하면 순서와 관련된 메서드가 없어 불편함, 이럴 땐 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조인 배열을 사용하자.

배열선언

📃 아래의 문법들로 빈 배열을 만들 수 있음.
(ex)

let arr = new Array();
let arr = [];
let fruits = ["사과", "오렌지", "자두"];




✏️ 각 배열 요소에는 0부터 시작하는 숫자가 매겨져 있음, 이 숫자들은 배열 내 순서를 나타냄, 배열 내 특정 요소를 얻고 싶다면 대괄호 안에 순서를 나타내는 숫자인 인덱스를 넣어주면 됨.

let fruits = ["사과", "오렌지", "자두"];

alert( fruits[0] ); // 사과
alert( fruits[1] ); // 오렌지
alert( fruits[2] ); // 자두




✏️ 아래 같은 방법으로 요소를 수정 할 수 있음.

fruits[2] = '배'; // 배열이 ["사과", "오렌지", "배"]로 바뀜




✏️ 새로운 요소를 배열에 추가하는 것도 가능함.

fruits[3] = '레몬'; // 배열이 ["사과", "오렌지", "배", "레몬"]으로 바뀜




✏️ length를 사용하면 배열에 담긴 요소가 몇 개인지 알아낼 수 있음.

let fruits = ["사과", "오렌지", "자두"];

alert( fruits.length ); // 3




✏️ alert를 사용해 요소 전체를 출력하는 것도 가능함.

let fruits = ["사과", "오렌지", "자두"];

alert( fruits ); // 사과,오렌지,자두




✏️ 배열 요소의 자료형엔 제약이 없음.

let fruits = ["사과", "오렌지", "자두"];

alert( fruits ); // 사과,오렌지,자두



pop push shift unshift

📃pop

✏️ 배열 끝 요소를 제거하고, 제거한 요소를 반환.

let fruits = ["사과", "오렌지", "배"];

alert( fruits.pop() ); // 배열에서 "배"를 제거하고 제거된 요소를 얼럿창에 띄웁니다.

alert( fruits ); // 사과,오렌지

📃push

✏️ 배열 끝 요소를 추가함.

let fruits = ["사과", "오렌지"];

fruits.push("배");

alert( fruits ); // 사과,오렌지,배

📃shift

✏️ 배열 앞 요소를 제거하고, 제거한 요소를 반환.

let fruits = ["사과", "오렌지", "배"];

alert( fruits.shift() ); // 배열에서 "사과"를 제거하고 제거된 요소를 얼럿창에 띄웁니다.

alert( fruits ); // 오렌지,배

📃unshift

✏️ 배열 앞에 요소를 추가함.

let fruits = ["오렌지", "배"];

fruits.unshift('사과');

alert( fruits ); // 사과,오렌지,배



반복문

✏️ for 문은 배열을 순회할 때 많이 쓰는 방법, 순회시 인덱스 사용

let arr = ["사과", "오렌지", "배"];

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

✏️ for..of

let fruits = ["사과", "오렌지", "자두"];

// 배열 요소를 대상으로 반복 작업을 수행합니다.
for (let fruit of fruits) {
  alert( fruit );
}



length 프로퍼티

📃 배열에 무언가 조작을 가하면 length 프로퍼티가 자동으로 갱신됨, length 프로퍼티는 배열 내 요소의 개수가 아니라 가장 큰 인덱스에 1을 더한 값임.

let fruits = [];
fruits[123] = "사과";

alert( fruits.length ); // 124

배열을 이렇게 사용하지 않도록 합시다.

length 프로퍼티의 또 다른 독특한 특징 중 하나는 쓰기가 가능하다는 점입니다.

length의 값을 수동으로 증가시키면 아무 일도 일어나지 않습니다. 그런데 값을 감소시키면 배열이 잘립니다. 짧아진 배열은 다시 되돌릴 수 없습니다. 예시를 통해 이를 살펴봅시다.

let arr = [1, 2, 3, 4, 5];

arr.length = 2; // 요소 2개만 남기고 잘라봅시다.
alert( arr ); // [1, 2]

arr.length = 5; // 본래 길이로 되돌려 봅시다.
alert( arr[3] ); // undefined: 삭제된 기존 요소들이 복구되지 않습니다.

이런 특징을 사용하면 arr.length = 0 을 사용해 아주 간단하게 배열을 비울 수 있음.



다차원 배열

행렬을 저장하는 용도로 주로 사용.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

alert( matrix[1][1] ); // 5, 중심에 있는 요소



toString

배열에는 toString가 구현되어 있어 호출하면 요소를 쉼표로 구분한 문자열을 반환함.

let arr = [1, 2, 3];

alert( arr ); // 1,2,3
alert( String(arr) === '1,2,3' ); // true

alert( [] + 1 ); // "1"
alert( [1] + 1 ); // "11"
alert( [1,2] + 1 ); // "1,21"

alert( "" + 1 ); // "1"
alert( "1" + 1 ); // "11"
alert( "1,2" + 1 ); // "1,21"
profile
프론트엔드 개발자 이형준입니다.

0개의 댓글