목차

1. concat
2. splice
3. forEach
4. map
5. filter
6. reduce
   7. find
   8. sort
   9. split

1. concat()

concat()메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.

• 기존배열을 변경하지 않는다.
• 추가된 새로운 배열을 반환한다.

사용방법

const array1 = ['a','b','c'];
const array2 = ['d','e','f'];
const array3 = array1.concat(array2);

console.log(array3)
//결과 : ['a', 'b', 'c', 'd', 'e', 'f']

2. splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
push,pop,unshift,shift역할을 다 할 수 있다고 보면 된다.
기존 배열의 값을 변경한다.

• push : 직접 변경함
• pop : 맨 마지막 반환, 마지막 엘리먼트 삭제함
• shift : 앞 반환, 앞 엘리먼트 삭제한다.
• unshift : 첫번째 값에 넣는다.
• splice(startIndex, deleteCount, item)

위 함수들은 직접 값을 변경하기 때문에 실무에서는 다른거를 사용

구문

array.splice(startIndex[, deleteCount[, item1,[item2], ...]]

• stratIndex : 배열의 변경을 시작한 인덱스
• deleteCount : 배열에서 제거할 요소의 수
• item : 배열에 추가할 요소.(배열 요소를 삭제할 때는 생략)

배열 요소 추가

let mine = [0, 1, 2, 3];

//배열 2번째 위치한 곳에 숫자 5를 추가한다.
mine.splice(2,0,5); //[0, 1, 5, 2, 3]

//배열 2번째 위치한 곳에 숫자 5, 7을 추가한다.
mine.splice(2,0,5,7); //[0, 1, 5, 7, 2, 3]

배열 요소 제거

let mine = [0, 1, 2, 3];

//배열 1번째 부터 1개를 제거한다.
mine.splice(1,1); //[0, 2, 3]

//배열 1번째 부터 2개를 제거한다.
mine.splice(1, 2); //[0, 3]

배열 요소 교체

let mine = [0, 1, 2, 3];

//배열 1번째 부터 1개를 제거하고 숫자 5개를 추가한다.
mine.splice(1, 1, 5); //[0, 5, 2, 3]

//배열 1번째 부터 2개를 제거하고 숫자 5로 추가한다.
mine.splice(1, 2, 5); //[0, 5, 3]

배열 요소 추출하기

let mine = [0, 1, 2, 3];

//배열 1번째 부터 1개를 제거한다.
let remove = mine.splice(1,1); //[1]

//배열 1번째 부터 2개를 제거한다.
let remove = mine.splice(1,2); //[1,2]

https://mine-it-record.tistory.com/352

3. forEach

for문 돌리는거랑 같은 개념

Array.prototype.forEach(callback[, thisArg])

callback : function(currentValue[, index[, originalArray]])

• currentValue : 현재값
• index : 현재 인덱스
• originalArray : 원본배열

thisArg : this에 할당할 대상. 생략시 global객체

const a = [1, 2, 3];
a.forEach(
  function (v, i, arr) {
    console.log(v, i, arr, this);
  },
  [10, 11, 12]
);
/*
1 0 [1, 2, 3] [10, 11, 12]
2 1 [1, 2, 3] [10, 11, 12]
3 2 [1, 2, 3] [10, 11, 12]
*/

forEach()함수를 사용할 때 콜백함수로 일반 함수를 선언하는 것과 ES6에 추가된 화살표 함수를 사용하는 것에는 큰 차이점이 있다.

const fun1 = {
  name: "pyh",
  languages: ["java", "c++", "javascript"],
  languagesPrint: function () {
    console.log(this.name);
    this.languages.forEach(function (language) {
      console.log(language);
      console.log(this);
    });
  },
};
fun1.languagesPrint();
/*
pyh
java
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
c++
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
javascript
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
*/

위의 코드에서 languagesPrint()의 this는 현재 객체인 fun1을 가리키지만, forEach의 인자로 들어간 콜백함수는 그렇지 않기 때문에 window객체가 나오게 된다. 이런 현상을 해결 할 수 있는 방법은 다음과 같다.

//arrow function -> forEach 내부 함수값에 있는 this고정.
const fun1 = {
  name: "pyh",
  languages: ["java", "c++", "javascript"],
  languagesPrint: function () {
    console.log(this.name);
    this.languages.forEach((language) => {
      console.log(this.name, language);
    });
  },
};
fun1.languagesPrint();
/*
pyh
pyh java
pyh c++
pyh javascript
*/

다음과 같이 콜백함수를 arrow function으로 선언해주면, forEach()를 호출하는 this와 콜백함수 내의 this는 같게 되므로, 객체 변수를 참조할 수 있게 된다.

this바인딩

• 전역공간에서 : window / global
• 함수 호출시 : window /global
• 메서드 호출시 : 메서드 호출 주체(메서드명 앞)
• callback 호출시 : 기본적으로는 함수내부에서와 동일
• 생성자함수 호출시 : 인스턴스

4. map

for문을 돌려서 새로운 배열을 만든다.
return필수

Array.prototype.map(callback[, thisArg])

• callback: function (currentValue[, index[, originalArray]])
  • currentValue: 현재값
  • index: 현재 인덱스
  • originalArray: 원본 배열
• thisArg: this에 할당할 대상. 생략시 global객체,window객체

const a = [1, 2, 3];
const b = a.map(
  function (v, i, arr) {
    console.log(v, i, arr, this);
    return this[0] + v;
  },
  [10]
);
/*
1 0 [1, 2, 3] [10]
2 1 [1, 2, 3] [10]
3 2 [1, 2, 3] [10]
*/
console.log(b); // [11,12,13]

※ map함수로 생성된 배열은 기존 배열이 아닌 새로운 배열이다.

const a = [1, 2, 3];
const b = a.map((v) => {
  return v;
});

console.log(a === b); //false

[MDN - Array.prototype.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

5. filter

filter()메서드는 주어진 함수의 테스트를 통과하여 모든 요소를 모아 새로운 배열로 반환한다.

특징

• 값이 존재하는 인덱스에 대해서만 호출.
• 삭제 또는 값이 없는 배열은 filter 함수가 실행되지 않는다.
• 기존 배열의 값을 변경하지 않는다.
• 처리되는 범위는 callback의 첫 호출 전에 설정. callback 호출 후 기존 배열을 추가해도 추가된 요소는 filter 함수에서 반영되지 않는다.

구문

arr.filter(callback(element[, index[, array]])[, thisArg])

매개변수

• callback
  
  각 요소를 테스트 할 함수.
  • element : true를 반환하면 요소를 유지하고,false를 반환하면 버린다. 다음 세 가지 매개변수를 받는다. 처리할 현재 요소.
  • index(Optional) : 처리할 현재 요소의 인덱스.
  • array(Optional) : filter를 호출한 배열.
• thisArg(Optional) callback을 실행할 때 this로 사용하는 값.

반환 값

테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환한다.

길이가 6이상인 단어 필터링

const words = [
  "spray",
  "limit",
  "elite",
  "exuberant",
  "destruction",
  "present",
];

const result = words.filter((word) => word.length > 6);

console.log(result); // ['exuberant', 'destruction', 'present']

배열 요소에서 5의 배수인 요소만 반환

const arr = [1, 5, 8, 10, 12, 15, 16, 20];

var newArr = arr.filter((data) => {
  return data % 5 === 0 ? true : false;
});

console.log(newArr); //[5,10,15,20]

참고 : https://developer-talk.tistory.com/2

배열 내용 검색

const movies = ["avengers", "Thor", "spiderman", "Ironman", "antman"];

const filterMovie = (query) => {
  return movies.filter((value) => {
    return value.toLowerCase().indexOf(query.toLowerCase()) > -1;
  });
};

console.log(filterMovie("man"));

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

6. reduce

for문을 돌려서 최종적으로 다른 무언가를 만드는 목적. return필수

Array.prototype.reduce(callback[, initialValue])

• initialValue: 초기값. 생략시 첫번째 인자가 자동 지정되며, 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.
• callback: function (accumulator, currentValue[, currentIndex[, originalArray]])
  • accumulator: 누산기는 콜백의 반환값을 누적한다. 콜백의 이전 반환값 또는, 콜백의 첫번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값이다.
  • currentValue: 현재값.
  • currentIndex: 현재 인덱스, initialValue를 제공한 경우 0, 아니면 1부터 시작.
  • originalArray: reduce() 를 호출한 배열.

const arr = [1, 2, 3];
const res = arr.reduce(function (p, c, i, arr) {
  console.log(p, c, i, arr, this);
  return p + c;
}, 10);

/*
10 1 0 [1, 2, 3] window
11 2 1 [1, 2, 3] window
13 3 2 [1, 2, 3] window
console.log(res) //16
*/

const arr = ["a", "b", "c", "d"];
const str = arr.reduce(function (res, item, index, array) {
  res[item] = item;
  return res;
}, {});
console.log(str); //{a: 'a', b: 'b', c: 'c', d: 'd'}

const arr = [1, 2, 3, 4];
const str = arr.reduce(function (res, item, index, array) {
  return res + item;
}, ""); //''생략이 1이 출력.
console.log(str); //1234

const arr = ["a", "b", "c", "d"];
const str = arr.reduce(function (res, item, index, array) {
  return res + item;
});
console.log(str); //abcd

const arr = [10, 20, 30, 40, 50];
const r = arr.reduce(function (p, c) {
  return p + c;
});
console.log(r); //150

return 생략

const arr = [10, 20, 30, 40, 50];
const r = arr.reduce((p, c) => p + c);
console.log(r); //150

reduce를 사용하면 좋은점

for문으로 돌릴 경우

const a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = 0;
for (let b = 0; b < a.length; b++) {
  res += a[b];
}
//55

reduce문으로 돌릴 경우

const a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const res = a.reduce(function (a, c) {
  return a + c;
});
console.log(res); //55