[JavaScript] #6 자바스크립트 배열(Array)

이번 글에서는 자바스크립트에서 배열(Array)을 배워보도록 하겠습니다.

배열(Array)이란?

여러 개의 값(원소)을 담는 컨테이너입니다.

배열은 하나의 변수로 여러 개의 값을 관리할 수 있어서 유용하게 사용됩니다.

 

객체(Object)의 일종이며, 인덱스(index)를 사용하여 각 요소(element)에 접근할 수 있습니다.

인덱스는 0부터 시작하며, 배열의 크기는 동적으로 조정될 수 있습니다.

 

배열(Array) 기본 문법

const fruits = ['사과','오렌지','배','포도'];

consoel.log(fruits[0]); // 사과
consoel.log(fruits[1]); // 오렌지

배열은 맨 처음요소 첫번 째가 아니고 0번째이다!

 

배열의 첫번째 요소

Array[0] // 첫번째 요소 선택

배열의 마지막 요소

Array[Array.length - 1];

자리수(index) : 배열의 [숫자]를 하면 그 배열의 숫자 번째를 찾겠다.

const everything = ['사과',1,undefined,true,'배열',null];

배열 안에 값은 제한이 없다.

모든 값을 넣을 수 있다!

 

배열의 길이

배열 요소의 개수 구하는 명렁어

Array.length;

 

문1) 배열 요소에서 마지막에서 3번째 요소 찾기

const arr = [1,2,3,4,5];
arr[arr.length - 3]; // 3

배열 요소 추가

배열 요소 추가

const target = ['a','b','c','d','e'];
target[5] = 'f';
console.log(target) // ['a','b','c','d','e','f'];

배열 요소 추가( 수동적인 방법 )

 

 

const target = ['가','나','다','라','마'];
target[target.length] = '바';
console.log(target) // ['가','나','다','라','마','바'];

배열 첫번째 요소 추가(unshift)

const target = ['나','다','라','마'];
target.unshift('가')
console.log(target) // ['가','나','다','라','마'];

배열 마지막 요소 추가(push)

const target = ['가','나','다','라'];
target.push('마')
console.log(target) // ['가','나','다','라','마'];

하지만 배열 자체를 변환할 수는 없지만 배열열 내부 값을 변환을 할 수가 있다

 

배열의 메서드(수정,조회)

배열 요소 수정

const target = ['가','나','다','라','마'];
target[3] = '카';
console.log(target) // ['가','나','다','','마'];

배열 요소 제거

배열 마지막 요소 수정(pop)

const target = ['가','나','다','라','마'];
target.pop();
console.log(target) // ['가','나','다','라'];

배열 마지막 요소 제거(shift)

const target = ['가','나','다','라','마'];
target.shift();
console.log(target) // ['나','다','라','마'];

배열 중간 요소 제거(splice)

Array.splice('내가 지우고싶은 위치','내가 지우고 싶은 갯수');

예시 문법

const target = ['가','나','다','라','마'];
target.splice(1,1);
console.log(target) // ['가','다','라','마'];

splice를 하나면 쓰면 해당 인덱스부터 끝까지 모든 요소를 제거하겠다라는 의미

const target = ['가','나','다','라','마'];
Array.splice(1);
console.log(target) // ['가'];

 

배열 요소 제거

 

includes();

주어진 값이 배열 내부에 존재하면 true, 존재하지 않으면 false 값이 나온다.

const target = ['가','나','다','라','마'];
const result = target.includes('다'); // true

 

indexOf 와 lastIndexOf

 

검색하고 싶은 값이 몇 번째 인덱스에 위치하는지도 알 수 있습니다.

값이 없으면 -1이라는 값을 출력해준다.

lastIndexOf → array.length - 1 로 계산을 하면 된다.

const target = ['라','나','다','라','다'];
const result = target.indexOf('다'); // 2 (2번째임)
const result2 = target.lastIndexOf('라'); // 3 
const result3 = target.indexOf('가'); // -1 (값이 없어서)

 

배열 반복하기

배열은 값을 나열한 것이기 때문에 반복문을 사용하는 경우도 많다

const target = ['가','나','다','라','마'];

// while문
let i=0;
while (i < target.length) {
	console.log(target[i]);
	i++;
}
// '가','나','다','라','마'

// for문
for(let i=0; i<target.length; i++){
	console.log(target[i]);
}
// '가','나','다','라','마'

배열 요소 순회

'forEach()' 메소드를 사용하여 배열을 순회할 수 있습니다.

let fruits = ['사과', '바나나', '오렌지'];

fruits.forEach(function(fruit) {
  console.log(fruit); // 사과, 바나나, 오렌지
});

 

참고

https://youtu.be/2n-N_wUZq9g?list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt 

 

 

2023.03.31 - [Javascript] - [JavaScript] #5 자바스크립트 반목문 for,while문

[JavaScript] #5 자바스크립트 반목문 for,while문