13가지 유용한 자바스크립트 배열 팁과 정보

본문은 아래의 링크를 읽고 해석, 요약한 글입니다.
13 Useful JavaScript Array Tips and Tricks You Should Know

13 Useful JavaScript Array Tips and Tricks You Should Know

 

1. 중복 제거

new Set을 사용하고, Array.from() 메서드 또는, 스프레드 연산자(...)를 사용하여 빠르고 쉽게 중복 제거를 할 수 있다.

const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple'];
 

// First method
const uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns ['banana', 'apple', 'orange', 'watermelon', 'grape']

// Second method
const uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns ['banana', 'apple', 'orange', 'watermelon', 'grape']

 

2. 특정 값 바꾸기

splice를 사용하면 배열의 특정 값을 간편하게 교체할 수 있다.

• splice( start, value to remove, valueToAdd )

const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple'];

fruits.splice(0, 2, 'potato', 'tomato');
console.log(fruits); // returns ['potato', 'tomato', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']

 

3. map() 없이 배열 매핑하기

Array.from() 을 사용하면 map 비슷한 효과를 내면서 깨끗한 코드를 얻을 수 있다.

const friends = [
    { name: 'John', age: 22 },
    { name: 'Peter', age: 23 },
    { name: 'Mark', age: 24 },
    { name: 'Maria', age: 22 },
    { name: 'Monica', age: 21 },
    { name: 'Martha', age: 19 },
]
 

const friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns ['John', 'Peter', 'Mark', 'Maria', 'Monica', 'Martha']

 

4. 배열비우기

const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple'];

fruits.length = 0;
console.log(fruits); // returns []

 

5. 배열을 객체로 반환하기

Array를 Object로 변환하는 가장 빠른 방법은 잘 알려진 스프레드 연산자(…)를 사용하는 것이다.

const fruits = ['banana', 'apple', 'orange', 'watermelon'];
const fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: 'banana', 1: 'apple', 2: 'orange', 3: 'watermelon', 4: 'apple', 5: 'orange', 6: 'grape', 7: 'apple'}

 

6. 배열에 데이터 적용하기

배열을 생성할 때, 일부 데이터로 채우거나, 같은 값을 가진 배열을 만들 수 있다.

const newArray = new Array(10).fill('1');
console.log(newArray); // returns ['1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1']

 

7. 배열 병합하기

concat 메소드를 사용하지 않고 하나의 배열로 병합하는 방법이 무엇일까? 스프레드연산자(...)를 사용하면 배열을 작업할 때 유용하며, 같은 작업을 할 수 있다.

const fruits = ['apple', 'banana', 'orange'];
const meat = ['poultry', 'beef', 'fish'];
const vegetables = ['potato', 'tomato', 'cucumber'];
const food = […fruits, …meat, …vegetables];
console.log(food); // ['apple', 'banana', 'orange', 'poultry', 'beef', 'fish', 'potato', 'tomato', 'cucumber']

 

8. 두 배열의 공통 요소 찾기

const numOne = [0, 2, 4, 6, 8, 8];
const numTwo = [1, 2, 3, 4, 5, 6];
const duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]

 

9. 배열에서 거짓 값 제거하기

JavaScript에서 거짓 값은 false, 0, "", null, NaN, undefined 이다. filter() 메소드를 이용하면, 배열에서 거짓 값을 제거해줄 수 있다.

const mixedArr = [0, 'blue', '', NaN, 9, true, undefined, 'white', false];
const trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]

 

10. 배열에서 랜덤값 가져오기

배열 길이에 따라 무작위 인덱스 번호를 얻을 수 있다.

const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown'];
const randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

 

11. 배열반전

코드 한 줄이면, 배열을 반대로 만들 수 있다.

const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown'];
const reversedColors = colors.reverse();
console.log(reversedColors); // returns ['brown', 'black', 'yellow', 'orange', 'purple', 'pink', 'navy', 'green', 'white', 'blue']

 

12. lastIndexOf() 방법

JavaScript에서는 배열에서 주어진 기준값이 있는 마지막 인덱스를 찾을 수 있다.

const nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
const lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9

 

13. 배열의 모든 값을 합치기

reduce() 방법으로 코드 한 줄에 해결할 수 있다.

const nums = [1, 5, 2, 6];
const sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14