JavaScript 기초 : 배열 1. 배열

1. 배열(Array)

 

배열이란 무엇일까?

 

배열은 

객체 처럼 사용하는데

프로퍼티 네임 없이 프로퍼티 값만 쓴다고 생각하면 된다. 

 

배열 안에 있는 값들은 '요소(element)'라고 부른다.

 

객체와는 다르게 단순히 여러 값들을 쉼표로 구분해서 대괄호로 담고 있다.

 

하지만 type of 연산자로 배열을 확인해보면!!!

배열도 객체이다.

 

즉 배열도 객체의 한 종류인 것이다~! 

 

그럼 배열을 표현해보자! 

//배열(Array)
let snuecourse = [
  '교육용프앱개발',
  '최신정보기기세미나',
  '이러닝연구세미나',
  ];
  

대괄호 안에 각 요소별로 순서가 매겨진다.

순서는 index라고 한다. 

 

index가 객체의 프로퍼티 네임 역할을 한다. 

 

indexing

인덱스를 통해 배열의 요소에 접근하는 방법을

indexing이라고 부른다. 

index는 1부터 시작하는 것이 아니라

0부터 시작한다!!!

 

배열의 요소를 보고 싶다면 대괄호 표기법을 사용하면 된다. 

아래의 예시를 보자! 

//배열(Array)
let snuecourse = [
  '교육용프앱개발',
  '최신정보기기세미나',
  '이러닝연구세미나',
  ];
  
//indexing(0부터 시작)
console.log(snuecourse[1]);
console.log(snuecourse[1 + 1]);

snuecourse라는 변수에

3가지 요소들이 들어있다. 

 

여기서 3가지 요소는

0, 1, 2번의 인덱스 번호를 차례로 갖게 된다. 

 

그럼 어떤 값이 출력될까?

 

최신정보기기세미나

이러닝연구세미나

이렇게 출력이 될 것이다. 

 

하지만

아직 어려우니

예시를 살펴보자!

 

dataType이라는 배열을 만들고

그 안에 데이터 타입 요소들을 적어준다.이 요소들을 출력시켜보자. 

//for반복문으로 배열 안의 요소를 출력하기 
let dataType = ['Number', 'String', 'Boolean', 'null', 'undefined', 'object'];

for (let i = 0; i < 6; i++) {
  console.log(dataType[i]);
}

//while반복문으로 배열 안의 요소를 출력하기
let dataType = ['Number', 'String', 'Boolean', 'null', 'undefined', 'object'];

let i = 0;
while (i < 6) {
  console.log(dataType[i]);
  i++;
}

 

위의 두 코드는 배열 안에 있는 요소를 콘솔에 출력하는 코드로

for 문과 while 문으로 나타내보았다. 

결과는 어떻게 나올까?

 

number

string

boolean

null

undefined

object

 

이렇게 출력된다!!

 

배열은

index 즉 순서가 매겨지기 때문에 아주 유용하게 사용된다.

그럼 구체적으로 주로 언제 사용할까?

 

1) 순위를 매기는 것(랭킹) 2) 순서가 있는 여러 것들의 묶음(지하철 노선, 해리포터 시리즈, 십이지, 십간 등...) 3) 여러 값의 묶음(음식점 메뉴 등)

또한 단순히 여러 값의 묶음이 필요할 때도 배열을 사용하면 된다. 

 

 

 

1-1. 배열 다루는 방법

 

무한도전 멤버들을 모아둔 members 배열이 있다. 먼저 members 배열의 타입을 확인해보자!결과는??? 객체이다. 즉, 배열도 객체라는 것을 알 수 있다. 

 

또한 배열도 이미 내장된 프로퍼티가 있다. 예를 들어 members.length 같은 것이다. 

 

length는 배열 안에 몇 개의 요소가 있는지 쉽게 파악할 수 있게 도와준다. 

//무한도전 멤버 배열로 나타내고 콘솔에 출력하기 

let members = ['유재석', '박명수', '정준하', '정형돈', '하하', '노홍철'];

console.log(typeof members);

console.log(members.length); //배열 안의 요소 개수
console.log(members['length']); //프로퍼티기 때문에 대괄호 표기법으로도 가능
console.log(members['length'] - 1); //배열 안 마지막 요소의 index 번호 
console.log(members[members.length -1]); //멤버스의 마지막 요소 값 불러오기

 

배열 안의 요소가 몇 개 있는지 

점 표기법으로 확인이 가능하다.

 

또한 위의 예시처럼 대괄호 표기법으로도 확인이 가능하다.

요소의 인덱스가 0부터 시작하니까 

배열의 마지막 요소를 알고 싶다면

members['lentgth']-1을 해주면 마지막 인덱스 번호 5가 출력되고

members[members.lenth -1] 를 해주면 members의 마지막 요소(index5)의 값인 노홍철이 출력된다.

 

 

 

좀 더 심화된

예시를 살펴보자!

 

★섭씨 온도에서 화씨온도로 바꾸기!

//for반복문 이용
let celsiusTemps = [20, 25, 36, 28, 38, 27, 21];
let fahrenheitTemps = []

for (let i = 0; i < celsiusTemps.length; i++) {
  fahrenheitTemps[i] = (celsiusTemps[i] * 9 / 5) + 32
}

// fahrenheitTemps 출력
console.log(fahrenheitTemps);


//while반복문 이용
let celsiusTemps = [20, 25, 36, 28, 38, 27, 21];
let fahrenheitTemps = []

let i = 0;
while (i < celsiusTemps.length) {
  fahrenheitTemps[i] = (celsiusTemps[i] * 9 / 5) + 32
  i++;
}

// fahrenheitTemps 출력
console.log(fahrenheitTemps);

for와 while 다 잘 작동한다.

위의 예시에서는 for반복문과 while반복문을 사용하였는데

for in을 사용하는 사람들이 for in을 써도 되는지 질문을 하였다. 

 

codeit 강의 답변에서는 

"특별한 환경에서는

배열의 메서드나 배열의 length Property같은게 할당되는 경우가 있어

사용하지 말 것을 권장합니다."

라는 답변이 달렸다. 

 

자세한 것은 다음 글에서 정리해봐야겠다. 

 

 

 

1-2. 배열 요소 추가, 수정, 삭제 방법

 

배열의 요소를 추가, 수정, 삭제해보자!!

 

let members = ['유재석', '박명수', '정준하', '정형돈', '하하', '노홍철'];

//요소 추가 
members[6] = '광희';
console.log(members[6]);

//요소 추가 잘못 한 경우
members[8] = '전진';
console.log(members); //index8 값에 저장이 되어서 index7은 비어 있게 된다. 

//요소 수정
members[2] = '조윤주'
console.log(members[2]);

//요소 삭제
delete members[4];
console.log(members); //완벽히 삭제가 안된다. 

일단 요소를 추가했더니 

광희

가 콘솔에 나타났다.

 

요소 추가를 잘못한 경우는 맨 끝 다음 인덱스에 추가해야하는데 +1 인덱스에 추가한 경우다.

이 경우 index8에 전진이 출력되었지만

index7에 empty값이 출력되었다.

 

또한 요소 삭제의 경우도

index4의 하하가 삭제는 되었지만

empty라고 뜨고 

진정한 삭제는 되지 않았다. 

 

그럼 배열의 값을 삭제하고 index도 삭제한대로 줄어들게 하려면 어떤 방법을 사용하면 좋을까?

 

바로 splice매소드를 사용하면 된다!!

 

이 부분은 다음 글에서 배열 심화로 정리해보자!