[Js] 배열(Array) 함수

배열을 다루는 함수

메서드	설명
pop()	배열의 맨 마지막 요소 반환 및 제거
push(new data)	배열의 맨 마지막 인덱스에 new data 추가
shift()	배열의 맨 앞에있는 요소 반환 및 제거
unshift(new data)	배열의 맨 앞에 인덱스에 new data 추가
join([구분자])	배열 객체의 요소들을 구분자로 연결한 새로운 데이터 반환
reverse()	배열 객체의 데이터의 순서를 바꾼 새로운 배열을 반환
sort()	배열 객체 데이터 정렬
slice(startIndex, endIndex)	인자로 넘긴 인덱스 구간만큼 잘라서 새로운 배열 객체로 반환
splice(start[, deleteCount[, item1[, item2[,...]]])	배열 객체의 지정한 데이터를 삭제하고 새로운 데이터를 삽입
concat()	2개의 배열객체를 하나로 합친 배열 객체를 반환

 

---

 

1. 배열 객체 생성 및 초기화

See the Pen 배열 생성 by mk (@kmeijing) on CodePen.

 

---

 

2. 배열 함수 - pop() / push()

 

arr.pop();

arr.push("추가할 요소"[, ...[, "추가할 요소"]]);

 

 - pop() 함수는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.

 - push() 함수는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

 

See the Pen pop() / push() by mk (@kmeijing) on CodePen.

 

---

 

3. 배열 함수 - shift() / unshift()

 

arr.shift();

arr.unshift("추가할 요소");

 

- shift() 함수는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.

• 이 함수는 배열의 길이를 변하게 합니다.
• 만약 배열의 length가 0이라면 undefined를 리턴 합니다.

- unshift() 함수는 배열의 맨 앞에 새로운 요소를 추가하고, 새로운 길이를 반환합니다.

 

See the Pen shift() / unshift() by mk (@kmeijing) on CodePen.

 

---

 

4. 배열 함수 - join() / reverse()

 

arr.join([구분자]);

arr.reverse();

 

- join() 함수는 인자로 넘긴 문자를 기준으로 배열의 각 요소를 연결한 새로운 데이터를 반환합니다.

• 구분자를 생략하면 배열의 요소들이 쉼표로 구분됩니다. 
• 구분자가 빈 문자열이면 모든 요소들이 사이에 아무 문자도 없이 연결됩니다.
• 요소가 undefined 또는 null이면 빈 문자열로 변환합니다.

- reverse() 함수는 배열의 순서를 반전하여 새로운 객체 배열을 반환합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.

 

See the Pen join() / reverse() by mk (@kmeijing) on CodePen.

 

---

 

5. 배열 함수 - sort()

 

arr.sort([정렬 순서를 정의하는 함수]);

 

sort() 함수는 배열의 요소를 정렬한 후, 반환합니다.

• 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.
• 정렬 순서를 정의하는 함수를 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니코드 코드 포인트 값에 따라 정렬됩니다.

 

5-1. 숫자로 이루어진 배열 정렬하기

See the Pen sort() by mk (@kmeijing) on CodePen.

 

5-2. 여러가지 요소 배열 정렬하기

See the Pen sort() - 문자 정렬 by mk (@kmeijing) on CodePen.

 

5-3. 대소문자 구분없이 정렬하기

문자열을 모두 대문자로 변환하여 정렬했습니다. toLowerCase() 함수를 사용하여 문자열을 모두 소문자로 변환하여 정렬할 수도 있습니다.

See the Pen sort() - 대소문자 구분없이 정렬 by mk (@kmeijing) on CodePen.

 

5-4. 배열 내 객체 정렬

See the Pen sort() - 객체 정렬 by mk (@kmeijing) on CodePen.

 

 

---

 

6. 배열 함수 - slice()

 

arr.slice(startIndex[, endIndex]);

 

slice() 함수는 배열의 startIndex부터 endIndex 앞까지(endIndex 미포함)의 데이터 복사본을 새로운 배열 객체로 반환합니다.

• 원본 배열은 바뀌지 않습니다.

 

See the Pen slice() by mk (@kmeijing) on CodePen.

 

---

 

7. 배열 함수 - splice()

 

array.splice(startIndex[, 제거할 요소의 수[, "추가할 값1"[, "추가할 값2"[, ...]]]]);

 

splice() 함수는 구간으로 지정한 데이터를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경하고, 제거한 요소를 담은 배열을 반환합니다.

• 제거할 요소의 수를 생략하거나 값이 array.length - startIndex보다 크면 startIndex부터의 모든 요소를 제거합니다.
• d제거할 요소의 수가 0 이하라면 어떤 요소도 제거하지 않습니다.

 

See the Pen splice() by mk (@kmeijing) on CodePen.

 

---

 

8. 배열 함수 - concat()

 

array.concat([value1[, value2[, ...]]]);

 

concat() 함수는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.

• 기존배열을 변경하지 않습니다. 

 

See the Pen by mk (@kmeijing) on CodePen.