[Javascript] 16. 배열 Array

Eden·2022년 7월 29일

Javascript

목록 보기

16/33

한 반에 학생이 30명 있다. 이 학생들을 관리하기 위해 번호를 사용하죠
일일이 이름을 기억하지않아도 번호만 있으면 번호를 불러서 발표를 시키거나 청소를 시킬 수 있죠.
한 명 한 명 모두 변수로 만들면 어떨까요?
완전 복잡하겠죠.. 일일이 변수명을 기억해야하고 순서도 일정하지 않으니까요.. 아마 몇 명인지 파악하는 것도 쉽지 않을 거예요. 이럴 때 우리는 배열(Array)을 사용할 수 있다.

배열 Array

배열은 순서가 있는 리스트다.

1번에 유빈,
2번에 이든,
.
.
.
30번에 현아

이것을 코드로 표현하면 이렇게 할 수 있다.

let students = ['유빈', '이든', ... '현아']

students 배열을 만들고 순서대로 학생들의 이름을 넣어주었다.
배열은 []로 묶어주고 ,로 구분해서 만들 수 있다.

               //   0,     1, ...    29
let students = ['유빈', '이든', ... '현아']

배열을 탐색할 때에는 고유번호를 사용한다.

이를 index라고 한다. index는 0부터 시작한다. 이 예제에서는 0부터 29까지 index가 있다.

<script>
//index
               //  0,     1, ...   29
let students = ['유빈', '이든', ... '현아']

console.log(students[0]); //유빈
console.log(students[1]); //이든
console.log(students[29]); //현아

//수정
students[0] = '성우';
console.log(students)//['성우', '이든',...]
</script>

배열의 특징

배열은 문자형 뿐만 아니라 숫자, 객체, 함수 등도 포함할 수 있다.

<script>
let arr = [
	'이든',                     //문자
    2,                         //숫자
    true,                      //boolean
    {                          //객체
    	name : 'Eden',
        age : 20,
    }
    function() {               //함수
    	console.log('MBTI')
    }
]
</script>

배열의 method

length

배열의 길이를 구할 수 있다.
그 배열이 가지고 있는 요소의 개수를 반환한다.

<script>
students.length//30
</script>

push()

배열 제일 뒤에 추가를 해주는 method다.

<script>
let days = ['월','화','수'];

days.push('목')
console.log(days)//['월','화','수','목']
</script>

한 번에 여러 요소를 추가할 수도 있다.

pop()

배열 끝에 요소를 제거하는 method다.

<script>
let days = ['월','화','수'];

days.pop()
console.log(days)//['월','화']
</script>

shift(), unshift()

배열 제일 앞에서 동작한다.

<script>
let days = ['월','화','수'];
//추가
days.unshift('일');
console.log(days)//['일','월','화','수'];

//삭제
days.shift();
console.log(days)//['월','화','수'];
</script>

unshift()는 한 번에 여러 요소들을 추가할 수 있다.

반복문 for

배열을 사용하는 가장 큰 이유 중 하나는 반복을 위해서다.
length를 통해 배열의 길이를 알고 있으므로 for문을 사용할 수 있겠지요?

<script>
let days = ['월','화','수'];

for (let index = 0; index < days.length; index++) {
	console.log(days[index])
}
</script>

index는 0부터 시작하게 하고, 배열 첫 요소인 index가 0이니까.
index가 배열의 length 즉, 3보다 작으면 코드를 실행하고
index를 1증가 시키게 합니다.

[index]는 0에서 2까지 반복하게 된다.

반복문 for ... of

<script>
let days = ['월','화','수'];

for (let day of days){
	console.log(day)
}
</script>

배열 days를 돌면서 요소 'day'라는 이름으로 접근할 수 있다. for문 보다는 간단하지만 index를 못 얻는다는 단점이 있다.

예제

<script>
let days = ['mon','tue','wed'];

console.log(days[1]);//tue
</script>

<script>
//index를 이용해 수정
let days = ['mon','tue','wed'];

days[1] = '화요일'

console.log(days);//['mon','화요일','wed']
</script>

<script>
//배열의 길이 구하기
let days = ['mon','tue','wed'];

console.log(days.length);//3
</script>

<script>
//배열의 제일 뒤에 'thu' 추가하기, //배열의 제일 앞에 'sun' 추가하기
let days = ['mon','tue','wed'];

days.push('thu');
days.unshift('sun');
console.log(days);//['sun','mon','tue','wed','thu']
</script>

<script>
//for문 이용해서 반복하기
let days = ['mon','tue','wed'];

days.push('thu');
days.unshift('sun');

for(let index = 0; index < days.length; index++){
	console.log(days[index]);
}
//"sun"
"mon"
"tue"
"wed"
"thu"
</script>

<script>
//for of문 이용해서 반복하기
let days = ['mon','tue','wed'];

days.push('thu');
days.unshift('sun');

for(let day of days){
	console.log(days[index]);
}
//"sun"
"mon"
"tue"
"wed"
"thu"
</script>