[JavaScript] Array 배열 함수 (Array APIs)

Dodam·2023년 8월 11일
1

[JavaScript]

목록 보기
1/10
post-thumbnail

for of

  • 반복 가능한 객체의 모든 원소를 하나씩 추출하여 변수에 담아 반복문을 수행한다.
  • value에는 실제 원소의 값이 담긴다.
let fruits = ["apple", "lemon", "peach"];
for(let fruit of fruits) {
	console.log(fruit)
}
// "apple"
// "lemon"
// "peach"

forEach()

  • for of와 달리 Array 배열만 반복할 수 있다.
fruits.forEach((fruit) => console.log(fruit));

// "apple"
// "lemon"
// "peach"

push(), pop()

  • push는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.
var count = fruits.push("grape");
console.log(count) // 4
console.log(fruits); // ["apple", "lemon", "peach", "grape"]
  • pop은 배열에서 마지막 요소를 제거하고 그 요소를 반환한다.
console.log(fruits.pop()); // "grape"
console.log(fruits); // ["apple", "lemon", "peach"]

unshift(), shift()

  • unshift는 새로운 요소를 맨 앞쪽에 추가하고, 새로운 길이를 반환한다.
var count = fruits.unshift("grape");
console.log(count) // 4
console.log(fruits); // ["grape", "apple", "lemon", "peach"]
  • shift는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환한다. 이 메서드는 배열의 길이를 변하게 한다.
console.log(fruits.shift()); // "grape"
console.log(fruits); // ["apple", "lemon", "peach"]
  • push(), pop()에 비해 속도가 느리다.

splice()

  • 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
console.log(fruits.splice(0, 1)); //["apple"]
console.log(fruits); // ["lemon", "peach"]

concat()

  • 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.
  • 기존 배열은 바뀌지 않는다.
let color = ["white", "black", "blue"];
var newArr = fruits.concat(color);
console.log(newArr); // ["apple", "lemon", "peach", "white", "black", "blue"]

indexOf()

  • 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 존재하지 않으면 -1을 반환한다.
console.log(fruits.indexOf("apple")); // 0
console.log(fruits.indexOf("kiwi")); // -1

includes()

  • 배열이 특정 요소를 포함하고 있는지 판별한다.
console.log(fruits.includes("apple")); // true
console.log(fruits.includes("kiwi")); // false         

join(separator?)

  • 배열의 모든 요소를 연결해 하나의 문자열로 만든다.
  • 구분자를 넣으면 구분자를 넣어서 나눠준다.
console.log(fruits.join()); // "apple,lemon,peach"
console.log(fruits.join("-")); // "apple-lemon-peach"

split(separator, limit?)

  • String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나누고, 배열에 저장하여 반환한다.
var str = "when life gives you lemons, make lemonade";
var newStr = str.split(" ");
console.log(newStr) // ['when', 'life', 'gives', 'you', 'lemons,', 'make', 'lemonade']

reverse()

  • 배열의 순서를 바꾼다.
  • 첫 번째 요소는 마지막 요소가 되며, 마지막 요소는 첫 번째 요소가 된다.
  • 배열 자체를 수정한다.
console.log(fruits.reverse()); // ["peach", "lemon", "apple"]

slice(start?, end?)

  • 어떤 배열의 start부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다.
  • 원본 배열은 바뀌지 않는다.
console.log(fruits.slice(0, 2)); // ["apple", "lemon"]
console.log(fruits); // ["apple", "lemon", "peach"]

find(predicate, thisArg?)

  • 주어진 판별 함수를 만족하는 첫 번째 요소의 값만 반환한다.
    • 그런 요소가 없다면 undefined를 반환한다.
  • 찾으면 true가 나오고 해당하는 첫 번째 배열을 반환한다.
    • 첫 번째 요소 '값'만 반환한다.
let score = [50, 80, 96, 44, 24];
var result = score.find((item) => item < 60);
console.log(result); // 50
var result2 = score.find((item) => item < 50);
console.log(result2); // 44
var result3 = score.find((item) => item < 20);
console.log(result3); // undefined

filter(value, index?)

  • 주어진 함수(조건)을 만족하는 모든 요소를 모아 새로운 배열로 반환한다.
var result = score.filter((value) => value == 24);
console.log(result); // [24]

map()

  • 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
var result = score.map(item => item * 2);
console.log(result); // [100, 160, 192, 88, 48]

some()

  • 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트한다.
  • 조건에 해당하는 값이 있으면 true, 없으면 false를 반환한다.
var result = fruits.some(fruit => fruit == "apple");
console.log(result); // true
var result2 = fruits.some(fruit => fruit == "pineapple");
console.log(result2); // false

every()

  • 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트한다.
  • 모든 데이터가 조건에 해당하면 true, 하나라도 해당하지 않으면 false를 반환하다.
var result = score.every(value => value < 80);
console.log(result); // false

reduce(prev, curr)

  • 값을 누적할 때 사용한다.
  • 배열의 각 요소에 대해 주어진 reduce 함수를 실행하고, 하나의 결과값을 반환한다.
const arr = [1, 2, 3, 4, 5];
var result = arr.reduce((prev, curr, idx) => {
	return prev += curr;
}, 0);
console.log(result); // 15
var result2 = arr.reduce((prev, curr, idx) => {
	return prev += curr;
}, 10);
console.log(result2); // 25

sort(start?, end?)

  • 배열의 요소를 적절한 위치에 정렬한 후, 그 배열을 반환한다.
console.log(score.sort()); // [24, 44, 50, 80, 96]
var result = score.sort((a, b) => {return b - a});
console.log(result); // [96, 80, 50, 44, 24]
profile
Good things take time

1개의 댓글

comment-user-thumbnail
2023년 8월 11일

좋은 글 감사합니다. 자주 방문할게요 :)

답글 달기