[React #6] 배열/for/forEach/Map

01. 배열

• 의미 : 순서 있는 요소들의 집합, 여러 개의 항목이 들어있는 리스트
• 값에 어떠한 자료형이 들어와도 됨

 

01) 배열 생성

// 생성자 이용
let arr01 = new Array();

// 배열 리터럴 이용
let arr = [4, "hi", true, null, undefined, {}, [], () => {}];

console.log(arr); // (8) [4, "hi", true, null, undefined, Object, Array(0), ƒ ()]

 

02)  index 통해 배열 값 가져오기

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

console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3
console.log(arr[3]); // 4

 

03)  push 이용해서 배열 값 추가하기

• 가장 마지막에만 추가됨
• 어떤 자료형이 들어와도 상관없음

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

console.log(arr.push({ key: "value" }));
console.log(arr); // (6) [1, 2, 3, 4, 5, Object]

 

03)  length 이용해서 배열의 길이 알기

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

console.log(arr.push({ key: "value" }));
console.log(arr.length); // 6

 

 

 

02. for  반복문

• 반복문 : 특정 명령을 반복해서 수행할 수 있도록 도와주는 문법

for (let i = 1; i < 5; i++) {
  // 반복 수행할 명령
  console.log("반복");
}

• 초기식 : 반복의 주체가 되는 변수를 선언 (ex. let i = 1)
• 조건식 : 언제까 반복을 할지 조건을 걸어줌 (ex. i < 5)
• 연산 : 반복이 한번 수행될 때마다 할 연산을 적어줌 (ex. i ++)

 

💡Object.keys(객체) : 객체의 키들을 배열로 반환함

const personKeys = Object.keys(person);
console.log(personKeys); // (3) ["name", "age", "tall"]

 

💡Object.values(객체) : 객체의 값들을 배열로 반환함

const personKeys = Object.values(person);
console.log(personKeys); // (3) ["peazh", 25, 175]

 

💡객체의 value를 배열로 만들기

// 객체의 key를 이용
const curKey = [];
for (let index = 0; index < personKeys.length; index++) {
  curKey.push(person[personKeys[index]]);
}
console.log(curKey); // (3) ["peazh", 25, 175]

// 객체의 value를 이용
const personValues = Object.values(person);
for (let index = 0; index < personValues.length; index++) {
  console.log(personValues[index]);
}
// peazh
// 25
// 175

 

 

 

03. forEach 함수

• 배열의 모든 위치를 순회함

const arr = ["a", "b", "c"];

arr.forEach((elm) => console.log(elm));
// a
// b
// c

• 배열 하나 하나의 요소를 파라미터로 전달을 해주고, 그 요소를 콜백 함수가 실행함
• 정리 : 배열의 각각 요소에 대해서 콜백함수를 실행함

✏️ 기존의 배열을 값을 더해서 새로운 배열로 만들기 (아래의 Map을 이용하면 더 간단하게 할 수 있음)

const arr = ["a", "b", "c"];

let arr01 = [];
arr.forEach((elm) => arr01.push(elm + 2));
// a
// b
// c
console.log(arr01); // (3) ["a2", "b2", "c2"]

 

 

 

04. Map 함수

• 원본 배열의 모든 요소를 순회하면서 어떤 연산을 해서 리턴된 값들만 새로운 배열로 반환할 수 있음

const arr = [1, 2, 3, 4];

let newArr = arr.map((elm) => {
  return elm * 2;
});

console.log(newArr); // (4) [2, 4, 6, 8]

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'