[Javascript] 배열(Array), 배열 메소드(Array methods)

배열: 순서가 있는 리스트

let students = ['철수', '영희', ..., '영수'];

console.log(students[0]);   // 철수
console.log(students[1]);   // 영희
console.log(students[29]);  // 영수

students[0] = '민정';
console.log(students);   // ['민정', '영희', ...]

 

 

배열은 문자, 숫자, 객체, 함수 등을 포함할 수 있다.

let arr = [
    '민수',
    3,
    false,
    {
        name : 'Mike',
        age : 30,
    },
    function(){
        console.log('TEST');
    }
];

---

반복문 : for

let days = ['월', '화', '수'];

for(let index = 0; index < days.length; index++){
    console.log(days[index])
}

반복문 : for ... of

let days = ['월', '화', '수'];

for(let day of days){
    console.log(day)
}

* 객체를 수행하는 for ... in과 헷갈리지 않게 주의!! 배열도 객체형이기 때문에 for ... in을 쓸 수는 있지만 장점보다 단점이 많기 때문에 권장하지 않는다.

---

length : 배열의 길이

students.length  // 30

 

push() : 배열 끝에 추가

let days = ['월', '화', '수'];
days.push('목');
console.log(days);  // ['월', '화', '수', '목']

 

pop() : 배열 끝 요소 제거

let days = ['월', '화', '수'];
days.pop()
console.log(days)   //['월', '화']

 

shift, unshift : 배열 앞에 제거/추가

days.unshift('일');
console.log(days);  //['일', '월', '화', '수']

days.shift();
console.log(days);  //['월', '화', '수']

 

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) : 특정 요소 지우고 추가

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

let arr = ["나는", "철수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관");  // ["나는", "대한민국", "소방관", "철수", "입니다"]

m에 0을 넣으면 아무것도 삭제하지 않고 중간에 요소를 추가하는 것이 가능하다.

 

arr.splice() : 삭제된 요소 반환

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

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

 

arr.slice(n, m) : n부터 m - 1까지 반환 

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

 

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

let arr = [1, 2];
arr.concat([3, 4]);  // [1, 2, 3, 4]
arr.concat([3, 4], [5, 6]);  // [1, 2, 3, 4, 5, 6]
arr.concat([3, 4], 5, 6);  // [1, 2, 3, 4, 5, 6]

 

arr.forEach(fn) : 배열 반복

인수로 함수를 받는다.

함수에서 요소, 인덱스, 배열을 인자값으로 받는다. 보통 첫 번째와 두 번째만 사용한다.

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((item, index, arr) => {
    // ..
});

 

arr.indexOf/arr.lastIndexOf

indexOf는 검색된 요소가 첫번째로 나타나는 인덱스를 리턴한다. lastIndexOf는 검색된 요소가 마지막으로 나타나는 인덱스를 리턴한다. 찾는 문자열이 없으면 -1을 리턴한다.

let arr = [1, 2, 3, 4, 5, 1, 2, 3];

arr.indexOf(3);  // 2
arr.indexOf(7);  // -1

arr.indexOf(3, 3);  // 7
arr.lastIndexOf(3);  // 7

 

arr.includes() : 포함하는지 확인

let arr = [1, 2, 3];
arr.includes(2);  // true
arr.includes(8);  // false

 

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

첫 번째 true 값만 반환하고 끝, 만약 없으면 undefined를 반환

let arr = [1, 2, 3, 4, 5, 6];
const result = arr.find((item)=>{
    return item % 2 === 0;
});
console.log(result);   // 2

 

arr.filter(fn)

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

let arr = [1, 2, 3, 4, 5, 6];
const result = arr.filter((item)=>{
    return item % 2 === 0;
});
console.log(result);   // [2, 4, 6]

 

arr.reverse() : 역순으로 재정렬

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

 

arr.map(fn)

함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

let userList = [
    { name: "Mike", age: 30 },
    { name: "Jane", age: 27 },
    { name: "Tom", age: 10 },
];

let newUserList = userList.map((user, index) => {
    return Object.assign({}, user, {
    	id: index + 1,
    	isAdult: user.age > 19,
    });
});

console.log(newUserList);
// [{ name: "Mike", age: 30, id: 1, isAdult: true },
// { name: "Jane", age: 27, id: 2, isAdult: true },
// { name: "Tom", age: 10, id: 3, isAdult: false },]

 

join

배열을 합쳐서 문자열을 만든다. 인수로 전달하는 것이 구분자

let arr = ["안녕", "나는", "철수야"];
let result = arr.join("-");
console.log(result);  // 안녕-나는-철수야

 

split

문자열을 나눠서 배열로 만든다.

const users = "Mike,Jane,Tom,Tony";
const result = users.split(",");
console.log(result);  // ["Mike", "Jane", "Tom", "Tony"];

 

Array.isArray()

배열인지 아닌지 확인

let user = {
    name: "Mike",
    age: 30,
};

let userList = ["Mike", "Tom", "Jane"];

console.log(typeof user);      // object
console.log(typeof userList);  // object

console.log(Array.isArray(user));      // false
console.log(Array.isArray(userList));  // true

** 자바스크립트에서 배열은 객체형에 속하기 때문에 typeof는 배열을 객체라고 알려준다.

 

arr.sort()

배열 재정렬. 배열 자체가 변경되니 주의

인수로 정렬 로직을 담은 함수를 받음

let arr = [ "a", "c", "d", "e", "b" ];
arr.sort();
console.log(arr);    // [ "a", "b", "c", "d", "e" ]

let arr = [27, 8, 5, 13];

arr.sort((a, b) => {
    return a - b;
});

// 8, 27, 5, 13
// 5, 8, 27, 13
// 5, 8, 13, 27

console.log(arr);   // [5, 8, 13, 27]

lodasy sortBy()

 

arr.reduce()

인수로 함수를 받는다.

(누적 계산값, 현재값) => { return 계산값 };

let arr = [1, 2, 3, 4, 5];

const result = arr.reduce((prev, cur)=>{
    return prev + cur;
}, 0);

console.log(result);  // 15

0은 초기값으로, 선택사항이기 때문에 안써도 된다.

let userList = [
    { name: "Mike", age: 30 },
    { name: "Tom", age: 10 },
    { name: "Jane", age: 27 },
    { name: "Sue", age: 26 },
    { name: "Harry", age: 3 },
];

let result = userList.reduce((prev, cur) => {
    if(cur.age > 19){
        prev.push(cur.name);
    }
    return prev;
}, []);

console.log(result);   // ["Mike", "Jane", "Sue"]