배열에 원소를 추가하거나 제거하는 메서드
push / pop
- 배열의 맨뒤에 추가(push)하고 제거(pop)하는 메서드
// pushlet fruits = ["포도, "복숭아", "딸기", "수박"]fruits.push("샤인 머스캣", "귤")// 결과fruits = ["포도", "복숭아", "딸기", "수박", "샤인 머스캣", "귤"]// poplet fruits = ["포도", "복숭아", "딸기", "수박"]let one = fruits.pop()// 결과one = "수박"fruits = ["포도", "복숭아", "딸기"]
- push는 한번에 여러개의 원소를 넣어줄 수 있음
- pop은 빼올 수 있는 원소가 고정적 (배열의 맨 뒤 원소)
- push는 새롭게 추가된 원소를 반영하여 새로운 배열을 반환
- pop은 제거된 원소를 반환
- 보통 pop을 한 원소들은 변수에 담아서 사용하는게 일반적
- if) 빈배열에 pop한 경우에는 어떻게 될까?
└ undefined를 반환함 - 배열에 undefined를 push 할 수 있을까?
└ 가능함. 배열에 undefined가 원소로 추가됨
unshift / shift
- 배열의 맨 앞에 원소를 제거(shift)하거나 추가(unshift)하는 메서드
// unshiftlet catName = ["자몽", "서리"]cat.unshift("유자", "코코")//결과catName = ["유자", "코코", "자몽", "서리"]// shiftlet catName = ["자몽", "서리"]let cat = catName.shift()//결과cat = "서리"catName = ["자몽"]
- shift와 unshift는 push, pop과 같은 기능이지만 추가, 제거하는 위치가 다름
- 이외의 나머지는 비슷
- push / pop은 length 속성을 가짐
- shift / unshift는 length 속성을 가지지 않음
splice
- 배열의 기존 요소를 삭제, 교체, 추가하여 배열의 내용을 변경
- 제거된 원소를 배열로 반환 (보통 제거된 원소들은 새로운 변수에 담아 사용)
- 추가해줄 원소는 여러개여도 상관없음
// splicearr.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 예제2let arr = ["우","주","최","강"]let str = arr.join("와")//결과str = "우와주와최와강와"
reduce
- 각 배열의 원소에 대해 함수를 실행하고, 하나의 결과값을 반환함
- 보통 배열의 총원소의 합을 구해야 할 때 사용함
// reduce 사용방법arr.reduce((누적값, 현재값) => { // 현재값 + 누적값을 리턴}, 초기값)
- 초기값은 처음 연산을 시작할 때 깔아놓는 값
- 반환값은 초기값 + 모든 원소 연산값
- 초기값이 없으면 0이 기본값
// reduce의 예제 - 초기값 Olet 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 , 현재값 : 945// reduce의 예제 - 초기값 Xlet 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 , 현재값 : 955
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, 현재값 : 130
'Web Basic > JavaScript' 카테고리의 다른 글
ES6의 특징 (0) | 2022.04.18 |
---|---|
==, === 차이점 (0) | 2022.04.18 |
스코프, 스코프 체인 (0) | 2022.03.29 |
실행 컨텍스트와 호이스팅 (0) | 2022.03.28 |
Array의 필수 메서드(02) (3) | 2022.03.21 |