Array의 필수 메서드(01)

JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.

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

push / pop

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

코드를//push의 사용방법
let fruits = ["포도","복숭아","딸기","수박"]
fruits.push("샤인 머스캣", "귤")

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



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

> 결과 <
one = "수박"
fruits = ["포도","복숭아","딸기"] 입력하세요

push는 한번에 여러개의 원소를 넣어줄 수 있지만, pop은 빼올 수 있는 원소가 고정적(배열의 맨뒤 원소)

unshift / shift

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

// unshift 사용방법
let catName = ["자몽", "서리"]
catName.unshift("유자","코코")

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


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

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

shift와 unshift는 push.pop과 같은 기능이지만 추가,제거하는 위치가 다르다.
push/pop은 % 성을 가지지만 , shift/unshift는 length속성을 가지지 않음

splice

splice는 배열의 기존 요소를 삭제,교체,추가 하여 배열의 내용을 변경함

/ spilce 사용방법 /
arr.splice( 인덱스 위치, 제거할 원소갯수, 추가해줄 원소)

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

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

---

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

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

---

slice

배열의 원소를 잘라, 잘라온 원소를 새로운 배열에 반환하는 메서드

/* slice 사용방법 */

arr.slice(자르기 시작할 인덱스, 자르기를 종료할 인덱스)

// slice 예제
let frontTeam = ["은정","혜원","시윤","세준","재훈"]
let mentoTeam = frontTeam.slice(0,3)

> 결과 <
mentoTeam = ["은정","혜원","시윤"]
frontTeam = ["은정","혜원","시윤","세준","재훈"]

//자르기를 종료할 인덱스 번호를 지정할 때는 인덱스+1 해줘야함

concat

두개 이상의 배열을 합쳐주거나 배열에 값을 이어붙여주는 메서드

/* concat의 사용방법 */
// 배열 합치기
****arr1.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 - 배열의 모든 원소에 대해 함수를 호출한 결과를 모아 새로운 배열을 반환함
*실무에서는 주로 반복문으로 사용

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

메서드 안의 함수의 파라미터(매개변수)는 num의 모든 원소들이 한번씩 들어가게된다. 즉 num의 원소들.

sort -배열의 모든 원소를 적절한 위치에 정렬 후 해당 배열을 반환함.

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

> 결과 <
array = ["a", "c", "c", "d", "e", "m", "o", "p"]

> 알파벳 순


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

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

reverse
배열의 순서를 반전해주는 메서드

split

// split 예제
let num = "010-8954-4608"
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"]

reduce

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

// reduce의 예제 _ 초기값 없이
let arr = [1,2,3,4,5,6,7,8,9]
arr.reduce((acc,cur)=>{
		console.log(`누적값 : ${acc} , 현재값 : ${cur}`)
    return acc+cur
}(,초기값이 없으면 0이고 10이라면 10입력 후 누적값10부터 시작))

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

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

>반대로 , 거꾸로 거슬러 감