// 배열을 선언하는 다양한 방법
let arr = [];
let arr = new Array();
// 배열선언
let 과일 = ['사과', '수박', '복숭아', '딸기', '바나나'];
let 과일 = new Array(5);
let 과일 = new Array('사과', '수박', '복숭아', '딸기', '바나나');
// 요소에 여러 가지 자료형이 섞여 있습니다.
let arr = [ '사과', { name: '수수' }, true, function() { alert('안녕하세요.'); } ];
push
: 배열 끝에 요소를 추가
pop
: 배열 끝 요소를 제거하고, 제거한 요소를 반환
let fruits = ["apple", "orange", "melon"];
let ret; //반환된 값을 사용하기 위해 변수를 따로 줌
ret = fruits.push("cherry");
console.log(ret); // 4
console.log(fruits); //[ 'apple', 'orange', 'melon', 'cherry' ]
ret = fruits.pop(); // 맨 뒷 요소를 밖으로 꺼내겠다!
console.log(ret); //cherry : 꺼내진 맨뒤 값
console.log(fruits); //[ 'apple', 'orange', 'melon' ]
헷갈리는점
fruits.push(...)
를 호출하는 것은fruits[fruits.length] = ...
하는 것과 같은 효과를 보인다.
let fruits = ["apple", "orange", "melon"];
let ret;
ret = fruits.push("cherry"); //4
ret = fruits.pop(); //'cherry'
console.log(fruits); //['apple', 'orange', 'melon']
unshift
: 배열 앞에 요소를 추가
const cafe = ["coffee", "cake", "tea", "cookie"];
const count = cafe.unshift("bread");
console.log(count); // 5
console.log(cafe); //['bread', 'coffee', 'cake', 'tea', 'cookie']
shift
: 배열 앞 요소를 제거하고, 제거한 요소를 반환
let first = cafe.shift();
console.log(first); //bread
cafe.unshift(first);
console.log(cafe); //['coffee', 'cake', 'tea', 'cookie']
참고하기
push
와pop
은 빠르지만shift
와unshift
는 느리다.
shift
를 연산하기 위해서는 인덱스가 0 인 요소를 제거해야 할 뿐만 아니라 제거 대상이 아닌 나머지 요소들의 인덱스를 수정해줘야한다.
shift
아래 3가지 동작을 수행해야 이루어진다.
arr.splice(index[, deleteCount, elem1, ..., elemN])
var fish = ["정어리", "고등어", "돌고래", "참치", "고래상어", "코끼리"];
// 1. splice 를 이용해 코끼리를 제거해보세요
// 2. 참치 다음에 다금바리를 추가해보세요
// 3. 돌고래를 제거하고 옥돔과 갈치를 추가해보세요
fish.splice(-1, 1); //맨 뒤 인덱스부터 1번째 제거
fish.splice(-1, 0, "다금바리"); // 맨 뒤 인덱스부터 제거없이 문자추가
fish.splice(2, 1, "옥돔", "갈치"); //2시작해서 1번쩨 제거하고 문자추가
console.log(fish);
['정어리','고등어','옥돔','갈치', '참치','다금바리','고래상어']
arr.slice([start], [end])
var fish = ["정어리", "고등어", "돌고래", "참치", "고래상어", "코끼리"];
// 다음 배열에서 물고기가 아닌것을 slice로 선택해 콘솔로 출력해 보세요.
console.log(fish.slice(2, 3));
console.log(fish.slice(5));
sort() : 배열의 요소를 정렬한 후 그 배열을 반환
let avengers = ["spiderman", "ironman", "hulk", "thor"];
avengers.sort();
console.log(avengers); //[ 'hulk', 'ironman', 'spiderman', 'thor' ]
let avengers2 = ["스파이터맨", "아이언맨", "헐크", "토르"];
avengers2.sort();
console.log(avengers2); //[ '스파이터맨', '아이언맨', '토르', '헐크' ]
let arrNum = [13, 9, 10, 3, 44, 21];
arrNum.sort();
console.log(arrNum); //[ 10, 13, 21, 3, 44, 9 ] 문자열로 바꾼뒤 유니코드 순서대로 바꾼다.
arrNum.sort(function (a, b) {
return a - b;
});
더 간단하게 화살표 함수를 이용해서 작성할 수 있다
arr.sort( (a, b) => a - b );
9-3 => 양수이기 때문에 3이 앞으로 간다. [3,9]
var arrNum2 = [13, 9, 10, 2];
// 오름차순으로 정렬할 경우 (a - b)
// 13 - 9 == 4 --> 양수임으로 9를 앞으로
// 13 - 10 == 3 --> 양수임으로 10을 앞으로
// 9 - 10 == -1 --> 음수임으로 9를 앞으로 [9, 10, 13, 2]
// 13 - 2 == 11 --> 양수임으로 2를 앞으로 [9, 10, 2, 13]
// 10 - 2 == 8 --> 양수임으로 2를 앞으로 [9, 2, 10, 13]
// 9 - 2 == 7 --> 양수임으로 2를 앞으로 [2, 9, 10, 13]
let arrNum = [13, 9, 10, 3, 44, 21];
arrNum.sort(function (a, b) {
if (a > b) {
return -1;
} else if (b > a) {
return 1;
} else {
return 0;
}
});
반대로 해보자
a-b일때 음수면 b를 앞으로 보내자라는 약속
let arrNum3 = [9, 3, 44, 13, 21];
arrNum3.sort(function (a, b) {
return b - a;
});
console.log(arrNum3); //[ 44, 21, 13, 9, 3 ]
/*
내림차순 정렬
3-9 == -6 음수니까 a 가 앞으로
44 - 3 == 41 양수
[9, 44, 3]
*/
더 가보자아
// 다음 배열에서 sort 함수를 이용해 원소의 product의 값을 기준으로 가나다순으로 정렬해보세요.
var studentList = [
{
id: 1,
product: "연필",
stock: 10,
},
{
id: 2,
product: "색종이",
stock: 33,
},
{
id: 3,
product: "체육복",
stock: 2,
},
{
id: 4,
product: "만연필",
stock: 0,
},
];
studentList.sort(function (a, b) {
if (a.product < b.product) {
return -1;
} else if (b.product < a.product) {
return 1;
} else {
return 0;
}
});
console.log(studentList);
/*[
{ id: 4, product: '만연필', stock: 0 },
{ id: 2, product: '색종이', stock: 33 },
{ id: 1, product: '연필', stock: 10 },
{ id: 3, product: '체육복', stock: 2 }
]
*/
const cafe = ['coffee', 'cake', 'tea', 'cookie']
console.log(cafe.reverse()); //['cookie', 'tea', 'cake', 'coffee']
let result = arr.map(function(item, index, array) {
// 요소 대신 새로운 값을 반환
});
arr = [1, 2, 4, 5, 6];
arr.map((i) => i + 100); //[(101, 102, 104, 105, 106)];
let value = arr.reduce(function(accumulator, item, index, array) {
// ...
}, [initial]);
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr.reduce((누적값, 현재값) => 누적값+현재값)
//expected output: 55
arr.reduce((누적값, 현재값, index, array) => 누적값+현재값)
//expected output: 55
arr.reduce((누적값, 현재값, index, array) => 누적값-현재값)
//expected output: -53
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, current) => sum + current, 0);
console.log(result); // 15
Array.prototype.indexOf()
-1
을 출력한다.const cafe = ['coffee', 'cake', 'tea', 'cookie']
cafe.indexOf('tea') //2
cafe.indexOf('coffe', 1) //-1
cafe.indexOf('bread') //-1
arr.includes(item, from)
indexOf
/lastIndexOf
와 약간의 차이가 있다.let arr = [1, 0, false];
arr.includes(1); //true
find
: 하나의 요소라도 조건을 만족하는지 확인할때, 조건에 맞는 딱 하나만 찾아줌! (아이디찾을때 굳)
let result = arr.find(function(item, index, array) {
// true가 반환되면 반복이 멈추고 해당 요소를 반환
// 조건에 해당하는 요소가 없으면 undefined를 반환
});
const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr2.find((i) => i > 5);
//expected output: 6 ;
findIndex
let results = arr.filter(function(item, index, array) {
// 조건을 충족하는 요소는 results에 순차적으로 더해진다
// 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환
});
let users = [
{id: 1, name: "A"},
{id: 2, name: "B"},
{id: 3, name: "C"}
];
// 앞쪽 사용자 두 명을 반환
let someUsers = users.filter(item => item.id < 3);
someUsers.length; // 2
Array.isArray() :
Array.isArray('coffee'); //false
Array.isArray(false); //false
Array.isArray([1]); //true
Array.prototype.join()
let number = ["010", "1111", "2222"];
console.log(number.join("-")); // 010-1111-2222
let names = 'A, B, C';
let arr = names.split(', '); // , 를 기준으로 쪼개짐
for (let name of arr) {
alert( `${name}에게 보내는 메시지` ); // A에게 보내는 메시지 , B 에게 보내는 메세지, C에게 보내는 매세지
}
let str = "test";
str.split(''); // t,e,s,t
let test = ["2", "3", "1", "4"];
test.fill("hi");
console.log(test); //[ 'hi', 'hi', 'hi', 'hi' ]
//빈 배열을 만들어 주고 싶을때
console.log(Array(5)); //[ <5 empty items> ]
console.log(Array.from("hello".repeat(5)));
/**
* [
'h', 'e', 'l', 'l', 'o', 'h',
'e', 'l', 'l', 'o', 'h', 'e',
'l', 'l', 'o', 'h', 'e', 'l',
'l', 'o', 'h', 'e', 'l', 'l',
'o'
]
/*hello를 붙여서 fill하고 싶을땐*/
console.log(Array(5).fill("hello")); //[ 'hello', 'hello', 'hello', 'hello', 'hello' ]
foreach()
: 각각의 요소를 실행하고 싶을때 ( 순회만 함. 뭘 생성해주지 않음 )arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.forEach((i) => console.log(i));
// expected output: 1
// expected output: 2
// expected output: 3
// expected output: 4
// expected output: 5
// expected output: 6
// expected output: 7
// expected output: 8
// expected output: 9
// expected output: 10
(배열 메서드를 좀 더 쉽게 이해할 수 있는 그림 첨부)
참고 : 모던자바스크립트 튜토리얼 (https://ko.javascript.info/array-methods)