[Javascript 기초] 배열 내장함수

배열 내장함수

 

1. toString()

2. join()

3. pop()

4. push()

5. shift()

6. unshift()

7. splice()

8. concat()

9. slice()

10. sort(), reverse()

---

1. toString()

toString 메소드는 배열을 문자열로 반환합니다.

const colors = ["red", "green", "blue"];
const result = colors.toString();

console.log(result); // red,green,blue

 

2. join()

join 메소드는 배열의 모든 요소를 구분자를 활용해 연결해 하나의 문자열로 만듭니다.

const colors =["red", "green", "blue"];
const result = colors.join("+");

console.log(result); // red+green+blue

 

3. pop()

pop 메소드는 배열의 마지막 요소를 제거하고 리턴값으로 제거된 요소를 반환합니다.

const colors = ["red", "green", "blue"];
const result = colors.pop();

console.log(colors); // ['red', 'green']
console.log(result); // blue

 

4.push()

push 메소드는 배열의 끝부분에 하나 이상의 새로운 요소를 추가하고 새로운 배열의 길이를 반환합니다.

const colors =["red", "green", "blue"];
const result = colors.push("aqua", "black");

console.log(colors); // ['aqua', 'red', 'green', 'blue', 'black'];
console.log(result); // 5

 

5.shift()

shift 메소드는 배열의 첫 부분 요소를 제거하고 제거된 요소를 반환합니다.

const colors =["red", "green", "blue"];
const result = colors.shift();

console.log(colors); // ['green', 'blue']
console.log(result); // red

 

6. unshift()

unshift 메소드는 배열의 첫 부분에 새로운 요소를 추가하고 새로운 길이를 반환합니다.

const colors =["red", "green", "blue"];
const result = colors.unshift("pink");

console.log(colors); // ['pink', 'red', 'green', 'blue']
console.log(result); // 4

 

7. splice()

splice 메소드는 배열의 요소를 삭제 또는 교체하거나 새로운 요소를 추가합니다.

// 구문
array.splice(인덱스 위치, 제거할 요소의 수, 추가할 요소)

const colors =["red", "green", "blue"];

colors.splice(1, 1, "pink");
console.log(colors); // ['red', 'pink', 'blue']

colors.splice(1, 0, "black");
console.log(colors); // ['red', 'black', 'pink', 'blue']

 

8. concat()

concat 메소드는 인자로 주어진 배열 또는 값을 합쳐 새로운 배열로 반환합니다.

const colors =["red", "green", "blue"];
const colors2 = ["aqua", "pink", "violet"];
const colors3 = ["black", "orange"];
const result = colors.concat(colors2, colors3);

console.log(result); // ['red', 'green', 'blue', 'aqua', 'pink', 'violet', 'black', 'orange']

 

9. slice()

slice 메소드는 배열의 특정 범위를 복사해 새로운 배열로 반환합니다.

이때, 종료 지점 인덱스는 미포함이며 원본 배열은 유지됩니다.

// 구문
array.slice(시작 인덱스, 종료 인덱스)

const colors =["red", "green", "blue", "black", "pink"];
const result = colors.slice(1);
console.log(result); // ['green', 'blue', 'black', 'pink']

const nums = [12, 33, 24, 68, 6, 85, 47]
const scale = nums.slice(2, 6)
console.log(scale); // [24, 68, 6, 85]

 

10. sort(), reverse()

sort 메소드는 배열의 요소를 정렬하고 그 배열을 반환합니다.

알파벳의 경우 a를 우선으로, 숫자의 경우 0이 우선으로 배열 앞에 위치합니다. 하지만 sort 메소드는

파라미터(compareFunction)가 입력되지 않으면, 유니코드 순서에 따라 값을 정렬하기 때문에 nums의

배열이 [0, 1, 10, 3, 5, 8, 9]로 정렬되었습니다.

const names = ["David", "Andy", "Tom", "Michael"];
names.sort()
console.log(names); // ['David', 'Andy', 'Tom', 'Michael']

const nums = [3, 10, 0, 5, 1, 8, 9];
nums.sort()
console.log(nums); // [0, 1, 10, 3, 5, 8, 9]

 

숫자를 정렬하기 위한 방법은 다음과 같습니다. 추가로 최소값과 최대값을 반환하는 방법도 알아보겠습니다.

const nums = [3, 10, 0, 5, 1, 8, 9];

// 올림차순으로 정렬
nums.sort((a,b) => {return a-b});
console.log(nums); // [3, 5, 20, 30, 50]

// 내림차순으로 정렬
nums.sort((a,b) => {return b-a});
console.log(nums); // [50, 30, 20, 5, 3]

// 최소값 반환
nums.sort((a,b) => {return a-b});
console.log(nums[0]); // 3

// 최대값 반환
nums.sort((a,b) => {return b-a});
console.log(nums[0]) // 50

 

reverse 메소드는 배열의 요소를 역순으로 정렬하고 그 배열을 반환합니다.

reverse 메소드는 문자열의 순서가 아니라 배열의 인덱스를 기준으로 역순으로 정렬하기 때문에, 만약 reverse 메소드를 통해 내림차순으로 정렬을 하려고 한다면 먼저 sort 메소드를 통해 오름차순으로 정렬한 뒤, reverse 메소드를 사용해 역순으로 정렬합니다.

const names = ["David", "Andy", "Tom", "Michael"];
names.sort()
names.reverse()
console.log(names); // ['Tom', 'Michael', 'David', 'Andy']