-
[스파르타코딩클럽] 리액트 React.js week 1-2SPARTA CODING CLUB 2021. 8. 4. 21:04
Array 내장 함수
- map: 배열에 속한 항목을 원하는 대로 변환하고 새로운 배열을 만들 때 사용하는 함수. 원본 배열은 변하지 않는다.
const array_num = [0, 1, 2, 3, 4, 5]; const new_array = array_num.map((array_item) =>{ return array_item + 1; }); // 새 배열의 값은 원본 배열 원소에 +1 한 값입니다. console.log(new_array); // (6) [1, 2, 3, 4, 5, 6] // 원본 배열은 그대로 있죠! console.log(array_num); // (6) [0, 1, 2, 3, 4, 5]
- filter: 조건을 만족하는 항목들을 골라서 새 배열로 만들어 주는 함수. 원본 배열은 변하지 않는다.
const array_num = [0, 1, 2, 3, 4, 5]; // forEach(콜백함수) const new_array = array_num.filter((array_item) => { // 특정 조건을 만족할 때만 return 하면 됩니다! // return에는 true 혹은 false가 들어가야 해요. return array_item > 3; }); console.log(new_array); // (2) [4, 5]
- concat: 배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수. 원본 배열은 변하지 않는다.
concat은 중복 값을 제거하지 않는다.const array_num01 = [0, 1, 2, 3]; const array_num02 = [3, 4, 5]; const merge = array_num01.concat(array_num02); // 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :) console.log(merge); // (7) [0, 1, 2, 3, 3, 4, 5]
- 중복값을 제거하고 싶을 때,
const array_num01 = [0, 1, 2, 3]; const array_num02 = [3, 4, 5]; // Set은 자바스크립트의 자료형 중 하나로, // 중복되지 않는 값을 가지는 리스트입니다. :)! // ... <- 이 점 3개는 스프레드 문법이라고 불러요. // 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다. // 즉 [...array_num01]은 array_num01에 있는 항목을 전부 꺼내 // 새로운 배열([] 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다! const merge = [...new Set([...array_num01, ...array_num02])]; // 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :) console.log(merge); // (6) [0, 1, 2, 3, 4, 5]
- 중복값을 제거하고 싶을 때,
- from:
1) 배열로 만들고자 하는 값이나 유사배열을 복사해서 새로운 배열로 만들어 주는 함수.
2) 새로운 배열을 만들 때 (초기화 할 때)// 배열화 하자! const my_name = "mean0"; const my_name_array = Array.from(my_name); console.log(my_name_array); // (5) ["m", "e", "a", "n", "0"] // 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요. const text_array = Array.from('hello', (item, idx) => {return idx}); console.log(text_array); // (5) [0, 1, 2, 3, 4] // 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.) // 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요. const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;}); console.log(new_array); // (4) [0, 1, 2, 3]
- reduce: 배열의 각 값(왼쪽에서 오른쪽으로)에 대해 동시에 함수를 적용하여 단일 값으로 줄입니다.
array.reduce(callback[, initialValue]);const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); // expected output: 10 // 5 + 1 + 2 + 3 + 4 console.log(array1.reduce(reducer, 5)); // expected output: 15
자바스크립트 배열을 다루는 문법에서 많이 사용되는 5가지 함수!
본격적인 리액트는 다음 이 시간에!!
코린이도 할 수 있다!
반응형'SPARTA CODING CLUB' 카테고리의 다른 글
[스파르타코딩클럽] 리액트 React.js week 1-3 (0) 2021.08.09 [스파르타코딩클럽] 리액트 React.js week 1-1 (0) 2021.08.03 - map: 배열에 속한 항목을 원하는 대로 변환하고 새로운 배열을 만들 때 사용하는 함수. 원본 배열은 변하지 않는다.