Array의 필수 메서드 (1)

배열에 원소를 추가하거나 제거하는 메서드

 

push / pop

 

• 배열의 맨뒤에 추가(push)하고 제거(pop)하는 메서드

// push
let fruits = ["포도, "복숭아", "딸기", "수박"]
fruits.push("샤인 머스캣", "귤")

// 결과
fruits = ["포도", "복숭아", "딸기", "수박", "샤인 머스캣", "귤"]



// pop
let fruits = ["포도", "복숭아", "딸기", "수박"]
let one = fruits.pop()

// 결과
one = "수박"
fruits = ["포도", "복숭아", "딸기"]

• push는 한번에 여러개의 원소를 넣어줄 수 있음
• pop은 빼올 수 있는 원소가 고정적 (배열의 맨 뒤 원소)
• push는 새롭게 추가된 원소를 반영하여 새로운 배열을 반환
• pop은 제거된 원소를 반환
• 보통 pop을 한 원소들은 변수에 담아서 사용하는게 일반적
• if) 빈배열에 pop한 경우에는 어떻게 될까?
  └ undefined를 반환함
• 배열에 undefined를 push 할 수 있을까?
  └ 가능함. 배열에 undefined가 원소로 추가됨

 

 

 

unshift / shift

 

• 배열의 맨 앞에 원소를 제거(shift)하거나 추가(unshift)하는 메서드

// unshift
let catName = ["자몽", "서리"]
cat.unshift("유자", "코코")

//결과
catName = ["유자", "코코", "자몽", "서리"]


// shift
let catName = ["자몽", "서리"]
let cat = catName.shift()

//결과
cat = "서리"
catName = ["자몽"]

• shift와 unshift는 push, pop과 같은 기능이지만 추가, 제거하는 위치가 다름
• 이외의 나머지는 비슷
• push / pop은 length 속성을 가짐
• shift / unshift는 length 속성을 가지지 않음

 

 

 

splice

 

• 배열의 기존 요소를 삭제, 교체, 추가하여 배열의 내용을 변경
• 제거된 원소를 배열로 반환 (보통 제거된 원소들은 새로운 변수에 담아 사용)
• 추가해줄 원소는 여러개여도 상관없음

// splice
arr.splice(원소가공을 시작할 인덱스 위치, 제거할 원소갯수, 추가해줄 원소)

 

// 추가
let need = ["떡볶이", "레드콤보", "초코라떼", "삼겹살"]
need.splice(2, 0, "딸기생크림케이크")

// 결과
// 2번째 인덱스에 요소삭제 없이 "딸기생크림케이크" 추가
need = ["떡볶이","레드콤보","딸기생크림케이크","초코라떼","삼겹살"]

 

// 삭제
let need = ["떡볶이","레드콤보","초코라떼","삼겹살"]
let one = need.splice(0,1)

// 결과
one = ["떡볶이"]
need = ["레드콤보","초코라떼","삼겹살"]

 

// 교체
let need = ["떡볶이" ,"레드콤보" ,"초코라떼" ,"삼겹살"]
let one = need.splice(2, 1, "딸기생크림케이크")

// 결과
one = ["초코라떼"]
need = ["떡볶이", "레드콤보", "딸기생크림케이크", "삼겹살"]

 

 

 

slice

 

• 배열의 원소를 잘라 잘라온 원소를 새로운 배열에 반환하는 메서드
• 자르기를 종료할 인덱스번호는 미포함
• 자르기를 종료할 인덱스 번호를 지정할 때, 인덱스 + 1을 해주어야 함

// slice 사용방법
arr.slice(자르기 시작할 인덱스, 자르기를 종료할 인덱스)

 

// slice 예제
let front = ["A", "B", "C", "D", "E"]
let back = front.slice(0, 3)

// 결과
back = ["A", "B", "C"]
front = ["A", "B", "C", "D", "E"]

 

 

 

concat

 

• 두 개 이상의 배열을 합쳐주거나 배열에 값을 이어붙여주는 메서드
• concat 메서드 사용 할 배열이 기준이 됨
• 기준 배열 뒤에 인자로 들어간 배열이 순서대로 붙음

// concat 사용방법

// 배열 합치기
arr.concat(arr2, arr3)

// 원소 이어붙이기
arr.concat(추가할 원소)

 

// concat 예제
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = ["한", "글"]

let concatArr = arr1.concat(arr2, "여기는 한글", arr3)

//결과
concatArr = [1, 2, 3, 4, 5, 6, "여기는 한글", "한", "글"]

 

---

배열을 변형하는 메서드

 

map

 

• 배열의 모든 원소에 대해 함수를 호출한 결과를 모아 새로운 배열을 반환
• 반복문으로 자주 사용
• 메서드 안의 함수의 파라미터(매개변수)는 num의 모든 원소들이 한번씩 들어감. 즉, num의 원소들로 보면 됨

// map 사용방법
arr.map((arr_item) => {
	// 모든 배열의 원소에게 반복실행할 코드
})

 

// map의 예제
let num = [1, 2, 3, 4, 5]
let newNum = num.map(num_item => num_item * 3)

// 결과
newNum = [3, 6, 9, 12, 15]

 

 

※ 함수의 괄호

• 함수의 괄호는 가끔 생략이 되기도 함
  ┌ 1. 바디의 괄호 생략 : 바디 안의 코드가 한 줄 일시에 생략이 가능.
         바디의 중괄호가 생략되면 바디의 코드가 암묵적으로 리턴됨
  ├ 2. 매개변수의 괄호 생략 : 매개변수가 한개인 경우 생략이 가능
  └ 3. 모두 적을 시 : 리턴을 안적으면 리턴이 일어나지 않음

 

 

 

sort

 

• 배열의 모든 원소를 적절한 위치에 정렬 후 해당 배열을 반환
• 기본적인 정렬 순서는 문자열의 유니코드를 따름

// sort의 사용방법
arr.sort(() => {
	//비교기준 함수
    //없을시엔 기본적인 정렬에 따라 정렬됨
})

// 숫자열에서 비교기준 함수
// 오름차순 - 작은 것에서부터 큰 것으로 가는 것
arr.sort((a, b) => {
	return a-b
})

// 내림차순 - 큰 것에서부터 작은 것으로 가는 것
arr.sort((a, b) => {
	return b-a
})


// 문자열에서 비교기준 함수
// 오름차순
arr.sort((a, b) => {
	return a < b ? -1 : 1
})

// 내림차순
arr.sort((a, b) => {
	return a > b ? -1 : 1
})

 

// sort 예제 - 문자열의 오름차순
let array = ["c", "o", "d", "e"]
array.sort((a, b) = {
	return a < b ? -1 : 1
})

// 결과
array = ["c", "d", "e", "o"]

// sort 예제 - 숫자열의 내림차순
let array = [5, 4, 6, 2, 8, 1]
array.sort((a, b) => {
	return b - a
})

// 결과
array = [8, 6, 5, 4, 2, 1]

 

 

 

reverse

 

• 배열의 순서를 반전해주는 메서드
• 마지막 요소가 첫번째 요소가 되며, 첫번째 요소는 마지막 요소가 됨

// reverse 사용방법
let array = ["three", "two", "one"]
let reverseArray = array.reverse()

// 결과
reverse = ["one", "two", "three"]

 

 

 

split

 

• 특정 문자열을 일정한 기준으로 잘라 배열로 반환하는 메서드

// split 사용방법
str.split(구분자, 횟수 제한)

 

• 구분자는 문자열을 잘라올 기준이 됨

// split 예제
let num = "010-1234-5678"
let splitNum = num.split("-")

// 결과
splitNum = ["010","1234","5678"]


// split 예제2 - 끊어주는 횟수 제한하기
let mail = "hi@google.com , my@google.com, name@google.com"
let splitMail = mail.split("@" , 2)

// 결과
// 2번까지만 끊어서 결과물을 가지고 옵니다. 
splitMail = ["hi", "google.com", "my"]

 

 

 

join

 

• 배열의 모든 원소를 연결해 하나의 문자열을 반환하는 메서드

// join 사용방법
arr.join(구분자)

• 구분자는 뭘쓰냐에 따라서 반환되는 문자열이 다름
• 구분자가 있을때는 해당 구분자를 문자열로 반환, 생략하면 모든 요소들이 쉼표로 구분됨

 

// join 예제
let arr = ["우","주","최","강"]
let str = arr.join("")

// 결과
str = "우주최강"

// join 예제2
let arr = ["우","주","최","강"]
let str = arr.join("와")

//결과
str = "우와주와최와강와"

 

 

 

reduce

 

• 각 배열의 원소에 대해 함수를 실행하고, 하나의 결과값을 반환함
• 보통 배열의 총원소의 합을 구해야 할 때 사용함

// reduce 사용방법
arr.reduce((누적값, 현재값) => {
	// 현재값 + 누적값을 리턴
}, 초기값)

• 초기값은 처음 연산을 시작할 때 깔아놓는 값
• 반환값은 초기값 + 모든 원소 연산값
• 초기값이 없으면 0이 기본값

 

// reduce의 예제 - 초기값 O
let arr = [1,2,3,4,5,6,7,8,9]
arr.reduce((acc,cur)=>{
		console.log(`누적값 : ${acc} , 현재값 : ${cur}`)
    return acc+cur
})

// 결과
누적값 : 1 , 현재값 : 2
누적값 : 3 , 현재값 : 3
누적값 : 6 , 현재값 : 4
누적값 : 10 , 현재값 : 5
누적값 : 15 , 현재값 : 6
누적값 : 21 , 현재값 : 7
누적값 : 28 , 현재값 : 8
누적값 : 36 , 현재값 : 9
45


// reduce의 예제 - 초기값 X
let arr = [1,2,3,4,5,6,7,8,9]
arr.reduce((acc,cur)=>{
		console.log(`누적값 : ${acc} , 현재값 : ${cur}`)
		return acc+cur
	},10)

// 결과
누적값 : 10 , 현재값 : 1
누적값 : 11 , 현재값 : 2
누적값 : 13 , 현재값 : 3
누적값 : 16 , 현재값 : 4
누적값 : 20 , 현재값 : 5
누적값 : 25 , 현재값 : 6
누적값 : 31 , 현재값 : 7
누적값 : 38 , 현재값 : 8
누적값 : 46 , 현재값 : 9
55

 

 

 

reduceRight

 

• 근본적으로는 reduce와 같은 기능을 함
• reduce와 다르게 현재값이 배열의 끝에서부터 시작함

// reduceRight 사용방법
arr.reduceRight((누적값, 현재값) => {
	// 현재값 + 누적값을 리턴
})

 

// reduceRight 예제
let arr = [1, 2, 3, 4]
arr.reduceRight((acc, cur) => {
	console.log(`누적값: ${acc}, 현재값 : ${cur}`)
    return acc + cur
}, 20)

// 결과
누적값 : 20, 현재값 : 4
누적값 : 24, 현재값 : 3
누적값 : 27, 현재값 : 2
누적값 : 29, 현재값 : 1
30