Array

: 순서가 있는 리스트, 고유번호(index) 존재

Array 함수 정리

1. push()

: 배열 끝에 추가

2. pop()

: 배열 끝 요소 제거

3. unshift()

: 배열 앞에서 추가

4. shift()

: 배열 앞에서 제거
unshift & shift는 여러 요소를 한꺼번에 추가 가능

5. 반복문 for ... of

let days = ["mon","tue","wed"]
for (let day of days){
	console.log(day)
}
// "mon","tue","wed" 

일반 for문보다는 간단하지만, index를 얻을 수 없음.

6. splice

arr.splice(n, m) //특정 요소 지움 n부터 m개

let arr = [1, 2, 3, 4, 5];
arr.splice(1,2);
console.log(arr); // [1,4,5]

arr.splice(n, m, x): 특정 요소 지우고 x추가

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb'); 
// inserts at index 1 
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

MDN splice 관련 Doc:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

7. slice

arr.slice(n, m) //n부터 m까지 반환

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]
console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

MDN slice 관련 Doc:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

8. concat

arr.concat(arr2, arr3 ..) : 합쳐서 새배열 반환

9. forEach

arr.forEach(fn): 함수를 인수로 받고 배열 반복

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// expected output: "a"
// expected output: "b"
// expected output: "c"

MDN forEach 관련 Doc:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

10. indexOf / lastIndexOf

arr.indexOf : 배열 인덱스에 해당하는 값 반환
arr.lastIndexOf : 배열 끝에서부터 역순 탐색

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf

11. includes

arr.includes(): 포함하는 지 여부 확인 (true or false 반환)

12. find / findIndex

arr.find(fn)
arr.findIndex(fn)
=>함수 사용가능.

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12 (해당하는 조건의 첫번째 요소 값 반환)

const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// expected output: 3 (해당하는 조건의 첫번째 인덱스 값 반환)

13. filter

arr.filter(fn) : 만족하는 모든 요소를 배열로 반환

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

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

14. reverse

arr.reverse(): 역순으로 재정렬
=> 최근 가입된 유저 먼저 보여주거나, 게시판 최근 순 정렬

15. map

arr.map(fn): 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

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

16. join

arr.join(): 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// expected output: "Fire,Air,Water"
console.log(elements.join(''));
// expected output: "FireAirWater"
console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

17. split

arr.split(): String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다.

const str = 'The quick brown fox jumps over the lazy dog.';
const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"
const chars = str.split('');
console.log(chars[8]);
// expected output: "k"
const strCopy = str.split();
console.log(strCopy);
// expected output: Array ["The quick brown fox jumps over the lazy dog."]

18. isArray

arr.isArray() 배열여부 판별

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

코딩앙마 유투브 참고
자바스크립트 기초 강좌 #14 - 배열(Array)
자바스크립트 중급 강좌 #7 - 배열 메소드1(Array methods)