배열 함수

배열 함수

• pop() : 배열 끝에 있는 아이템을 제거, 제거한 아이템 값을 리턴
• push('아이템') : 배열 끝에 아이템 추가, 배열의 최종 길이를 리턴
• includes('아이템') : 배열에 아이템이 포함되어있는지 확인. 포함되어 있으면 true 리턴 아니면 false 리턴
• indexOf('아이템') : 배열 내에 아이템이 위치한 인덱스 번호를 리턴
  
  

💡 배열 잘라주는 함수)

• slice(시작점, 끝점) : 시작점 ~ 끝점(미포함)까지 배열을 복사해서 리턴
  - slice(시작점) : 값을 하나 받을 경우, 시작점 이후의 값은 모두 자르기
  - 기존의 배열은 건드리지 않고 새로운 배열을 만들어서 출력
• splice(시작점, 개수) : 시작점부터 개수만큼 실제 배열에서 아이템을 제거
  - 자른 뒤의 배열을 리턴
  - 기존 배열을 건드림, 기존 배열이 잘림

** length : 배열 함수는 아니지만 배열의 길이를 리턴, 문자열의 길이를 리턴할 때도 사용

배열 함수 리스트 (ES6)

• forEach() : (반복문) 반환 값이 없다, 단순 for문과 같이 작동
• map() : (반복문) 반환 값을 배열에 담아 반환
• filter() : 조건에 충족하는(true) 아이템만 배열에 담아 반환
• some() : 조건에 충족하는 아이템이 하나라도 있으면 true 반환, 아니면 false
• every() : 배열의 모든 아이템이 조건에 충족하면 true 반환, 아니면 false
• find() : 조건에 충족하는 아이템 하나만 반환 (여러 개일 경우 첫 번째 것만 반환)
• findIndex() : 조건에 충족하는 아이템의 인덱스 값 반환 (여러 개라면 첫 번째 아이템의 인덱스 번호만 반환)
• reduce() : 배열의 각 요소를 순회하면 콜백 함수의 실행 값을 누적하여 하나의 결과값을 반환
  • callback function
    • accumulator : callback함수의 반환값을 누적
    • currentValue : 배열의 현재 요소
    • index(Optional) : 배열의 현재 요소의 인덱스
    • array(Optional) : 호출한 배열
  • initialValue (Optional)
    • 최초의 콜백 함수 실행 시 accumulator 인수에 제공되는 값
    • 초기값을 제공하지 않을 경우 배열의 첫 번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우는 에러가 발생

콜백 함수의 반환 값은 accumulator에 할당되고 순회하며 계속 누적되어 최종으로 하나의 값만 반환

[ 응용 코드 ]

let names = [
  "Steven Paul Jobs",
  "Bill Gates",
  "Mark Elliot Zuckerberg",
  "Elon Musk",
];

/* map 사용 예시 */
let newArr1 = names.map((a) => a.split(" ")[0]);
console.log(newArr1); // [ 'Steven', 'Bill', 'Mark', 'Elon' ]

let newArr2 = names.map((a) => {
  const arr = a.split(" ");
  let str = ""
  arr.map((b) => str += b[0])
  return str;
});
console.log(newArr2); // [ 'SPJ', 'BG', 'MEZ', 'EM' ]


/* filter 사용 예시 */
let newArr3 = names.filter((a) => a.includes("a"));
console.log(newArr3); // [ 'Steven Paul Jobs', 'Bill Gates', 'Mark Elliot Zuckerberg' ]


/* some 사용 예시 */
let newArr4 = names.some(a => { return (a.length) >= 20 });
console.log(newArr4); // true


/* every 사용 예시 */
let newArr5 = names.every(a => { return (a.length) >= 20 });
console.log(newArr5); // false


/* find 사용 예시 */
let newArr6 = names.find((e) => (e.length) >= 20);
console.log(newArr6); // Mark Elliot Zuckerberg


/* findIndex 사용 예시 */
let newArr7 = names.findIndex((e) => (e.length) >= 20);
console.log(newArr7); // 2


/* reduce 사용 예시 */
let newArr8 = names.reduce((accumulator, currentItem) => { return accumulator + currentItem}, "");
console.log(newArr8); // Steven Paul JobsBill GatesMark Elliot ZuckerbergElon Musk

📚 forEach와 Map의 차이

1) forEach

• 콜백 함수를 인자로 받아, 배열의 각 요소에 콜백 함수를 실행. 아무 값도 반환하지 않음
• 제공된 함수로 Array 요소를 한 번만 실행함
• 콜백은 호출하는 Array를 변경할 수 있지만 forEach문은 구문 밖으로 return값을 받지 못함
  
  

[ 응용 코드 ]

let arr = [1, 2, 3, 4, 5]
arr.forEach((i) => {
  console.log(i)
}) // 1, 2, 3, 4, 5 출력

let newArr = arr.forEach((i) => {
  return i*i
})
console.log(newArr) // undefined

2) Map

• 기존의 배열을 이용해, 새로운 배열을 생성할 때 사용
• 모든 Array 요소가 제공된 함수로 호출될 때 새로운 array를 생성
• 콜백 함수를 인자로 받아 배열의 각 요소에 대해서 실행한 결과 값을 반환
• 새로운 값을 만들어서 return 가능, return 값 자체를 반환
• 데이터를 변경할 때 map()을 사용
  
  

[ 응용 코드 ]

let arr = [1, 2, 3, 4, 5]
arr.map((i) => {
  console.log(i)
}) // 1, 2, 3, 4, 5 출력

let newArr = arr.map((i) => {
  return i*i
})
console.log(newArr) // [ 1, 4, 9, 16, 25 ] 출력