1. JavaScript 기본 - 배열 내장 함수 (2)

6 ) splice, slice

splice: 배열에서 특정 항목을 제거할 때 사용. 

slice: 시작할 인덱스와 끝나는 인덱스를 입력하면 배열을 잘라줌. 

const arr6 = [1, 3, 5, 7, 9];
 
console.log(arr6.splice(3, 1));
console.log(arr6.slice(0, 2));


//출력
[1, 3, 5, 9]
[1, 3]

 

splice를 하여 arr6 배열에서 3번째 자리인 5가 삭제됨.

여기서 splice는 제거된 배열을 결괏값으로 가지게 됨.

 

slice를 하여 0번째 자리부터 2-1자리인 1번째 자리까지 반환함.

(2라서 2번째 자리가 아니라 -1을 해주어야 함)

 

 

 

7 ) shift,  pop

shift와 pop은 원소를 배열에서 추출해줌.

추출된 함수는 배열에서 삭제됨.

 

shift: 맨 앞에 있는 원소를 하나씩 꺼내 주는 역할.

pop: 배열의 맨 뒤부터 하나씩 꺼내주는 역할.

const numbers = [10, 20, 30, 40];
 
const value = numbers.shift();
console.log(value);
console.log(numbers);


//출력
10
[ 20, 30, 40 ]

shift를 하여 맨 앞의 원소를 하나 꺼냄.

빼낸 원소가 배열에서 삭제됨.

(만약 다 꺼내어 빈 배열이 됐는데 다시 shift를 하면 오류는 발생하지 않고 빈 배열로 남아있게 됨)

 

const numbers = [10, 20, 30, 40];
 
const value = numbers.pop();
console.log(value);
console.log(numbers);


//출력
40
[ 10, 20, 30 ]

pop을 하여 맨 뒤의 원소를 하나 꺼냄.

빼낸 원소가 배열에서 삭제됨.

 

 

 

8 ) unshift,  push

unshift: 배열의 맨 앞부분에 추가하는 것.

push: 배열의 맨 뒷부분에 추가하는 것.

const numbers = [10, 20, 30, 40];
numbers.unshift(5);
console.log(numbers);


//출력
[ 5, 10, 20, 30, 40 ]

unshift를 하여 배열의 맨 앞에 5가 추가됨.

const numbers = [10, 20, 30, 40];
numbers.push(50);
console.log(numbers);


//출력
[ 10, 20, 30, 40, 50 ]

push를 하여 배열의 맨 뒤에 50이 추가됨.

 

 

 

 

9 ) concat, join

concat: 여러 개의 배열을 하나의 배열로 합침.

join: 배열 안의 값들을 문자열 형태로 합쳐줄 때 사용.

const arr1 = [1,2,3]
const arr2 = [4,5,6]
 
const concated = arr1.concat(arr2)


//출력
[1,2,3,4,5,6]

concat를 하여 두 개의 배열을 하나의 배열로 만듬.

const array = [1, 2, 3, 4, 5];
console.log(array.join());
console.log(array.join(" "));
console.log(array.join(", "));


//출력
1,2,3,4,5
1 2 3 4 5
1, 2, 3, 4, 5

join을 하여 배열 값 사이를 원하는 형태로 넣어서

배열의 내용을 문자 하나로 합침.

 

 

 

10 ) sort

sort는 인풋 값에 아무것도 넣지 않으면 문자 순서로 정렬해줌.

let chars = ["나", "다", "가"];
let numbers = [1, 20, 3, 10, 2, 30];

chars.sort();
numbers.sort(compare);

console.log(chars);
console.log(numbers);

//출력
["가", "나", "다"]
[1, 10, 2, 20, 3, 30]

sort() 내장함수는 인풋 값에 아무것도 넣지 않으면 문자 순서로 정렬해주기에

숫자도 문자처럼 정렬이 됨.

 

숫자를 sort 하고 싶으면  compare 함수를 하나 만들어서 콜백함수로 전달해줘야 함.

let numbers = [1, 20, 3, 10, 2, 30];
 
const compare = (a, b) => {
if (a > b) {
return 1;
}
if (a < b) {
return -1;
}
return 0;
};

numbers.sort(compare);
console.log(numbers);


//출력
[1, 2, 3, 10, 20, 30]

compare 함수를 하나 만들어주자 숫자 순서대로 정렬이 됨.

 

 

 

11 )  reduce

reduce 함수는 잘 사용한다면 정말 유용한 함수.

주로 배열이 주어졌을 때 배열 안의 모든 값을 사용하여 연산을 해야 할 때 사용.

const numbers = [1, 2, 3, 4, 5];
 
let sum = 0;
numbers.forEach((n) => {
  sum += n;
});
 
console.log(sum);


//출력
15

배열 요소들의 합을 출력하는 코드.

 

reduce 함수를 사용하면 이를 한 줄로 간단히 작성할 수 있음.

 

const numbers = [1, 2, 3, 4, 5];
 
const sum = numbers.reduce((number1, number2) => number1 + number2, 0);
console.log(sum);


//출력
15

다음과 같다.

 number1는 누적된 값을 뜻하고 number2는 각 원소들을 뜻함.

 

세 번째 줄 마지막에 있는 0이 초기 number1가 되고

number2에는 배열의 첫 번째 값인 1이 들어감. 

 

그렇게 되면 number1은 0+1을 하여 1이 되고

number2는 두 번째 값인 2가 되어 1+2을 하게 됨.

 

그렇게 되면 number1은 3이 되고

number2는 세 번째 값인 3이 되어 3+3을 하게 됨.

 

이런 식으로 모두 더하게 되어 15가 되는 것임.