[JS] Array Method 배열 메서드

배열(Array)은 타입 객체로 프로퍼티(Array.prototype)를 상속받는다.

01. 수정 메서드

• 프로퍼티 원본 배열을 바로 수정, 반환한다.

01-1 push 메서드

- 배열의 마지막 부분, 즉 꼬리에 요소들을 추가한 다음 그 배열의 길이를 반환한다.

const city = ["서울","인천","부산","울산"];

#요소 한 개 추가
city.push("충주");
console.log(city); //["서울","인천","부산","울산","충주"]


#요소를 두 개 이상 추가
const city = ["서울","인천","부산","울산"];

city.push("충주","광주");
console.log(city); //["서울","인천","부산","울산","충주","광주"]

01-2 pop 메서드

- 배열의 마지막 요소가 제거되고, 마지막 요소의 값을 반환한다.

const city = ["서울","인천","부산","울산"];

city.pop();
console.log(city);//["엄마","아빠","할머니"]

01-3 shift 메서드

- 배열의 첫번째 요소가 제거되고, 나머지 요소의 값을 반환한다.

const city = ["서울","인천","부산","울산"];

city.shift();
console.log(city);//["인천","부산","울산"]

01-4 unshift 메서드

- 배열의 첫번째 요소 추가 후 요소의 끝까지 반환한다.

const city = ["서울","인천","부산","울산"];

city.unshift();
console.log(city);//["제주","서울","인천","부산","울산"]

01-5 splice 메서드

- 기존 배열의 요소를 삭제 또는 교체하고 새 요소를 추가하여 배열의 내용을 변경하여 반환한다.
splice(수정을 시작할 위치 인덱스 값,삭제 할 요소의 개수,삽입 할 요소)
배열 👉 배열

const city = ["서울","인천","부산","울산"];
city.splice(1, 0, "제주");
// inserts at index 1
console.log(city );
// expected output: Array ["서울", "제주", "인천","부산","울산"]

city.splice(4, 1, "광주");
// replaces 1 element at index 4
console.log(city);
// expected output: Array ["서울", "제주", "인천","부산","광주"]

01-6 split 메서드

- 기준이 되는 텍스트로 분리하여 여러개의 값을 가진 배열로 변환 후 반환한다.
string.split(separator, limit)
👉 문자열을 'separator'로 잘라서,'limit' 크기 이하의 배열에 잘라진 문자열을 저장하여 리턴한다.
문자열 👉 배열

//#파라미터를 입력하지 않은 경우
const str = "apple banana orange";
const arr = str.split();

document.writeln(arr); // apple banana orange
document.writeln(arr.length); // 1
//파라미터로 아무것도 전달하지 않으면 문자열 전체를 length 1인 배열에 담아서 리턴한다.

//#단어별로 잘라서 배열에 담기
const str = "apple banana orange";
const arr = str.split(" ");

document.writeln(arr.length); // 3
document.writeln(arr[0]); // apple
document.writeln(arr[1]); // banana
document.writeln(arr[2]); // orange
//separator로 " "(스페이스)를 지정하면, 문자열을 구분자로 잘라서 각각의 잘라진 조각들을 배열에 저장하여 리턴한다.

//#글자별로 잘라서 배열에 담기
const str = "a b c";
const arr = str.split("");

document.writeln(arr.length); // 5
document.writeln(arr[0]); // a
document.writeln(arr[1]); // ' '(space)
document.writeln(arr[2]); // b
document.writeln(arr[3]); // ' '(space)
document.writeln(arr[4]); // c
//separator로 ""(length가 0인 문자열)을 전달하면, 문자열을 각각의 문자별로 잘라서, 한 글자씩(공백 포함) 배열에 저장하여 리턴합니다.

//#특정 구분자로 잘라서 배열에 담기
const str = "apple,banana,orange";
const arr = str.split(",");

document.writeln(arr.length); // 3
document.writeln(arr[0]); // apple
document.writeln(arr[1]); // banana
document.writeln(arr[2]); // orange
//separator(여기서는 ',')를 지정하여, 문자열을 separator로 잘라서 만들어진 조각들을 배열에 담아서 리턴하였습니다.


//#limit값 지정하기
const str = "apple,banana,orange";
const arr = str.split(",", 2);

document.writeln(arr.length); // 2
document.writeln(arr[0]); // apple
document.writeln(arr[1]); // banana
document.writeln(arr[2]); // undefined
//두번째 파라미터인 limit 값을 지정하였다.
//위의 예제에서 문자열을 ','로 자르면 총 3개의 배열이 만들어지지만, limit 값을 2로 지정하였기 때문에 2개의 배열만 생성되었습니다.

02.접근자 메서드

• 배열을 다른 모습으로 바꿔 새로운 배열을 반환하고 원래 배열은 수정하지 않는다.

02-1 join 메서드

- 배열의 모든 요소 값을 문자열로 바꾼 후에 인수로 받은 문자로 연결해 하나의 문자열로 반환한다.
배열 👉 문자열

const ciry = ["서울", "인천", "부산", "울산"];

console.log(ciry.join());
// expected output: "서울,인천,부산,울산"

console.log(ciry.join(''));
// expected output: "서울인천부산울산"

console.log(ciry.join('-'));
// expected output: "서울-인천-부산-울산"

02-2 concat 메서드

- 인수로 받은 값을 그 배열의 요소로 추가해서 새로운 배열을 생성하여 반환한다.
배열 👉 배열

const city = ["서울","인천","부산","울산"];

const result = city.concat(["제주", "광주"]);
console.log(result);
// ["서울","인천","부산","울산","제주","광주"]

//값을 여러개 추가할때
const city = ["서울","인천","부산","울산"];

const result = city.concat(["제주", "광주"],["충주","대전"]);
console.log(result);
// ["서울","인천","부산","울산","제주","광주","충주","대전"]

02-3 slice 메서드

- 배열의 일부 요소를 제거한 새로운 배열을 반환한다.

slice(요소를 꺼낼 시작 위치 인덱스 값,요소를 꺼낼 마지막 위치 인덱스 바로 이전 값)

💡 두번째 인수값은 해당 값 위치 인덱스의 바로 이전 값이다
배열 👉 배열

const city = ["서울","인천","부산","울산"]; //인덱스는 0부터 시작

const result = city.slice(1, 3);
console.log(result); //["인천","부산"]

🧐 Assignment 문제

그 후 sliceCityFromAddress 함수를 구현해 주세요.

• sliceCityFromAddress 함수는 address 를 인자로 받습니다.
• address 는 주소를 나타내는 string 입니다.
• 주어진 주소가 어느 도시 인지를 찾아 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴해 주세요.
• 도시는 무조건 "시" 로 끝납니다. 예를 들어, "서울시".
• "도" 와 "시" 는 주소에 한번 밖에 포함되어 있지 않습니다.
• 예를 들어, 다음과 같은 주소가 주어졌다면;

    "경기도 성남시 분당구 중앙공원로 53"

다음과 같은 값이 리턴되어야 합니다:

    "경기도 분당구 중앙공원로 53"

---

✍️ 풀이

function sliceCityFromAddress(address) {
  let firstChar = address.indexOf("도");
  let lastCity = address.indexOf("시");
  console.log(firstChar)
  console.log(lastCity) 
  if (firstChar == -1 ) { //객체속에 'firstChar'가 없을때에,
    return address.slice(lastCity+2, address.length);
  } else {
    return address.slice(0, firstChar+2) + address.slice(lastCity+2, address.length);
  }
}
sliceCityFromAddress("경기도 성남시 분당구 중앙공원로 53")
//'경기도 분당구 중앙공원로 53'

02-4 indexOf와 lastIndexOf

- 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.

중복되는 요소가 있는 경우, 첫번째 인덱스를 반환한다.
해당하는 요소가 없는 경우, -1을 반환한다.
indexOf는 인덱스가 작은 쪽부터 순서대로 검색한다.
lastIndexOf는 인덱스가 큰 쪽부터 역순으로 검색한다.

const city = ["서울","인천","부산","제주","울산"];

const result = city.indexOf("인천");
const result2 = city.lastIndexOf("제주");

console.log(result); // 1
console.log(result2); // 3

03.반복 메서드

• 배열의 모든 요소를 순회하며 특정한 작업을 수행하거나,
  특정 조건을 만족하는 요소를 가져올 때, 사용하는 메서드이다.

03-1 forEach 메서드

- 배열의 각요소에 대한 callback실행
- 인수로 받은 함수의 배열의 요소별로 한 번씩 실행한다.
- 콜백함수를 인자로 받아 배열의 각 요소에 콜백 함수로 실행한다 => 아무값도 반환하지 않음
- 구문값으로 받는 리턴값 없음
- 콜백함수로 현재 다루고 있는 array를 변환할 수 있다 => 새 배열 xxxx

///3개의 인자를 받음 (하나씩 쓰는 요소1, 인덱스번호, 사용중인 배열)
const arr = [2, 3, 4, 5, 6];

count.forEach(function (v, i, a) {   
  a[i] = v * v;   //ex) a[i] = 3 * 3
});
//function (vaule(요소의 값), index(1부터 배열 갯수), array(0부터 배열 순서))

console.log(count); // [4,9,16,25,36]

=================================================================
  
 data.forEach((team) => {
      if (team.Userdetail.id === userDetailData.id) {
      team.Userdetail.profileImage = userDetailData.profileImage;}
                        });
  

forEach기법은 for문 대신 사용하는 반복 메서드이다.
return하는 것도 아무것도 없이 forEach함수를 탈출하고 싶을때 return을 사용한다.

03-2 map 메서드

- 배열의 각 요소에 대한 callback 실행결과를 모아 새 배열 리턴
- 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백 함수의 반환값(결과값)으로
새로운 배열을 생성하여 반환한다.
-사용중인 array의 요소들을 호출해 사용 => 사용한 array와 동일한 사이드의 새로운 배열 생성
- 메모리를 할당하고 리턴값 저장한다 => return값 자체를 반환함

배열을 순회하며 요소 값을 다른 값으로 맵핑하기 위한 함수이다.

👉 *(곱셈) 값 구하기

///3개의 인자를 받음 (하나씩 쓰는 요소1, 인덱스번호, 사용중인 배열)
const arr = [2, 3, 4, 5, 6];
const result = arr.map(function (x) {
  return 2 * x;
});

console.log(arr);

👉 객체 배열요소의 특정 프로퍼티값을 꺼내서 배열로 만들기

const city = [
  { name: "서울", count: 30 },
  { name: "대구", count: 12 },
  { name: "부산", count: 16 },
  { name: "광주", count: 6 }
];

const names = city.map((city) => city.name);
const counts = city.map((city) => city.count);
console.log(names); // ["서울","대구","부산","광주"]
console.log(counts);// [30,12,16,6]

🧐 Assignment 문제

1. moreThan100 함수를 구현해 주세요.

• 숫자로 구성된 배열을 인자로 받습니다.
• 100 보다 크거나 같으면, true 를
• 100 보다 작으면 false 로 요소를 변경하여, 새로운 배열을 return 해주세요.
• 예를 들어,

nums(input)가
[100, 9, 30, 7]
이라면
return은
[true, false, false, false]

---

✍️ 풀이

const moreThan100 = nums => {
  const numBer = nums.map(
    i => {if (i < 100) {
      return false;
    }
      return true;
    }
  )
   return numBer;
}
moreThan100([100, 9, 30, 7]);

2. formatDate 함수를 구현해 주세요.

• 날짜가 담긴 배열을 인자로 받습니다.
• 날짜의 data type은 string이며, 보내는 날짜 타입은 'YYYY-MM-DD' 입니다.
• 해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서, 새로운 배열을 return 해주세요.
• 예를 들어,

dates(input)가
['2019-03-21', '2019-04-21', '2019-05-21']
이라면
return은
['2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일']

---

✍️ 풀이

const formatDate = dates => {
  let str = dates.map(function(arr){
    let dates = arr.split('-');
    return dates[0] + "년 " + dates[1] + "월 " + dates[2] + "일"; 
  }
  )
  return str;
}
formatDate(['2019-03-21', '2019-04-21', '2019-05-21']);

03-3 reduce 메서드

- 배열의 값을 한개로 감소시키는 특징이 있다.
- 두개의 매개변수인 initialValue를 통해서 반환 값을 자유롭게 지정하여 유연하게 사용가능하다.
- map, filter, find함수로 구현할 수 있는 기능은 모두 reduce 함수로 구현 가능하다.

👉 arr.reduce(callback[, initialValue])

*reduce 메서드의 인수

• callback : 합성 곱을 하는 함수
• initial : callback이 처음 호출되었을 때의 첫 번째 인수prev의 값(생략가능)

*callback 함수는 다음과 같은 인수를 받는다.

• previousValue : 이전 요소를 처리한 함수의 반환값 또는 initaial 첫번째 요소의 값.
• currentValue : 현재 처리하는 배열 요소의 값
• currentIndex : 현재 처리하는 배열 요소의 인덱스
• array : 메서드를 적용 중인 배열의 참조

var arr = [12, 4, 19, 33, 86];
var sum = arr.reduce( (pre, value, ide, arr) => {
  return pre + value;
});
consol.log(sum);