[javascript] 자바스크립트 array 사용 방법

참고: https://www.programiz.com/javascript/array

이 튜토리얼은 예제와 함께 javascript array를 배울 수 있도록 했습니다. array는 여러개의 값을 한번에 저장할 수 있는 객체입니다. 예를 들면

const words = ['hello', 'world', 'welcome'];

여기서 words가 array 입니다. 그리고 이 배열은 3개의 값을 저장하고있습니다.

array 생성하기

array는 다음의 두가지 방법으로 생성할 수 있습니다.

1. array 리터럴 사용하기

배열을 생성하는 가장 쉬운 방법은 array 리터럴 '[]'을 사용하는 것 입니다.

const array1 = ["eat", "sleep"];

2. new 키워드 사용

배열은 javascript의 new 키워드로도 생성할 수 있습니다.

const array2 = new Array("eat", "sleep");

위의 예제는 모두 두개의 항목을 가지는 배열을 생성하는 코드인데 배열을 생성할 때 array 리터럴을 쓰는걸 추천합니다. 다음은 여러가지 종류의 배열생성 예제입니다. array에는 함수나 다른 객체 등 다양한 항목을 저장할 수 있습니다.

// empty array
const myList = [ ];

// array of numbers
const numberArray = [ 2, 4, 6, 8];

// array of strings
const stringArray = [ 'eat', 'work', 'sleep'];

// array with mixed data types
const newData = ['work', 'exercise', 1, true];

const newData = [
    {'task1': 'exercise'},
    [1, 2 ,3],
    function hello() { console.log('hello'); }
];

 

array 내 항목에 접근하기

배열의 항목에 접근하려면 인덱스를 사용하면 됩니다. 인덱스는 1이 아닌 0 부터 시작합니다. 예를 들면

const myArray = ['h', 'e', 'l', 'l', 'o'];

// first element
console.log(myArray[0]);  // "h"

// second element
console.log(myArray[1]); // "e"

반응형

array에 항목 추가하기

배열에 항목을 추가하려면 빌트인 메소드 push()와 unshift()를 사용할 수 있습니다. push() 메소드는 항목을 배열의 마지막에 추가합니다.

let dailyActivities = ['eat', 'sleep'];

// add an element at the end
dailyActivities.push('exercise');

console.log(dailyActivities); //  ['eat', 'sleep', 'exercise']

unshift() 메소드는 배열의 맨 앞에 항목을 추가합니다.

let dailyActivities = ['eat', 'sleep'];

//add an element at the start
dailyActivities.unshift('work'); 

console.log(dailyActivities); // ['work', 'eat', 'sleep']

array 항목을 교체하기

베열에 인덱스로 접근하면 항목 추가나 수정을 할 수 있습니다.

let dailyActivities = ['eat', 'sleep'];

// this will add the new element 'exercise' at the 2 index
dailyActivities[2] = 'exercise';

console.log(dailyActivities); // ['eat', 'sleep', 'exercise']

두개의 항목을 가지는 배열이 있다고 가정하고 인덱스 3(네 번째 항목)에 항목을 추가하려 한다면 세 번째 항목은 undefined가 됩니다. 기본적으로 큰 인덱스 값을 사용해 항목을 추가한다면 사이의 정의 안된 인덱스에는 undefined 값이 설정됩니다.

let dailyActivities = [ 'eat', 'sleep'];

// this will add the new element 'exercise' at the 3 index
dailyActivities[3] = 'exercise';

console.log(dailyActivities); // ["eat", "sleep", undefined, "exercise"]

array에서 항목 지우기

pop() 메소드를 사용해 배열의 마지막 값을 지울 수 있습니다. 또한 pop() 메소드는 지운 마지막 값을 반환합니다. 예를 들면

let dailyActivities = ['work', 'eat', 'sleep', 'exercise'];

// remove the last element
dailyActivities.pop();
console.log(dailyActivities); // ['work', 'eat', 'sleep']

// remove the last element from ['work', 'eat', 'sleep']
const removedElement = dailyActivities.pop();

//get removed element
console.log(removedElement); // 'sleep'
console.log(dailyActivities);  // ['work', 'eat']

배열의 첫번째 항목을 지우려면 shift() 메소드를 사용할 수 있습니다. shift() 메소드는 배열의 첫 번째 항목을 지우고 지워진 항목을 반환합니다.

let dailyActivities = ['work', 'eat', 'sleep'];

// remove the first element
dailyActivities.shift();

console.log(dailyActivities); // ['eat', 'sleep']

array length

배열의 길이(배열이 가지고있는 항목의 갯수)는 length 속성으로 알 수 있습니다.

const dailyActivities = [ 'eat', 'sleep'];

// this gives the total number of elements in an array
console.log(dailyActivities.length); // 2

array 메소드

javascript에는 유용한 기능을 쉽게 쓸 수 있도록 다양한 array 메소드가 빌트인 되어있습니다. 일반적으로 많이 쓰이는 javascript array 메소드는 다음과 같습니다.

• concat(): 두개 이상의 배열을 하나로 합친 결과 반환
• indexOf(): 배열의 항목을 찾고 그 항목의 위치를 반환
• find(): 배열의 항목 중 테스트를 통과한 첫 번째 항목을 결과로 반환
• findIndex(): 배열의 항목 중 첫 번째로 테스트를 통과한 인덱스 반환
• forEach(): 포함된 모든 항목에 대해 함수 실행
• includes(): 특정 항목을 포함하고 있는지 확인
• push(): 새 항목을 배열의 끝에 추가하고 배열의 길이 반환
• unshift(): 배열의 시작에 새 항목을 추가하고 배열의 길이 반환
• pop(): 배열의 마지막 항목을 지우고 그 항목을 반환
• shift(): 배열의 첫 번째 항목을 지우고 그 항목을 반환
• sort(): 오름차순 정렬
• slice(): 배열의 일부를 선택해 새 배열로 반환
• splice(): 기존 항목을 지우거나 교체하고 새 항목 추가

javascript array 메소드 예제

let dailyActivities = ['sleep', 'work', 'exercise']
let newRoutine = ['eat'];

// sorting elements in the alphabetical order
dailyActivities.sort();
console.log(dailyActivities); // ['exercise', 'sleep', 'work']

//finding the index position of string
const position = dailyActivities.indexOf('work');
console.log(position); // 2

// slicing the array elements
const newDailyActivities = dailyActivities.slice(1);
console.log(newDailyActivities); // [ 'sleep', 'work']

// concatenating two arrays
const routine = dailyActivities.concat(newRoutine);
console.log(routine); // ["exercise", "sleep", "work", "eat"]

관련 글

자바스크립트 배열 생성