[ JavaScript ] 자바스크립트 기본 문법 | 배열(Array) 제어(push, concat, pop, unshift,splice, shift, sort) | 정렬, 추가, 삭제

이미지 출처 :   https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

 

 

자바스크립트 기본 문법  ::  배열(Array)이란?

 

 

 

배열(array)이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입입니다.

변수가 하나의 데이터를 저장하기 위한 것이라면,

배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있겠죠. 

 

대괄호([])는 배열을 만드는 기호입니다.

대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 됩니다.

 

예시를 보면 바로 쉽게 이해가 되실거예요.

 

 

 

var member = ['hi', 'hello', 'hoho']
console.log(member);

 

 

배열에 담겨져 있는 각각의 데이터는 원소(Element)이라고 불립니다.

이제 이 데이터를 꺼내보겠습니다.

 

 

 

 

var member = ['hi', 'hello', 'hoho']
console.log(member[0]);
console.log(member[1]);
console.log(member[2]);

 

 

이를 실행하면 아래와 같은 결과가 나타납니다.

 

 

 

 

 

 

즉 배열에 담겨있는 값을 가져올 때는 대괄호 안에 숫자를 넣으면 됩니다.

 

우리는 이 숫자를 색인(index)라고 부르고, 이 색인은 0부터 시작합니다.

 

첫번째 원소(egoing)를 가져오려면 대괄호 안에 0을 넣어주고, 두번째는 1, 세번째는 2를 입력합니다.

이 값을 이용해서 배열에 저정된 값을 가져올 수 있습니다.

 

 

 

 

배열이 없다면

 

 

그렇다면 배열이 없다면 어떻게 될까요?

예를 들어 맴버의 이름을 제공하는 함수를 제공해야 한다고 해봅시다.

그런데 저번 포스팅에서도 말했듯이 함수는 하나의 값만을 반환(return) 할 수 있습니다.

 

이러한 상황에서, 함수가 갖고 있는 한계를 극복해줄 수 있는 것이 배열입니다.

 

 

아래 예시로 살펴보도록 하겠습니다.

 

 

function get_member1(){
    return 'hi';
}
console.log(get_member1());
 
function get_member2(){
    return 'hello';
}
console.log(get_member2());
 
 
function get_member3(){
    return 'hoho'
}
console.log(get_member3());

 

 

하나의 함수는 하나의 값만을 반환할 수 있기 때문에 위와 같이 각각의 회원정보를 반환하는 함수를 만들었습니다.

 

이제 배열을 이용한 예제를 살펴보도록 하겠습니다.

 

 

function get_members(){
    return ['hi', 'hello', 'hoho'];
}
var members = get_members();
console.log(members[0]);
console.log(members[1]);
console.log(members[2]);

 

 

코드가 훨씬 간단해졌죠?

이처럼 배열을 활용하면 함수가 가진 한계를 극복할 수 있다는 장점이 있습니다.

 

 

 

 

 

 

 

자바스크립트 기본 문법  ::  배열의 사용(반복문 활용)

 

 

배열의 진가는 반복문과 결합했을 때 나타납니다.

반복문으로 리스트에 담긴 정보를 하나씩 꺼내서 처리할 수 있기 때문입니다.

 

예시로 살펴보도록 하겠습니다.

 

 

 

function get_members(){
    return ['hi', 'hello', 'hoho'];
}
members = get_members();
// members.length는 배열에 담긴 값의 숫자를 알려줌 
for(i = 0; i < members.length; i++){
    // members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해줌.
    console.log(members[i].toUpperCase());   
}

 

위의 예제를 실행하면 아래와 같은 결과가 출력되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

위의 예시에 사용되는 .length 는 배열의 원소 개수를 알려주는 내장함수입니다.

또한 사용된 toUpperCase 는 대문자로 변환해주는 내장함수입니다.

 

 

배열은 복수의 데이터를 효율적으로 관리, 전달하기 위한 목적으로 고안된 데이터 타입입니다.

따라서 데이터의 추가/수정/삭제와 같은 일을 편리하게 할 수 있도록 돕는 다양한 기능을 가지고 있습니다.

 

몇가지 중요한 기능들만 살펴보도록 하겠습니다.

 

 

 

 

자바스크립트 기본 문법  ::  배열 제어 - 원소 추가

 

 

push

 

 

push는 배열의 끝에 원소를 추가하는 방법입니다.

예제로 살펴보도록 하겠습니다

 

 

 

var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f');
console.log(li);

 

 

 

 

 

배열의 끝에 'f' 원소가 추가된 것을 확인할 수 있습니다.

 

 

 

push는 한번에 하나의 데이터를 추가하는 명령어입니다.

여러개의 원소를 추가하고 싶다면 concat을 이용하면 됩니다.

 

 

concat

 

여러개의 원소를 추가하는 내장함수로 인자로 배열을 받습니다.

 

예시를 바로 보겠습니다.

 

 

var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']);
console.log(li);

 

 

 

 

 

 

 

 

unshift

 

배열의 시작점에 원소를 추가하고 싶다면 unshift 를 사용하면 됩니다.'

 

 

 

var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');
console.log(li);

 

 

 

 

 

이렇게 unshift 를 사용할 경우 z 의 인덱스가 0, a 가 1 ... 이런식으로 인덱스가 하나씩 밀려나게 됩니다.

 

 

 

 

splice

 

 

splice 는 첫번째 인자에 해당하는 원소부터

두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴합니다.

그리고 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가합니다.

 

말은 어려운데, 예시로 보면 생각보다 간단합니다.

 

 

 

var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 0, 'B');
console.log(li);

 

 

 

 

2 번째 인자에 0을 넣게 되면, 어떠한 원소도 삭제되지 않습니다.

 

 

 

 

 

자바스크립트 기본 문법  ::  배열 제어 - 원소 제거/정렬

 

 

 

shift

 

배열의 첫번째 원소를 제거하는 방법입니다.

 

 

var li = ['a', 'b', 'c', 'd', 'e'];
li.shift();
console.log(li);

 

 

 

 

 

 

 

 

pop

 

배열의 마지막 원소를 제거하는 방법입니다.

 

 

 

var li = ['a', 'b', 'c', 'd', 'e'];
li.pop();
console.log(li);

 

 

 

 

 

 

 

sort

 

원소를 정렬하는 내장함수 입니다.

 

 

var li = ['c', 'e', 'a', 'b', 'd'];
li.sort();
console.log(li);