[JavaScript] 배열(Array)

배열이란 프로그래밍 언어에서 지원하는 자료형 중 하나로, 번호가 붙은 첨자(index)로 여러 개의 자료를 저장할 수 있는 자료구조이다.

 

 

배열

let 배열이름 = ['데이터1','데이터2',...'데이터N']; // let은 var 혹은 const로 필요에 따라 변경가능

 

JavaScript에서 배열은 기본적으로 위와 같은 형식을 가진다.

처음에 배열의 자료형을 선택한다. ( let, var, const와 같은 값이 올 것이다.)

 

그 다음에는 배열의 용도에 맞게 이름을 정해주고, 대괄호로 감싼다.

배열의 각 값들은 대괄호 안에 나열한다.

프로그래밍 언어에서 배열 인덱스를 관리하는 법

 

배열 내의 각 데이터들은 순서대로 인덱스 0번, 1번, ... , 과 같은 방식으로 관리할 수 있다

예를 들어, 2번째에 저장된 '데이터2' 라는 값을 콘솔에 출력한다면 아래와 같이 코드를 작성해야할 것이다.

console.log(배열이름[1])

 

컴퓨터에서 번호를 매길 때는 1번부터가 아닌 0번부터 인덱싱하기 때문에 2번째 위치는 인덱스 상으로 1번이 될 것이다.

 

 

예시를 통해 알아보자.

let student = ['minu', 'binu', 'yewon', 'sebin'];
console.log('0번 인덱스의 값 : '+student[0]);
console.log('1번 인덱스의 값 : '+student[1]);
console.log('2번 인덱스의 값 : '+student[2]);
console.log('3번 인덱스의 값 : '+student[3]);

 

위 student라는 배열은 학생 4명의 이름을 저장하고 있다.

아래의 콘솔 출력문에서 student[0]으로 minu라는 값을 불러오고, student[1]으로 'binu'라는 값을 불러오는 식으로 출력을 진행한다.

 

결과

 

 

 

우리는 위처럼 하나하나 인덱스 번호를 증가하면서 출력할수도 있겠지만, 반복적으로 1씩 증가하므로 반복문을 사용하여 변경할 수 있다.

출력하는 부분을 반복문을 사용하여 정리해보면

let student = ['minu', 'binu', 'yewon', 'sebin'];
for(let i=0;i<student.length;i++){
    console.log(i+'번 인덱스의 값 : '+student[i]);
}

 

지금은 4번밖에 출력하지 않아서 코드의 양이 비슷해보이지만, 10번, 100000번을 출력해야하는 상황이라면 반복문을 사용하는 것이 훨씬 효율적이라는 것을 알 수 있을것이다.

 

위 코드에서 반복문 내부의 i 범위를 student.length로 정했는데, 만약에 이 부분을 4로 정해둔다면 배열의 값이 추가되고 삭제됨에 따라 값을 변경해줘야 할 것이다.

따라서 배열의 개수를 반환하는 .length를 사용하여 좀 더 효율적인 코드로 작성한 것이다.

 

 

 

.length와 같이 우리의 코딩에 편리함을 주는 여러 내장함수들에 대하여 설명하고 마무리하겠다.

 

.toUpperCase()

선택된 데이터를 모두 대문자로 변경한다.

let student = ['minu', 'binu', 'yewon', 'sebin'];
console.log(student[2].toUpperCase());

 

 

결과

 

 

 

 

.toLowerCase()

선택된 데이터를 모두 소문자로 변경한다.

let student = ['MINU', 'BINU', 'YEWON', 'SEBIN'];
console.log(student[2].toLowerCase());

 

 

결과

 

 

 

.push(추가할 데이터)

배열의 마지막에 데이터 하나를 추가한다.

let student = ['minu', 'binu', 'yewon', 'sebin'];

console.log(student);

student.push('James'); // 'James'라는 문자열 추가

console.log(student);

 

 

결과

 

 

 

.unshift(추가할 데이터)

배열의 마지막이 아닌 앞부분에 데이터 하나를 추가한다.

let student = ['minu', 'binu', 'yewon', 'sebin'];

console.log(student);

student.unshift('mimi');

console.log(student);

 

 

결과 

 

 

 

.concat([추가할 데이터 배열])

배열의 마지막에 입력된 배열을 붙인다. 

두 문자열을 붙인 후 반환값으로 바로 반환되기 때문에 배열에 적용하려면 코드를 조금 다르게 작성해야한다.

let student = ['minu', 'binu', 'yewon', 'sebin'];

console.log(student);

student = student.concat(['James', 'Amy']); // student.concat(['James', 'Amy'])라고만 작성하면 아무일도 일어나지 않음

console.log(student);

 

student.conat(['James' , 'Amy']) 라고 코드를 적으면 적용한 배열인 [ 'minu', 'binu', 'yewon', 'sebin', 'James', 'Amy' ] 가 반환된다. 적용된 배열이 반환되는 것이지 바로 기존 배열에 적용되는 것이 아니라서 student = student.concat(['James', 'Amy'])와 같이 기존 배열에 따로 적용해주어야 한다.

 

 

결과

 

 

 

 

 

.splice(추가할 위치, 위치로부터 삭제할 개수, 추가할 데이터1 , 추가할 데이터2,...,  추가할 데이터N)

위치를 정하여 그 위치에 요소들을 삭제하거나 하지않고 데이터를 끼워넣는 함수이다.

let student = ['minu', 'binu', 'yewon', 'sebin'];

console.log(student);

student.splice(2,0,'kitty');

console.log(student);

 

인덱스 번호 2번의 위치에서 아무것도 삭제하지 않고 그 위치에 'kitty'라는 값을 끼워넣는다는 뜻이다.

 

결과

 

 

만약에 선택한 위치에서 2개의 데이터를 삭제하고 싶다면 student.splice(2,2,'kitty')라고 적으면 된다.

let student = ['minu', 'binu', 'yewon', 'sebin'];

console.log(student);

student.splice(2,2,'kitty');

console.log(student);

 

 

결과

 

'yewon' 과 'sebin'이 사라지고 'kitty'가 추가된 것을 확인할 수 있다.

이로써 삭제되는 데이터는 입력한 수만큼 뒤로 삭제한다는 것을 알 수 있다.

 

 

 

 

.shift()

배열에서 첫 번째 요소를 제거하고 그 요소를 반환한다.

let student = ['minu', 'binu', 'yewon', 'sebin'];

console.log(student);

console.log(student.shift());

console.log(student);

 

student.shift()를 사용하면 제일 처음의 값인 'minu'가 반환된다. 그리고 배열인 student에서 'minu'는 존재하지 않게 된다.

배열에서 빼낸다고 생각하면 편할 것이다.

 

 

결과

초기 student 배열 - shift() 반환값 - 반환 후 student 배열

 

처음의 student 배열에서는 4개의 값이 모두 존재하지만, student.shift()를 실행한 후에는 제일 처음의 값인 'minu'가 사라진 것을 확인할 수 있다. 

반환된 값을 보기위해 console.log(student.shift())로 출력해보였다.

 

 

 

.pop()

배열에서 마지막 요소를 제거하고 그 요소를 반환한다.

let student = ['minu', 'binu', 'yewon', 'sebin'];

console.log(student);

console.log(student.pop());

console.log(student);

 

 

student.pop()을 사용하면, 제일 마지막의 'sebin'이라는 값이 반환된다. 따라서 console.log(student.pop())은 sebin이라는 값을 출력한다.

그 후에 student 배열을 출력해보면 pop()으로 제거되었기 때문에 'sebin'이라는 값이 사라진 것을 확인할 수 있다.

 

 

결과

초기 student 배열 - pop() 반환값 - 반환 후 student 배열