[ JavaScript ] JS 배열 (push, concat, pop, unshift,splice, shift, sort) | 정렬, 추가

이미지 출처 :        https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅 입니다.

 

---

- 배열(Array)이란?

 

배열이란 연관된 데이터를 하나의 변수에 그룹핑해서 관리하기 위한 방법입니다. 

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

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

 

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

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

 

 

var Fruit_basket = ['apple', 'orange', 'banana']
console.log(Fruit basket);

 

 

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

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

 

 

 

 

var Fruit_basket = ['apple', 'orange', 'banana']
console.log(Fruit_basket[0]);
console.log(Fruit_basket[1]);
console.log(Fruit_basket[2]);

 

 

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

 

 

 

 

 

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

 

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

 

첫번째 원소를 꺼낼려면 대괄호안에 0을넣어주고두번째 원소를 꺼낼려면 대괄호안에 1 세번째는 2를 입력하면 배열에 저장되어있는 데이터를 가져올수있습니다.

 

 

 

 

- 배열이 존재하지않는다면

 

 

과일의 이름을 제공해주는 함수가있을때 어떻게 제공해야할까요?

함수는 하나의 값만 반환할 수있기때문에 배열을 사용하여 함수가 가지고있는 단점을 해결할수있습니다.

 

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

 

 

function get_fruit(){
	return "apple"
}
console.log(get_fruit());

function get_fruit2(){
	return "banana"
}
console.log(get_fruit2());

function get_fruit3(){
	return "orange"
}
console.log(get_fruit3());

위의 예시와 같이 각각의 과일들을 리턴해주는 함수가 필요합니다.

 

 

 

 

 

 

function get_fruit(){
    return ['apple', 'banana', 'orange'];
}
var fruit = get_fruit();
console.log(fruit[0]);
console.log(fruit[1]);
console.log(fruit[2]);

하지만 배열을 사용하게된다면 하나의 함수안에 훨씬 편하게 구현가능합니다.

 

 

 

 

 

 

 

- 배열의 사용(반복문 활용)

반복문과 배열을 함께 사용한다면 더욱 효율적으로 코드를 짤 수있습니다.

 

function get_fruit(){
    return ['apple', 'banana', 'orange'];
}
fruit = get_fruit();
// fruit.length는 배열에 담긴 값의 숫자를 알려줌 
for(i = 0; i < fruit.length; i++){
    // fruit[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해줌.
    console.log(fruit[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);

 

 

 

 

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.