Array의 필수 메서드(1)

Kingmo·2022년 4월 3일
JavaScriptTIL
0

push / pop

  • push : 배열의 맨뒤에 원소 추가
    • 반환 : 추가된 원소를 포함한 새로운 배열
    • 배열에 undefined를 push 할 수 있다.
  • pop : 배열의 맨뒤의 원소 제거
    • 반환 : 제거된 원소
    • 빈배열을 pop하면 undefined를 반환한다.
//push의 사용방법
let fruits = ["포도","복숭아","딸기","수박"]
fruits.push("샤인머스캣", "귤")
// > 결과 <
fruits = ["포도","복숭아","딸기","수박","샤인머스캣", "귤"]

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

unshift / shift

  • shift : 배열의 맨 앞의 원소 제거
    • pop과 같은 기능이지만 제거하는 위치가 다르다.
  • unshift : 배열의 맨 앞에 원소 추가
    • push와 같은 기능이지만 추가하는 위치가 다르다.
  • push / pop과shift / unshift의 차이
    • push / pop은 length속성을 가진다. 하지만 shift / unshift는 아니다.
// unshift 사용방법
let catName = ["자몽", "서리"]
catName.unshift("유자","코코")
// > 결과 <
catName = ["유자" ,"코코", "자몽", "서리" ]

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

splice

  • splice : 배열의 기존 요소를 삭제, 교체, 추가 하여 배열의 내용 변경
/* spilce 사용방법 */
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

  • slice : 배열의 원소를 잘라 잘라온 원소를 새로운 배열에 반환한다.
    • 자르기를 종료할 인 덱스번호는 미포함이므로
      자르기를 종료할 인덱스 번호를 지정할 때는 인덱스 + 1 을 해줘야한다.
/* slice 사용방법 */
arr.slice(자르기 시작할 인덱스, 자르기를 종료할 인덱스)
// slice 예제
let frontTeam = ["은정","혜원","시윤","세준","재훈"]
let mentoTeam = frontTeam.slice(0,3)

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

concat

  • concat : 두개 이상의 배열을 합쳐주거나 배열에 값을 이어붙여준다.
    • 배열 붙이기 : (concat 메서드를 사용할 배열).concat(붙일 배열1, 붙일배열2, 붙일배열3)
/* 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

  • 배열의 모든 원소에 대해 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
    • 함수의 괄호 생략 예
      • 바디의 괄호 생략 : 바디 안의 코드가 한 줄 일시, 중괄호 생략시 코드가 암묵적으로 리턴된다.
      • 매개변수의 괄호 생략 : 매개변수가 한 개인 경우.
      • 생략없이 모든 괄호 적을 시 : 리턴을 안적으면 리턴이 일어나지 않는다.
/* 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]

sort

  • 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","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

  • reverse : 배열의 순서를 반전해주는 메서드. 즉, 기존의 마지막 요소가 첫번째 요소가 된다.
/* reverse의 사용방법 */
let array = ["three","two","one"]
let reverseArray = array.reverse()

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

split

  • split : 특정 문자열을 일정한 기준으로 잘라 배열로 반환하는 메서드이다.
    • 구분자는 문자열을 잘라올 기준이 된다.
/* split 사용방법 */
str.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"]

join

  • join : 배열의 모든 원소를 연결해 하나의 문자열을 반환한다.
    • 구분자 생략 시 : 배열의 인덱스를 나누는 쉼표를 구분자로 사용한다.
/* join 사용방법 */
arr.join(구분자)
/* join의 예제 */
let arr = ["a","s","d","f","g","h"]
let str = arr.join("")
// > 결과 <
str = "asdfgh"

/* join의 예제 */
let arr = ["a","s","d","f","g","h"]
let str = arr.join("와")
// > 결과 <
str = "a와s와d와f와g와h"

reduce

  • reduce : 각 배열의 원소에 대해 함수를 실행하고, 하나의 결과 값을 반환한다.
    일반적으로 배열의 총 원소의 합을 구할 때 사용한다.
    • 초기 값을 왠만하면 설정해주어야 연산 시 타입에러가 나지 않는다.
    • 초기 값이 없다면 1번 인덱스 부터 시작하고 , 있다면 0번 인덱스 부터 시작한다.
/* 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
})

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


// reduce의 예제 _ 초기값 있이
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

  • reduceRight : 근본적으로는 reduce와 같은 기능을 하지만, reduce와 다르게 현재값이 배열의 끝에서부터 시작한다.
    • 초기 값이 없다면 배열의 끝에서 한 칸 앞의 인덱스 부터 시작하고, 있다면 배열의 끝 인덱스부터 시작한다.
/* reduceRight 사용방법 */
arr.reduceRight((누적값,현재값)=>{
		// 현재값 + 누적값을 리턴
})
// reduceRight의 예제 _ 초기값 없이
let arr = [1,2,3,4]
arr.reduceRight((acc, cur)=>{
		console.log(`누적값 : ${acc} , 현재값 : ${cur}`)
		return acc + cur
	})

// > 결과 <
누적값 : 4 ,현재값 : 3
누적값 : 7 ,현재값 : 2
누적값 : 9 ,현재값 : 1
10
// 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
profile
Kingmo
Developer
이전 포스트

overflow 제어 in CSS

다음 포스트

Array의 필수 메서드(2)

0개의 댓글