[Javascript]자바스크립트 배열 활용법 정리(1/2)

[Javascript]자바스크립트 배열 활용법 정리(1/2)

안녕하세요 미나라이입니다.

 

이번포스팅에서는 자바스크립트의 배열의 활용법을 정리해보았습니다.

 

선언방식

// literal syntax 
const arr1 = [];
const arr2 = [1,2];

// constructor syntax 
const arr3 = new Array();

배열의 출력 방법

const fruits = ['Apple', 'Banana'];
// 배열 전체 출력
console.log(fruits);

// 배열 사이즈
var size = fruits.length; // 2

// 특정 인덱스 출력
var apple = fruits[0]; // Apple

(2) ['Apple', 'Banana']

배열을 이용한 반복처리 방법

const fruits = ['Apple', 'Banana'];

// a. for
console.log("a. for ---------------------");
for (let index = 0; index < fruits.length; index++) {
    console.log(fruits[index]);
}

// b. for of
console.log("b. for of ---------------------");
for (const fruit of fruits) {
    console.log(fruit);
}

// c. for in
console.log("c. for in ---------------------");
for (const fruit in fruits) {
    console.log(fruit);
}

// d. foreach
console.log("d. foreach ---------------------");
fruits.forEach(function(fruit, index) {
    console.log(fruit);
    console.log(index);
});

a. for --------------------- Apple Banana b. for of --------------------- Apple Banana c. for in --------------------- 0 1 d. foreach --------------------- Apple 0 Banana 1

배열에 항목을 추가하는 방법

배열에 항목을 추가하는 방법은 push와 unshift가 있습니다.

push : 배열의 가장 마지막 인덱스에 항목을 추가합니다.

unshift : 배열의 첫번째 인덱스에 항목을 추가합니다.

속도 측면에서는 마지막 인덱스에만 데이터를 추가하기 때문에 push가 빠릅니다.

※unshift는 첫번째 인덱스에 항목을 추가하기 때문에 기존 데이터의 인덱스 위치를 전부 이동시켜주어야 하기 때문에 상대적으로 속도가 느립니다.

const fruits = ['Apple', 'Banana'];

// push : add an item to the end
console.log("push ---------------------");
fruits.push('Strawberry');
console.log(fruits);
fruits.push('Orange');
console.log(fruits);

// unshift : add an item to the start
console.log("unshift ---------------------");
fruits.unshift('Lemon');
console.log(fruits);
fruits.unshift('Melon');
console.log(fruits);

push --------------------- (3) ['Apple', 'Banana', 'Strawberry'] (4) ['Apple', 'Banana', 'Strawberry', 'Orange'] unshift --------------------- (5) ['Lemon', 'Apple', 'Banana', 'Strawberry', 'Orange'] (6) ['Melon', 'Lemon', 'Apple', 'Banana', 'Strawberry', 'Orange']

배열의 항목을 삭제하는 방법

배열의 항목을 삭제하는 방법은 pop과 shift가 있습니다.

pop : 배열의 가장 마지막 인덱스의 항목을 삭제합니다.

shift : 배열의 첫번째 인덱스의 항목을 삭제합니다.

※배열 추가와 마찬가지로 속도 측면에서는 pop이 shift보다 빠릅니다.

const fruits = ['Melon', 'Lemon', 'Apple', 'Banana', 'Strawberry', 'Orange'];

// pop : remove an item from the end
console.log("pop ---------------------");
fruits.pop();
console.log(fruits);
fruits.pop();
console.log(fruits);

// shift : remove an item from the start
console.log("shift ---------------------");
fruits.shift();
console.log(fruits);
fruits.shift();
console.log(fruits);

pop --------------------- (5) ['Melon', 'Lemon', 'Apple', 'Banana', 'Strawberry'] (4) ['Melon', 'Lemon', 'Apple', 'Banana'] shift --------------------- (3) ['Lemon', 'Apple', 'Banana'] (2) ['Apple', 'Banana']

배열 중간에 항목을 삭제, 추가 하는방법

배열의 splice를 사용하면 됩니다.

splice(인덱스, 삭제할 항목수)를 적으면 됩니다.

삭제한 인덱스를 새로운 값으로 대체하려고 할 때는 세번째 이후 파라미터에 추가 할 값을 넣어주면 됩니다.

const fruits = ['Apple', 'Banana'];

fruits.push('Grape', 'Orange');
console.log(fruits);

// splice(index, count);
fruits.splice(1, 1);
console.log(fruits);

// add splice index in new data
fruits.splice(1, 1, 'Banana');
console.log(fruits);

복수의 배열을 하나로 합치는 방법

concat기능을 이용하면 됩니다.

const fruits = ['Apple', 'Banana'];
const fruits2 = ['Kiwi', 'Lime'];

const newFruits = fruits.concat(fruits2);
console.log(newFruits);

const newFruits2 = fruits2.concat(fruits);
console.log(newFruits2);

(4) ['Apple', 'Banana', 'Kiwi', 'Lime'] (4) ['Kiwi', 'Lime', 'Apple', 'Banana']

배열 검색 기능

indexOf : 해당 값의 인덱스를 취득합니다. 값이 없을 경우에는 -1을 반환합니다.

includes : 해당 값이 존재하는지를 체크합니다. true / false

lastIndexOf : 중복되는 값이 있을 경우 해당 값의 마지막 인덱스를 반환합니다.

const fruits = ['Apple', 'Banana'];

// find the index
console.log("search ---------------------");
console.log('Apple Index : ' + fruits.indexOf('Apple'));
console.log('Banana Index : ' + fruits.indexOf('Banana'));
console.log('Lemon Index : ' + fruits.indexOf('Lemon'));

// includes
console.log('Apple Includes : ' + fruits.includes('Apple'));
console.log('Lime Includes : ' + fruits.includes('Lime'));

// lastIndexOf
fruits.push('Apple');
console.log('Apple Index : ' + fruits.indexOf('Apple'));
console.log('Apple LastIndex : ' + fruits.lastIndexOf('Apple'));

Apple Index : 0 Banana Index : 1 Lemon Index : -1 Apple Includes : true Lime Includes : false Apple Index : 0 Apple LastIndex : 3