자바스크립트 배열 join, reverse, sort, push, pop, unshift, shift , slice , splice , filter , map , includes

배열

배열은 자바스크립트 객체의 특별한 형태입니다. 어떤 위치에 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않습니다. 배열은 비슷한 성격의 데이터들을 한 저장소에 저장해 놓고 필요할 때 데이터를 꺼내서 사용할 때 생성합니다. 

배열은 순서를 갖기 때문에 이를 기준으로 값을 추가하거나 제거할 수 있고, 모든 위치에 값이 있는지 확인할 수도 있습니다. 배열을 정렬해서 순서를 새로 지정할 수도 있습니다.

let 배열명 = new Array();
let 배열명 = [];

배열리터럴

배열 리터럴은 자바스크립트에서 새로운 배열을 만드는 데 사용하는 표기법입니다. 배열 리터럴은 대괄호([])를 사용합니다.

배열 리터럴에서는 각 요소의 값만을 포함한다. 배열의 경우는 앞 예제처럼 대괄호 내에 접근하고자 하는 원소에 배열 내 워치 인덱스 값을 넣어서 접근합니다. 배열 내의 첫 번째 원소는 인덱스 0부터 시작합니다. 

배열 생성

새 배열을 만드는 방법은 비어있는 배열을 만들고 값을 추가하는 방법이 있고, 배열을 만들면서 값을 추가하는 방법이 있습니다.  우선 빈 배열을 만들고 생성한 배열에 값을 추가해 보도록 하겠습니다.

let programingLangs = [];
programingLangs[0] = "C++"; // 0번 인덱스의 값 C++
programingLangs[1] = "JavaScript"; // 1번 인덱스의 값 JavaScript
programingLangs[2] = "Python"; // 2번 인덱스의 값 Python

document.write(programingLangs);

배열을 만듦과 동시에 값을 추가하겠습니다. 

let programingLangs = ["Javascript", "Python", "C++"]
document.write(programingLangs)

배열의 값

배열의 각 값들을 원소라도 합니다.

인덱스 번호를 이용하여 특정 순번의 값을 출력해 보겠습니다. 

document.write(programingLangs[0])

배열 원소의 개수 length 

배열 안의 원소의 개수를 확인 할 때는 length를 사용합니다. 배열의 개수는 반복문과 함께 쓰여서 배열의 값들을 출력할 때 자주 사용합니다. 

document.write(programingLangs.length);

join() 함수

join()을 이용하여 배열의 원소들을 연결하여 하나의 값으로 만들 수 있습니다. 

let fruits = ["cherry", "grape", "apple"]
let fruit1 = fruits.join(); // cherry,grape,apple 
let fruit2 = fruits.join('-'); // cherry-grape-apple
let fruit3 = fruits.join(' '); // cherry grape apple 각 원소마다 띄어쓰기를 붙여서 fruit1 변수에 저장

변수 명 fruits1에는 join 함수를 이용하여 배열의 원소들을 하나의 문자열로 합쳐서 저장했습니다. join 함수에 매개변수가 없으면 기본적으로 콤마(,)로 원소들을 구분하여 하나로 합쳐줍니다. 두 번째로 변수 명 fruits2에는 join 함수의 매개변수로 하이픈(-)을 사용했습니다. 그러면 출력된 것은 배열의 fruits의 원소들을 하이픈(-)으로 연결한 것을 확인할 수 있습니다.  세 번째로 변수명 fruits3에는 join 함수의 매개변수로 띄어쓰기(' ')를 사용했습니다. 그러면 출력된 것은 배열의 fruits의 원소들을 띄어쓰기(' ')로 연결한 것을 확인할 수 있습니다.

원래 배열 fruits의 원소들 값은 join 함수를 사용해도 변하지 않습니다. 

reverse() 함수

reverse 함수를 사용하여 원소의 순서를 반대로 정렬할 수 있습니다.

let reverseFruits = fruits.reverse();
document.write(reverseFruits); // 결과 apple,grape,cherry
document.write(fruits); // 결과 apple,grape,cherry

reverse 함수를 사용하면 원본 fruits의 순서도 변경됩니다.

sort() 함수

sort 메서드는 원소의 정렬을 오름차순, 내림차순, 알파벳순, 가나다순 등으로 변경할 수 있습니다. sort 메서드는 원본의 배열을 수정하게 됩니다. 

let fruitsSort = fruits.sort(); // 결과 ['apple', 'cherry', 'grape']

let numbers = [5,4,3,2,1];
numbers.sort();
document.write(numbers); // 결과 [1,2,3,4,5]

과일 이름은 알파벳 순서로 정렬되고, 숫자들은 작은 수에서 큰 수로 오름차순으로 정렬되어 있습니다. sort 메서드는 함수에 매개변수가 없을 때는 기본적으로 알파벳은 알파벳순,  숫자는 오름차순으로 정렬됩니다. 

다음으로는 sort의 매개변수를 입력하여 역순 또는 알파벳순의 반대, 숫자는 내림차순으로 변경한 예시를 보겠습니다.

fruits.sort(function () {
	return -1;
}

numbers.sort(function () {
	return -1;
}

document.write(fruits); // 결과 ['grape', 'cherry', 'apple']
document.write(numbers); // 결과 [5,4,3,2,1]

sort 메서드에 함수를 작성하고 결괏값으로 -1이 출력되도록 했습니다. 브라우저에서 확인하면 원소들의 기존에 순서를 그대로 역순으로 변경된 것을 볼 수 있습니다. 여기서 return의 값을 0이나 1로 변경하면 원소의 배열을 변경하지 않게 됩니다.

fruits.sort(function (a,b) {
	return b-a;
}

numbers.sort(function (a,b) {
	return b-a;
}

document.write(fruits); // 결과 ['apple', 'cherry', 'grape']
document.write(numbers); // 결과 [5,4,3,2,1]

매개변수로 a,b를 입력하고 return으로 b-a를 출력했습니다. 이렇게 fruits 배열의 원소들은 그대로 있고, 숫자로 된 numbers 배열의 원소들은 큰 수에서 작은 수로 내림차순 정렬된 것을 볼 수 있습니다. 

 

push() 함수

push 메서드를 이용하여 기존 배열의 마지막에 값을 추가할 수 있습니다. 

fruits.push('mandarin')
document.write(fruits) // 결과 ['apple', 'cherry', 'grape', 'mandarin']

pop() 함수

pop 메서드를 이용하면 기존 배열의 마지막 원소를 제거할 수 있습니다.

fruits.pop()
document.write(fruits) // 결과 ['cherry', 'grape', 'mandarin']

unshift() 함수

unshift 메서드를 이용하여 기존 배열의 원소의 가장 앞에 새 값을 추가할 수 있습니다. 

fruits.unshift('pear')
document.write(fruits) // 결과 ['pear', 'cherry', 'grape', 'mandarin']

shift() 함수

shift 메서드를 이용하여 배열의 첫 원소를 제거할 수 있습니다. 

fruits.shift();
document.write(fruits); // 결과 ['cherry', 'grape', 'mandarin']

slice() 함수

slice 메서드를 이용하면 기존 배열에서 지정한 범위의 원소를 추출할 수 있습니다. 이때 slice 매개변수로 시작번호와 끝 번호를 입력하면 끝 번호 이전 요소까지의 요소를 추출하게 됩니다. 주의할 것은 slice 함수는 원본 배열을 수정하지 않았다는 것입니다. 

let arr = [1,2,3,4,5];
let newArr = arr.slice(0,3);
document.write(newArr); // 결과 [1,2,3]

arr 배열은 그대로 있고 새로운 배열 newArr에는 인덱스 번호 0번부터 3번 이전까지의 값이 저장된 것을 볼 수 있습니다.

splice() 함수

splice 메서드를 이용하면 기존 배열에서 지정한 범위의 원소를 오려내여 추출할 수 있습니다. splice 메서드는 원본 배열을 수정합니다.

let arr2 = [1,2,3,4,5,6];
let newArr2 = arr.splice(0,3);
document.write(arr2); // 결과 [4,5,6]
document.write(newArr2); // 결과 [1,2,3]

arr2의 원소들 중 첫 번째부터 3번째 이전 요소까지가 추출되어 사라지고 4,5,6만 남아 있습니다. 

filter() 함수

filter 메서드는 주어진 함수의 조건을 통과하는 모든 원소를 모아 새로운 배열로 만들어줍니다. 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수입니다.

const numbers = [1,2,3,4,5,6];
const evenNumber = numbers.filter(function (item) {
	return item % 2 == 0;
});

document.write(evenNumber); // 결과 2,4,6

numbers 배열에서 filter 메서드를 이용하여 numbers 배열의 각 원소를 매개변수item으로 할당하여 함수안에서 해당 값이 2로 나누었을 때 나머지가 0인 요소만 추출했습니다. 

map() 함수

map 메서드는 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수입니다.

const numbers = [1,2,3,4,5,6];
const powerNumber = numbers.map(function (item) {
	return item * item;
});

document.write(powerNumber); // 결과 1,4,9,16,25,36

 

Includes() 함수

Includes() 함수는 배열 메서드 함수입니다. 값이 배열에 존재하는지 여부를 확인해서 불(Boolean) 값으로 true 또는 false를 반환합니다. 배열에 있는 값의 위치를 확인하지 않고도 존재 여부를 확인하는 방법입니다. 

const todoLists = ["shipping", "reading", "work"]

function displayTodoList(todoLists) { // 함수 선언
	return todoLists.includes('reading');
 }
 
 displayTodoList(); // 함수 호출