JS 문법 - 배열

Class: 제로베이스
Created: December 1, 2022 1:02 PM
Type: Javascript
강의 명: 이론부터 실전까지 모든 것을 담은 자료구조/알고리즘

배열

여러 개체 값을 순차적으로 나열한 자료 구조
연속된 메모리 공간을 가지는 자료형을 배열이라 한다.
다양한 자료형들을, 하나의 배열 내에 저장할 수 있다.
배열 내 값을 요소(element)라고 하며, 배열 요소는 index 로 접근한다.

• 대표 속성(property)와 메소드(method)
  • 배열크기 및 배열 여부 확인: Array.length, Array.isArray( )
  • 배열 추가 및 삭제 : Array.push( ), Array.pop( ), Array.shift( ), Array.unshift( ), Array.splice( ), Array.slice( ) 등
  • 배열 탐색: Array.indexOf( ), Array.lastIndexOf( ), Array.includes( )
  • 배열 변형(callback 미사용): Array.sort( ), Array.reverse( ), Array.join( )

배열 선언 / 접근 / 속성

• 선언: “new Array( )” 혹은 “[ ]”을 통해 선언하며, 사이즈 혹은 값을 입력하여 초기화도 가능
• 접근방법: “Array[ index ]”를 통해 index를 통하여 O( 1 ) 접근
• 배열 속성: “Array.length”를 통해 배열 요소의 개수 확인 가능

// 선언
let arr_1 = new Array(10); //선언할 떄 배열 크기도 지정 가능
let arr_2 = [];
let fruits = ["apple",'orange','melon']

// 접근
console.log(fruits); // [ 'apple', 'orange', 'melon' ]
console.log(fruits.length); // 3
console.log(fruits[0]); // apple

// 배열 값 추가
fruits[3] = 'kiwi';
fruits.push('banana');
fruits['Add'] = 'grape'

console.log(fruits) 
//[ 'apple', 'orange', 'melon', 'kiwi', 'banana', Add: 'grape' ]

배열의 실체

자바스크립트에서는 배열은 다른 언어에서 말하는 일반적인 배열이 아닌 Hash 기반의 객체다

메모리가 연속적인 밀집 배열이 아닌 비 연속적인 희소 배열이다.

console.log(Object.getOwnPropertyDescriptors(fruits));
// {  '0': { value: 'apple', writable: true, enumerable: true, configurable: true},
//    '1': { value: 'orange', writable: true, enumerable: true, configurable: true},
//    '2': { value: 'melon', writable: true, enumerable: true, configurable: true},
//    '3': { value: 'kiwi', writable: true, enumerable: true, configurable: true},
//    '4': { value: 'banana', writable: true, enumerable: true, configurable: true},
//    length: { value: 5, writable: true, enumerable: false, configurable: false },
//    Add: { value: 'grape', writable: true, enumerable: true, configurable: true}
// }

배열 타입 확인

Array.isArray(value) - 해당 데이터가 배열인지 아닌지, true / false 값으로 반환

let num = 123.345;
let str = "hello";
let fruits = ["apple", "banana", "melon"];

console.log(Array.isArray(num)); // false
console.log(Array.isArray(str)); // false
console.log(Array.isArray(fruits)); // true

배열 요소 삭제

delete array[index] - 해당 인덱스 위치의 배열 요소를 삭제함. 하지만 삭제해도 그 값만 지워지고 배열의 공간은 그대로 비어있는 체로 남아있다.

let fruits = ["apple", "banana", "melon"];
delete fruits[1];
console.log(fruits); // [ 'apple', <1 empty item>, 'melon' ]
console.log(fruits.length) // 3

→ delete로 배열의 요소를 지워도 공간은 그대로 있음. 배열의 길이도 그대로다.

배열 조작

배열 추가 / 삭제(LIFO - Back)

LIFO = last in, first out 의 약자. 마지막에 들어온게 먼저 나간다. 스택에서 쓰이는 용어

• 배열 추가: Array.push(element)
• 배열 삭제: Array.pop( )

let fruits = ["apple", "banana", "melon"];
let ret;

// 배열 추가
ret = fruits.push("orange")
console.log(fruits); // [ 'apple', 'banana', 'melon', 'orange' ]
console.log(fruits.length); // 4
// push를 함과 동시에 배열의 length(크기)를 반환함을 알 수 있다.
console.log(ret); // 4

//배열 삭제
ret = fruits.pop();
console.log(fruits); // [ 'apple', 'banana', 'melon' ]
console.log(fruits.length); // 3
// pop은 삭제된 요소를 반환하는 것을 알 수 있다.
console.log(ret); // orange

배열 추가 / 삭제 (LIFO - Front)

• 배열 추가: Array.unshift(element)
• 배열 삭제: Array,shift( )

let fruits = ["apple", "banana", "melon"];
let ret;

// 배열 추가
ret = fruits.unshift("orange")
console.log(fruits); // [ 'orange', 'apple', 'banana', 'melon' ]
console.log(fruits.length); // 4
// unshift 는 배열의 length(크기)를 반환함을 알 수 있다.
console.log(ret); // 4

//배열 삭제
ret = fruits.shift();
console.log(fruits); // [ 'apple', 'banana', 'melon' ]
console.log(fruits.length); // 3
// shift는 삭제된 요소를 반환하는 것을 알 수 있다.
console.log(ret); // orange

index를 통한 배열 삭제 / 변경

Array.splice(인덱스, 잘라낼 요소 개수, 추가할 데이터)

매개변수로 받은 인덱스 이후로 배열을 잘라서 반환한다.
원본 데이터에 수정이 일어남. splice로 잘린부분 외의 요소들이 남게된다.

let fruits = ["apple", "banana", "melon", "orange"];
let ret;

// 예 1) 인덱스 번호만 입력했을 때
ret = fruits.splice(1)
console.log(ret); // [ 'banana', 'melon', 'orange' ]
console.log(fruits); // [ 'apple' ]

// 예 2) 인덱스 번호부터 몇개 자를건지
ret = fruits.splice(1,1)
console.log(ret)  // [ 'banana' ]
console.log(fruits) // [ 'apple', 'melon', 'orange' ]

// 예 3) 삭제하고, 삭제된 위치에서 데이터 추가
ret = fruits.splice(1,1, "mango", "kiwi");
console.log(ret); // [ 'banana' ]
console.log(fruits); // [ 'apple', 'mango', 'kiwi', 'melon', 'orange' ]

Array.slice( [start], [end] )

배열의 start 인덱스부터 end 인덱스 전까지 잘라서 반환한다.
splice와 다르게 원본 데이터에는 수정이 일어나지 않는다.

let fruits = ["apple", "banana", "melon", "orange"];

// start 인덱스 번호만 입력했을 때
console.log(fruits.slice(1)); // [ 'banana', 'melon', 'orange' ]
console.log(fruits); // [ 'apple', 'banana', 'melon', 'orange' ]

// start, end 인덱스
console.log(fruits.slice(1, 3)); //  'banana', 'melon' ]

// 음수
console.log(fruits.slice(-2, 3)); // [ 'melon' ]

다중 배열 병합

Array.concat (arg1, arg2…)

기존 배열데이터와 매개변수로 받는 배열데이터를 병합해서 새로운 배열데이터로 반환.
원본의 데이터는 손상되지 않음.

let fruits = ["apple", "banana", "melon"];
let add = ["cherry", "mango"];

console.log(fruits.concat(add)); 
// [ 'apple', 'banana', 'melon', 'cherry', 'mango' ]
console.log(fruits); 
// [ 'apple', 'banana', 'melon' ]

배열 반복문

• 다양한 반복문 문법을 통해 배열 요소에 접근 가능

let fruits = ["apple", "banana", "melon"];

// for … length (index 접근) 
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]); // i로 인덱스 번호 반환
}

// for … of (element 접근)
for (let fruit of fruits) {
  console.log(fruit); // 데이터 반환
}

// for … in (key 접근)
for (let key in fruits) {
  console.log(key); // key로 인덱스 번호 반환
  console.log(fruits[key]); // 인덱스 번호에 해당하는 데이터 반환
}

배열 탐색

• index 탐색 (앞에서부터) : Array. indexOf(item, from)
• index 탐색 (뒤에서부터) : Array. lastIndexOf(item, from)
• 값 포함 여부 확인: Array. includes(item, from)

let fruits = ["apple", "orange", "banana", "orange", "melon"];

// indexOf(찾을 요소, 탐색 시작점)
console.log(fruits.indexOf("orange")); // 1
console.log(fruits.indexOf("ORANGNE")); // -1 (값이 없음)
console.log(fruits.indexOf("orange", 2)); // 3
// lastIndexOf(찾을 요소, 탐색 시작점)
console.log(fruits.lastIndexOf("orange")); // 3
console.log(fruits.lastIndexOf("orange", -4)); // 1
console.log(fruits.lastIndexOf("orange", 0)); // -1 (값이 없음)
// includes(찾을 요소 이름)
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("BANANA")); // false

배열 변형

배열 정렬 : Array. sort( ) / 배열 반전 : Array. reverse( )

let nums = [1, -1, 4, 5, 2, 0]
console.log(nums.sort()); // [ -1, 0, 1, 2, 4, 5 ]
console.log(nums.reverse()); // [ 0, 2, 5, 4, -1, 1 ]
console.log(nums.sort().reverse()); // [ 5, 4, 2, 1, 0, -1 ]

let fruits = ['apple', 'cherry', 'banana']
console.log(fruits.sort()); // [ 'apple', 'banana', 'cherry' ]
console.log(fruits.sort().reverse()); // [ 'cherry', 'banana', 'apple' ]

배열 변환 : Array. join( seperator )

let fruits = ['apple', 'cherry', 'banana']
let str = fruits.join(); 
console.log(str); // apple,cherry,banana
console.log(str.split(',')); // [ 'apple', 'cherry', 'banana' ]