[JavaScript] 자바스크립트 - 배열

 

---

 

1. 배열

 

■ 배열의 기초

 

배열은 여러 데이터를 하나의 묶음으로 다루는 구조를 말합니다. 배열을 생성할 때는 여러 방법이 있습니다.

// 1.
let numList = [];

// 2.
let numList2 = new Array(5);

// 3.
let numList3 = new Array(1,2,3);

JavaScript에서 배열은 가변적이므로 처음 생성할 때부터 배열의 길이를 정해줄 필요가 없습니다. 그렇기 때문에 1번처럼 배열에 아무 값도 담지 않고 생성을 한 후 나중에 값을 추가할 수 있습니다.

2번 같은 경우는 데이터 값은 정해지지 않았지만 길이는 5인 배열을 선언한 것입니다. 마찬가지로 이후에 데이터 5개를 넣어 생성할 때 길이에 맞추어도 되고 3개만 넣어도, 6개를 넣어도 상관없습니다.

3번은 처음부터 배열에 데이터 값을 넣어 생성하는 방법입니다.

배열에 있는 데이터값을 불러오기 위해서는 인덱스를 사용합니다. 자바, 파이썬 등과 같이 인덱스 번호는 0부터 시작합니다. 그렇기 때문에 numList3 배열에서 데이터 값 2를 불러오기 위해서는 1번 인덱스를 불러와야 합니다.

배열의 길이를 확인할때는 .length를 사용합니다.

배열명.length

 

위에서 설명한 대로 실제로 실행되는지 확인해 보겠습니다.

// 배열 생성
let numList = [];
console.log('numList에 담긴 값 : ',numList)

// 배열에 데이터 담기
numList = [1,2,3,4,5,6,7,8,9,10];
console.log('numList에 담긴 값 : ',numList)

// 배열에서 4 불러오기
console.log('배열의 3번 인덱스 값 : ',numList[3])

// 배열의 길이 확인
console.log('배열의 길이 : ',numList.length)

 

또 JavaScript의 배열에는 다양한 자료형의 데이터 값을 담을 수 있습니다. 하나의 자료형만으로 이루어진 Java의 배열과는 차이점이 있습니다. python처럼 배열에 배열을 담는 것도 가능합니다.

let arrayList =[];
arrayList[0]= 1;
arrayList[1]= '가나다라';
arrayList[2]= true;
arrayList[3]= [1,2,3];
console.log(arrayList);

 

 

■ 배열-반복문

 

배열에 저장된 데이터를 반복문으로 출력할 수 있습니다.

 

1) 일반 for문

let nameList = ['✨핵심팀장✨김군순', '이대섭', '김한주', '서희주']
for(let i = 0; i<nameList.length;i++){
    console.log(nameList[i]);
}

일반 for문에서는 배열의 길이를 알 수 있는 .length와 인덱싱을 활용해 배열의 데이터를 출력할 수 있습니다. i가 0부터 '길이-1'까지 증가하므로 인덱싱을 반복할 때 인덱스 값에 i를 넣어주면 됩니다.

 

 

2) for-of문

let sojuList = ['진로','잎새주','참이슬']
for(let i of sojuList){
    console.log(i);
}

for-of 문에서는 인덱싱이 필요하지 않습니다. i를 배열의 데이터에 바로 대입하므로 아래와 같이 됩니다.

---

1번 실행 : i = sojuList[0]

2번 실행 : i = sojuList[1]

3번 실행 : i = sojuList[2]

---

그렇기 때문에 일반 for문과는 다르게 i만 반복적으로 출력하면 됩니다.

 

 

3) forEach문

forEach문의 문법은 아래와 같습니다.

리스트명.forEach((데이터 값, 인덱스)=>{ 뽑아온 값으로 실핼할 문장 })

배열의 길이만큼 실행하기 때문에 인덱스는 생략해도 됩니다. 

let coffeeList = ['아메리카노', '카페라떼','소주(순이)']
coffeeList.forEach((element, index)=>{
    console.log(index, element,);
})

현재 데이터값은 element, 인덱스는 index에 담고 있는데 변수명은 본인이 알아볼 수만 있으면 어떤 이름으로 해도 상관없습니다. 단 처음 소괄호 안에서 뽑아올 때 데이터값, 인덱스 순서인 것은 지켜야 합니다. 인덱스는 생략이 가능하므로 변수명을 하나만 적는다면 데이터값만 뽑아옵니다.

 

 

■ 배열-추가, 수정, 삭제 함수

 

1) 마지막 인덱스에 데이터 추가/삭제

마지막 인덱스에 데이터를 추가하는 함수는 push(데이터값), 삭제하는 함수는 pop(데이터값)입니다.

let soonsTeam = ['군순', '대섭', '한주', '희주']
console.log('순이네',soonsTeam);

// 1. 마지막 인덱스 데이터 추가 : push(value);
soonsTeam.push('훈종')
console.log('훈종 추가',soonsTeam);

// 2. 마지막 인덱스 데이터 삭제 : pop(value);
soonsTeam.pop()
console.log('훈종 퇴출',soonsTeam);

 

 

2) 첫 번째 인덱스에 데이터 추가/삭제

첫 번째 인덱스에 데이터 추가하는 함수는 unshift(데이터값), 삭제하는 함수는 shift(데이터값)입니다.

// 3. 첫번째 인덱스 데이터 추가 : unshift(value);
soonsTeam.unshift('천재 윤석')
console.log('팀장 교체',soonsTeam);

// 4. 첫번째 인덱스 데이터 삭제 : shift(value);
soonsTeam.shift()
console.log('팀장 복구',soonsTeam);

 

 

3) 원하는 위치에 데이터 추가 또는 삭제

원하는 위치에 데이터를 추가하거나 삭제할 때는 splice()를 사용합니다. 문법은 다음과 같습니다.

splice(start, deleteCount, items)

start에서 추가/삭제를 시작할 인덱스를 선택하고 deleteCount에는 삭제할 데이터의 개수를 item은 데이터 값을 입력합니다.

splice(1,0, '1','2')

이렇게 작성한다면 1번 인덱스에 '1', '2'를 추가하겠다는 뜻입니다.

splice(1,2)

다시 이렇게 작성하면 1번 인덱스부터 2개를 삭제하므로 위에서 추가한 '1', '2'가 삭제됩니다.

// 5-1. 추가
soonsTeam.splice(1,0,'수완','광민','윤','동민')
console.log('팀 흡수',soonsTeam);
// 5-2. 삭제
soonsTeam.splice(0,1);
console.log('팀 반란',soonsTeam);
// 5-3. 추가+삭제
soonsTeam.splice(0,1,'천재 윤석','다희','창용','준영');
console.log('최종',soonsTeam);

위에서 실행했던 코드를 정리하면 이렇습니다.