이정환님의 한입 크기로 잘라먹는 리액트 강의를 듣고 정리한 글이다.
https://www.udemy.com/course/winterlood-react-basic/
배열
배열(Array)도 비원시 자료형에 해당하는 자료형이다. 순서있는 요소들의 집합이다.
배열은 두 가지 방법으로 만들 수 있다. 첫 번째는 객체 생성자을 이용하는 방법, 두 번째는 배열 리터럴을 이용하는 방법이 있다.
let arr1 = new Array(); // 객체 생성자
let arr2 = []; // 배열 리터럴배열에는 어떠한 자료형을 넣어도 상관이 없다. 콘솔에 출력을 해보면 요소의 갯수와 요소들을 보여준다.
let arr = [1, "2", true, null, undefined, {}, [], function() {}];
console.log(arr) // (8) [1, "2", true, null, undefined, Object, Array(0), ƒ ()]인덱스
인덱스(Index)를 통하면 배열의 각각에 요소에 접근이 가능하다. 배열을 콘솔에 출력해 보았을 때 앞에 있는 요소부터 0번 부터 시작하는 인덱스를 볼 수 있다. 배열의 이름을 적고 괄호안에 인덱스 번호를 넣으면 요소에 접근이 가능하다.
\배열 인덱스.png)
let arr = [1, 2, 3, 4, 5]
console.log(arr);
console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3
console.log(arr[3]); // 4
console.log(arr[4]); // 5배열 자체도 객체로 이루어져 있기 때문에 프로퍼티에 접근이 가능하다. push 메서드를 이용하면 배열의 맨 마지막에 요소를 추가할 수 있고 length 프로퍼티에 접근하면 배열의 길이를 받아올 수 있다.
let arr = [1, 2, 3, 4, 5]
arr.push(6);
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(arr.length); // 6반복문
프로그래밍은 조건과 반복에 의해 완성이 된다라는 말이 있을 정도로 반복문은 정말 중요한 개념이다. 반복문을 통해 매우 효율적인 작업이 가능하다.
Hello World를 100번 출력한다고 했을 때 하나하나 작성하기에는 힘들고 또 나중에 수정하기에도 힘들 것이다. for문을 이용한 반복문을 사용하면 짧고 간단하게 작성이 가능하다.
-
for 문을 이용한 반복문
// (초기식: 반복의 주체, 조건식: 조건을 만족할때 반복하도록 해주는 조건문, 연산식 : 반복이 수행될 때마다 수행할 연산) for (let i = 0; i < 100; i++) { // 반복 수행할 명령 console.log("Hello World"); }
-
배열에 반복문을 적용해 순회
const arr = ["a", "b", "c"]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
-
객체에 반복문을 적용해 순회
let person = { name: "홍길동", age: 25, tall: 180 } const personKeys = Object.keys(person); console.log(peorsonKeys); // ["name", "age", "tall"] for(let i = 0; i < personKeys.length; i++) { const curKey = personKeys[i]; const curValue = person[curKey]; console.log(`${curKey} : ${curValue}`); } const personValues = Object.values(person); for(let i = 0; i < personValues.length; i++) { console.log(personValues[i]); }
배열 내장 함수
배열은 많은 내장 함수를 가지고 있다. 이를 잘 이용하면 if문이나 for문 의존성을 줄여 유연하고 깔끔하고 짧은 코드를 작성이 가능하다.
forEach
배열을 순회할 수 있는 배열 내장 함수이다. 인자로 주어진 콜백함수가 각 요소를 순회하며 실행된다.
const arr = [1, 2, 3, 4];
arr.forEach((elm) => console.log(elm));map
map 메서드는 각각의 요소에 대해 주어진 콜백 함수를 실행한 결과를 모아 새로운 배열을 반환한다. 주어진 배열에 모든 요소에 X2를 해서 새로운 배열을 만드는 코드를 forEach 메서드를 사용했을 때 보다 더 간결하게 작성이 가능하다.
-
forEachconst arr = [1, 2, 3, 4]; const newArr = []; arr.forEach((elm) => { newArr.push(elm * 2); }); console.log(newArr); // [2, 4, 6, 8]
-
mapconst arr = [1, 2, 3, 4]; const newArr = arr.map((elm) => return elm * 2) console.log(newArr); // [2, 4, 6, 8]
includes
includes 메서드는 특정 요소를 포함하고 있는지 판별한다.
const arr = [1, 2, 3, 4];
let number = 3;
console.log(arr.includes(number)); // trueindexOf
find 메서드는 일치하는 요소의 첫 번째 인덱스를 반환한다. 만약 요소를 포함하고 있지 않으면 -1을 반환한다.
const arr [1, 2, 3, 4];
let number = 5;
let number2 = 1;
console.log(arr.indexOf(number)); // -1
console.log(arr.indexOf(number2)); // 0findIndex
findIndex 메서드는 주어진 콜백 함수를 만족하는 요소의 첫 번째 인덱스를 반환한다. 만족하는 요소가 없다면 -1을 반환한다.
const arr = [
{color: "red"},
{color: "black"},
{color: "blue"},
{color: "green"}
]
console.log(arr.findIndex((elm) => elm.color === "gren")); // 3find
find 메서드는 주어진 콜백 함수를 만족하는 첫 번째 요소를 반환한다. 만족하는 요소가 없다면 undefined를 반환한다.
const arr = [
{color: "red"},
{color: "black"},
{color: "blue"},
{color: "green"}
]
const element = arr.find((elm) => elm.color === "blue");
console.log(element); // {color: "blue"}filter
filter 메서드는 주어진 콜백 함수를 만족하는 모든 요소를 모아 새로운 배열로 반환한다.
const arr = [
{num: 1, color: "red"},
{num: 2, color: "black"},
{num: 3, color: "blue"},
{num: 4, color: "green"},
{num: 5, color: "blue"}
]
console.log(arr.filter((elm) => elm.color === "blue")); // [{num: 2, color: "blue"}, {num: 5, color: "blue"}]slice
slice 메서드는 begin(시작 인덱스)부터 end(종료 인덱스)까지(end 미포함) 값을 복사하여 반환한다.
const arr = [
{num: 1, color: "red"},
{num: 2, color: "black"},
{num: 3, color: "blue"},
{num: 4, color: "green"},
{num: 5, color: "blue"}
]
console.log(arr.slice(0, 2)); // [{num: 1, color: "red"},{num: 2, color: "black"}]concat
concat 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새로운 배열을 반환한다.
const ar1r = [
{num: 1, color: "red"},
{num: 2, color: "black"},
{num: 3, color: "blue"},
]
const arr2 = [
{num: 4, color: "green"},
{num: 5, color: "blue"}
]
console.log(arr1.concat(arr2)); // [{num: 1, color: "red"}, {num: 2, color: "black"}, {num: 3, color: "blue"}, {num: 4, color: "green"}, {num: 5, color: "blue"}]sort
sort 메서드는 원본 배열을 순서를 정렬해준다. 문자열을 기준으로 사전순으로 정렬을 하게 된다. 정렬 함수를 넣으면 숫자를 정렬할 수 있다.
let chars = ["나", "다", "가"];
chars.sort();
console.log(chars); // ["가", "나", "다"]
let numbers = [0, 1, 3, 2, 10, 30, 20];
numbers.sort();
console.log(numbers); // [0, 1, 10, 2, 20, 3, 30]
const compare = (a, b) => {
if (a > b) {
// 클 경우
return 1
}
if (a < b) {
// 작은 경우
return -1
}
// 같을 경우
return 0
}
numbers.sort(compare);
console.log(numbers); //[0, 1, 2, 3, 10, 20, 30]a와 b를 전달 받았을 때 a가 b보다 클 때 1을 반환한다는 것은 a가 뒤로 가야 한다는 것이고, a가 b보다 작을 때 -1을 반환한다는 것은 a가 앞으로 간다는 의미이다. 만약 내림차순을 원한다면 값을 반대로 반환하면 가능하다.
join
join 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 반환해준다. 인수로 구분자를 넣어준다.
const arr = ["홍길동", "님", "안녕하세요", "또 오셨군요"]
console.log(arr.join())