반응형
배열도 객체 중 하나이다.
배열을 값의 목록을 생성하는 것으로 []를 사용한다.
const hobbies = ["sports","cooking","reading"];
console.log(hobbies[0]);
- 객체는 키-값 쌍으로 값 그룹을 묶지만, 배열을 값만을 순서대로 저장하며 목록의 위치에 따라 값을 액세스할 수 있다.
- 배열을 저장하는 변수 또는 상수 이름 뒤에 [] 대괄호를 사용해 배열의 값에 접근한다.
- [] 대괄호에 출력하고자 하는 원소의 인덱스를 넣으면 된다.
- 인덱스는 0부터 시작한다.
- 배열은 모든 유형의 값을 저장할 수 있다. 객체, 숫자, 문자열 등
배열에 저장된 값을 변환하거나 읽는데 사용할 수 있는 다양한 내장 메소드가 존재한다.
push()
원소를 추가할 수 있다.
const hobbies = ["sports","cooking","reading"];
hobbies.push("games");
console.log(hobbies);
findIndex()
특정 값의 인덱스를 찾을 수 있다.
const hobbies = ["sports","cooking","reading"];
const index1 = hobbies.findIndex((item)=>{
return item === 'sports'
});
const index2 = hobbies.findIndex((item) => item === 'sports')
console.log(index1);
- findIndex()는 함수를 입력받는다.
- 이 함수는 하나의 매개변수를 입력받아야 한다.
- 이유는 findIndex는 내부적으로 findIndex에 전달된 함수를 실행해 이 입력 매개변수에 대한 값을 자동으로 제공하기 때문이다.
- 원소를 찾은 경우 true를 반환하고 아닌 경우 false를 반환한다.
- true를 반환하면 해당 원소의 인덱스를 가져온다.
- 무언가를 반환하기만 하는 화살표 함수는 {}와 return, ;을 없애고 더 간결하게 작성될 수 있다.
map()
배열의 모든 원소를 다른 원소로 변환할 수 있다.
const hobbies = ["sports","cooking","reading"];
const editedHobbies = hobbies.map((item) => item + '!')
console.log(editedHobbies);
const objectHobbies = hobbies.map((item) => ({text: item}))
console.log(objectHobbies);
- map()는 함수를 입력받는다.
- 매개변수로 모든 원소를 입력값으로 받는다.
- 함수 실행될 때 입력값으로 배열의 모든 원소가 전달된다.
- 전달된 원소가 변환되면 변환된 원소를 반환한다.
- 어떠한 유형의 원소든 다른 유형의 원소로 변환할 수 있다.
- 객체로 변환할 때는 ({}) 소괄호로 감싸야한다. 그렇지 않으면 함수 본문을 감싸는 중괄호로 취급된다.
- {} 중괄호는 화살표 함수의 함수 본문을 정의하는 것이 아니라 반환하는 새 객체를 정의하는 역할을 한다.
반응형
'Dev > React' 카테고리의 다른 글
[JS] 스프레드 연산자(...) (0) | 2024.07.05 |
---|---|
[JS] 배열 및 객체의 분해(디스트럭처링) (0) | 2024.07.05 |
[JS] 객체와 클래스 (0) | 2024.07.05 |
[JS] 화살표 함수 (0) | 2024.07.04 |
[JS] import 와 export 사용하는 방법 (0) | 2024.06.19 |