본문 바로가기
Dev/React

[JS] 배열과 배열 메소드

by Ellen571 2024. 7. 5.
반응형

배열도 객체 중 하나이다.

배열을 값의 목록을 생성하는 것으로 []를 사용한다.

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