배열 기초

1. 배열이란

• 순서가 있는 값
• 대괄호를 이용해 배열을 만들고, 각가의 element는 쉼표로 구분
• 순서 : 인덱스(index)
  *0부터 번호를 매김
• 값 : 요소(element)
  *index를 이용해 접근 가능
• 없는 인덱스 조회시 undefined
• 배열 안에 배열 중첩 가능
• console.table(arr) : 인덱스와 값을 테이블로 보여줌

let myNumber = [1, 2, 3, 4, 5, 6];
myNumber[3]; //4
myNumber[2] = 8 //2번 인덱스의 값인 3이 8로 바뀜 [1, 2, 8, 4, 5, 6]
myNumber[10]; //undefined

let myNumber = [
  [1,2],
  [3,4],
  [5,6]
]; //이차원 배열
myNumber[1] //[3,4]
myNumber[1][0] //3

2. 배열의 반복

• i = 0 : index가 0부터 시작되기 때문
• i < myNumber.length : 배열의 길이까지만 반복하면 됨

let myNumber = [1, 2, 3, 4, 5, 6];
for(let n = 0; n < myNumber.length; n++){
 console.log(myNumber[n]);
}

let myNum = [10, 20, 30,40]
let sum = 0 //초기값을 입력해주지 않으면 undefined가 되어 NaN 출력
for (let i =0 ; i < myNum.length; i++){
  sum = sum + myNum[i]
}
console.log(sum) //100

배열의 기초 메소드

1. arr.length

• 길이 알아내기
• 배열이 빈 배열인지 확인하려면 arr.length === 0

let myNumber = [1, 2, 3, 4, 5, 6];
myNumber.length; //6

2. Array.isArray()

• 배열인지 아닌지 확인
• typeof 사용 시 object가 나와 객체인지 배열인지 알 수 없음
• true / false

let myNumber = [1, 2, 3, 4, 5, 6];
Array.isArray(myNumber); //true

3. arr.push() / arr.pop()

• 배열 맨 뒤 요소 추가 및 삭제

let myNumber = [1, 2, 3, 4, 5, 6];
myNumber.push(7); //7 : 총 length 출력
//[1, 2, 3, 4, 5, 6, 7]

let myNumber = [1, 2, 3, 4, 5, 6];
myNumber.pop(); //6 : 삭제된 요소 출력
//[1, 2, 3, 4, 5]

4. arr.shift() / arr.unshift()

• 배열 맨 앞 요소 추가 및 삭제

let myNumber = [1, 2, 3, 4, 5, 6];
myNumber.shift(); //1 : 삭제된 요소 출력
//[2, 3, 4, 5, 6]

let myNumber = [1, 2, 3, 4, 5, 6];
myNumber.unshift(7); //7 : 총 length 출력
//[7, 1, 2, 3, 4, 5, 6]

5. arr.indexOf / arr.lastIndexOf

• 배열 요소 포함 여부 확인
• 첫번째 값만 반환하고 끝

let myNumber = [1, 2, 3, 4, 5, 1, 2];
myNumber.indexOf(2); //1 : 해당 요소가 위치한 인덱스
myNumber.indexOf(8); //-1 : 없는 요소일 경우 -1을 출력
myNumber.indexOf(2, 2); //6 : 2부터 2를 탐색하므로 뒤에 있는 2의 인덱스

myNumber.lastIndexOf(2); //6
myNumber.lastIndexOf(8); //-1

6. arr.includes()

• 배열 요소 포함 여부를 불린형으로 확인
• Internet Explorer에서 사용 불가(에러 발생)

let myNumber = [1, 2, 3, 4, 5, 6];
myNumber.includes(3); //true
myNumber.includes(8); //false

7. arr.splice()

• 배열의 특정 요소를 지울 수 있음
• arr.splice(n, m) : n번째 요소부터 m개를 지워라
• arr.splice(n, m, x) : n번째 요소부터 m개를 지우고 x를 뒤에 추가
• mutable method : 원본 배열을 변경
• 삭제된 요소를 반환

let myNumber = [1, 2, 3, 4, 5];
myNumber.splice(1,2); //[2, 3]
//1번 인덱스부터 2개를 지워라

console.log(myNumber)
//[1,4,5] 

let myNumber = [1, 2, 3, 4, 5];
myNumber.splice(1,3,10,20); //[2, 3, 4]
//1번 인덱스부터 3개를 지우고 10, 20을 넣어라

console.log(myNumber)
//[1,10,20,5] 

let myArr = ['나는', '까까', '입니다'];
myArr.splice(1, 0, '검은', '고양이'); //[]
//아무것도 지우지 않고 0과 1 사이에 추가

console.log(myArr)
//['나는', '검은', '고양이', '까까', '입니다']

8. arr.slice()

• arr.slice(n, m) : n번째 요소부터 m의 바로 앞까지 반환
• m번째 인덱스는 포함하지 않음
• m을 적지 않을 경우 배열 끝까지 반환
• n > m인 경우 []을 리턴
• 괄호 안에 아무것도 적지 않거나 0을 적으면 전체 배열이 새로운 주소로 복사됨
• arr의 길이와 같거나 큰 수 입력시 []을 리턴
• immutable method : 원본 배열을 수정하지 않음

let myNumber = [1, 2, 3, 4, 5];
myNumber.slice(1,4); //[2,3,4]
//1번 인덱스부터 4번 인덱스의 바로 앞까지
console.log(myNumber)//[ 1, 2, 3, 4, 5 ]

let myNumber2 = myNumber.slice()//[1, 2, 3, 4, 5];
let myNumber3 = myNumber.slice(0)//[1, 2, 3, 4, 5];
//원본 배열을 수정하지 않고 배열을 복사

9. arr.concat()

• 합쳐서 새 배열 반환
• immutable method : 원본 배열을 수정하지 않음

let myNumber = [1, 2];
let myNumber2 = [3, 4, 5];

myNumber.concat([3, 4]) //[1, 2, 3, 4]
myNumber.concat([3, 4], [5, 6]) //[1,2,3,4,5,6]
myNumber.concat([3, 4], 5, 6) //[1, 2, 3, 4, 5, 6]
myNumber.concat(myNumber2) //[1, 2, 3, 4, 5]

console.log(myNumber); //[1, 2]

10. arr.forEach(fn)

• 배열 반복
• 3개의 매개변수를 가진 함수를 인수로 받음
• 3개의 매개변수 : 해당 요소, 인덱스, 해당 배열 자체
  *해당 요소 : somin, KKAKKA / 해당 배열 : users
• 보통 해당 요소, 인덱스만 사용

let users = ['somin', 'KKAKKA'];
users.forEach((name, index) => {
  console.log(name)//'somin' 'KKAKKA'
  console.log(`${index+1}. ${name}`)//'1. somin' '2. KKAKKA'
});

11. arr.find(fn) / arr.findIndex(fn)

• 함수를 인자로 받아 포함 여부 확인
• 짝수 찾기, 성인 찾기 등이 가능
• arr.find(fn) : 첫번째 true값만 반환, 없으면 undefined 반환
• arr.findIndex(fn) : 해당 인덱스를 반환, 없으면 -1을 반환

let myNumber = [1, 2, 3, 4, 5];
const result = myNumber.find((num) => {
  return num % 2 === 0;
});

console.log(result)//2

let userList = [
  {name : 'somin', age : 26},
  {name : 'daeseong', age : 30},
  {name : 'KKAKKA', age : 7},
];
const result = userList.find((user) => {
  if(user.age > 19){
    return true;
  }
  return false;
});

console.log(result)//{ name: 'somin', age: 26 }

let userList = [
  {name : 'somin', age : 26},
  {name : 'daeseong', age : 30},
  {name : 'KKAKKA', age : 7},
];

const result1 = userList.findIndex(user => user.age > 19);
console.log(result1)//0

const result2 = userList.findIndex(user => user.age < 19);
console.log(result2)//2

const result3 = userList.findIndex(user => user.age > 40);
console.log(result3)//-1

12. arr.filter(fn)

• 만족하는 모든 요소를 배열로 반환

let myNumber = [1, 2, 3, 4, 5];
const result = myNumber.filter((num) => {
  return num % 2 === 0;
});

console.log(result)//[ 2, 4 ]

let userList = [
  {name : 'somin', age : 26},
  {name : 'daeseong', age : 30},
  {name : 'KKAKKA', age : 7},
];
const result = userList.filter((user) => {
  if(user.age > 19){
    return true;
  }
  return false;
});

console.log(result)
//[
//  { name: 'somin', age: 26 },
//  { name: 'daeseong', age: 30 }
//]

13. arr.reverse()

• 역순으로 재정렬
• 최근에 달린 댓글 순으로 보여주고자 할 때 사용

let myNumber = [5, 4, 3, 2, 1];
myNumber.reverse(); //[5, 4, 3, 2, 1]

14. arr.map(fn)

• 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환
• immutable method : 원본 배열을 수정하지 않음

let userList = [
  {name : 'somin', age : 26},
  {name : 'daeseong', age : 30},
  {name : 'KKAKKA', age : 7},
];
let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    id : index + 1,
    isAdult : user.age > 19,
  });
});

console.log(newUserList)
//[
//   { name: 'somin', age: 26, id: 1, isAdult: true },
//   {
//     name: 'daeseong',
//     age: 30,
//     id: 2,
//     isAdult: true
//   },
//   { name: 'KKAKKA', age: 7, id: 3, isAdult: false }
// ]

console.log(userList)
//[
//   { name: 'somin', age: 26 },
//   { name: 'daeseong', age: 30 },
//   { name: 'KKAKKA', age: 7 }
// ]

15. arr.join()

• 배열의 요소들을 합쳐 문자열을 만들 때 사용
• 괄호 안에 아무것도 적지 않으면 쉼표로 구분되어 나옴

let myArr = ['나는', '까까', '입니다'];
let result = myArr.join(' ') //공백으로 구분
console.log(result);
//'나는 까까 입니다'

16. arr.split()

• 문자열을 나눠서 배열로 만들어줌
• 괄호 안엔 어떤 것을 기준으로 나눌 지 정해줌

const users = 'somin,daeseong,KKAKKA';
const result = users.split(',') //,를 기준으로 나눔
console.log(result);
//[ 'somin', 'daeseong', 'KKAKKA' ]

17. arr.sort()

• 배열 재정렬
• 정렬시 배열의 요소를 문자열로 취급
• 문자열도 알파벳 숫서대로 정렬
• 함수를 인수로 받음
  *Lodash 라이브러리 활용하여 원하는 기준으로 정렬 가능
• mutable method : 원본 배열을 변경

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

let myNumber = [3, 13, 5, 27, 4];
myNumber.sort();
console.log(myNumber)
//[ 13, 27, 3, 4, 5 ] //1과 2로 시작하는 13과 27이 앞에 위치

let myNumber = [3, 13, 5, 27, 4];
function fn(a, b){
  return a - b; //a와 b를 비교하여 작은 수를 앞으로 보냄
}
myNumber.sort(fn);
console.log(myNumber)
//[ 3, 4, 5, 13, 27 ]

let myNumber = [3, 13, 5, 27, 4];
myNumber.sort((a,b) => a - b)
console.log(myNumber)
//[ 3, 4, 5, 13, 27 ]

18. arr.reduce()

• 함수를 인수로 받음
• 배열을 순환하며 원하는 작업을 한 후 하나의 결과값 반환
• arr.reduceRight() : 배열 우측부터 연산을 수행

let arr = [1, 2, 3, 4, 5];
let result = 0;
arr.forEach((num) => { //forEach를 활용해 베열을 순환하며 더함
  result += num;
});
console.log(result); //15

let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((prev, cur) => { //누적 계산값과 현재값
  return prev + cur; //누적값에 현재값을 더해줌
}, 0); //초기값은 0
console.log(result); //15

let userList = [
  {name : 'somin', age : 26},
  {name : 'daeseong', age : 30},
  {name : 'KKAKKA', age : 7},
];
let result = userList.reduce((prev, cur) => {
  if(cur.age > 19){
    prev.push(cur.name)
  }
  return prev
}, [])
console.log(result); //[ 'somin', 'daeseong' ]

References

1. mutator method
2. 배열 메소드1
3. 배열 메소드2