예비 개발자

const fifthStudyLog = ["배열(array)", "for문"];

자료구조 중 하나인 배열은 여러개의 값이 나열되어 있고 , 그 안 하나하나의 요소(element)가 인덱스를 가진다. 배열은 다양한 값들을 하나로 줄 세워 놓을 수 있고 인덱스를 통해서 원하는 요소에 접근할 수 있다는 점에서 매우 유용하다.

배열은 반복문과 함께 자주 사용된다. 배열의 어떠한 특징때문에 반복문으로 접근하기가 쉽기 때문이다. 그 이후는 서서히 알아가보자!

늘 그렇듯, 많은 내용은 <모던 자바스크립트 Deep Dive>를 참고하여서 정리, 작성하였다.

1. 요소(element), 인덱스(index)

const arr = [0, 1, 2, 3, 4];

배열은 대괄호 안에 요소들을 담는다. 요소란 배열 안의 각각 하나의 값을 지칭하는 용어이다. 위에서 언급 했다시피, 배열은 인덱스를 통해서 원하는 요소에 접근할 수 있다.

인덱스는 쉽게 말해서 자리 순서를 말한다. 사람 시점에서 보면 ‘0’이라는 요소는 첫번째 자리이지만 컴퓨터에서는 순서를 셀 때 0부터 시작한다. 즉, 요소 ‘0’의 인덱스는 0이다. 인덱스를 통해 접근하고 싶을 때는 대괄호를 사용한다.

arr[0]; // 0
arr[1]; // 1
arr[2]; // 2

요소와 인덱스 모두 숫자라서 조금 헷갈릴 수도 있으니 아래의 경우를 보자.

const fruit = ["apple", "orange", "pineapple"];

fruit[0]; // 'apple'
fruit[2]; //  'orange'

이 경우 0번째 인덱스는 ‘apple’이다. 마지막 인덱스는 2이다. 마지막 인덱스가 총 길이의 -1를 한 값임을 기억하자. 반복문에서 잘 사용하기 때문이다.

1-1. length 프로퍼티와 for문

for문은 자주 사용하는 반복문 중 하나로, 어느 프로그래밍 언어를 선택하여 학습해도 필수적으로 배우는 문법이다. 언어마다 표현법은 조금씩 다르지만, 작동하는 방식은 같다.

우리가 배우는 Javascript의 문법을 기준으로 살펴보도록 하자.

for (let i = 0; i < 10; i++) {
  console.log("for문 실행!");
}

for문은 for 다음으로 소괄호를 사용하여 변수선언, 조건문, 증감문을 모두 담아준다. 각 문의 구분은 세미콜론(;)으로 표기한다. 어떻게 생겼는지 알겠으니, 그 의미를 살펴보자.

for문은 반복문인 만큼 어떤 동작을 반복하여 실행한다. 그렇다고 무한하게 반복해서는 코드가 끝나지 않을 것이다.(실제로 조건을 잘못 지정하면 무한 루프에 빠지게 되어 에러가 발생한다.) 그렇기 때문에 횟수를 정해주게 되는데, 그게 바로 조건문이다.

위의 코드에서 보면 우리는 변수 i를 선언했다. i의 초기값은 0으로 할당했다. 그리고 조건문에서 i가 10미만일 경우에만 실행되도록 했다. 마지막 증감문에서는 for문 블록의 코드가 1번 실행된후 i값에 1을 더하라고 말해주었다. 이를 더 쉽게 보기 위해서는 i를 참조해보는 것이 좋지 않겠는가?

for (let i = 0; i < 10; i++) {
  console.log(i);
}

// 0 ~ 9

위에서 보다시피 i가 0부터 시작되어서 i에 한번 씩 1을 더해서 10미만이 될 때까지 반복해서 실행한다. 그렇다고 꼭 i에 1씩 더해야하는 것은 아니다.

for (let i = 0; i < 10; i += 2) {
  console.log(i);
}
//0,2,4,6,8

이처럼 내가 원하는 조건에 맞춰서 변수 선언부터, 증감문까지 변경하면 된다. 자, 그럼 이제 for문을 간단하게 살펴보았으니 for문과 배열의 시너지가 좋은 이유를 살펴볼 수 있다.

for문을 보면 알다시피 천천히 증가하는(조건에 따라서는 감소하는) 숫자를 이용하여 조건을 정해주지 않는가? 왠지 이 조건을 이용하면 숫자 순서에 접근할 수 있을 것 같지 않나..?

맞다! 인덱스는 차근히 1씩 증가하는 숫자를 가졌다. 위의 코드에서 살펴보자.

const fruit = ["apple", "orange", "pineapple"];

이 배열 안의 요소들을 하나씩 참조할 것이다. 물론 이 예시에서는 몇가지 되지 않으니 3번만 console.log를 치면된다. 그러나 요소들이 100개가 넘어가면 일일히 치는 것은 정말정말 효율적이지 않다.

이럴 때 for문을 사용하는 것이다.

const fruit = ['apple', 'orange', 'pineapple'];
//요소의 개수는 3개, 마지막 인덱스는 2

****for(let i = 0; i < 3; i++){
	console.log(fruit[i])
}

//"apple" "orange" "pineapple"

정말 쉽고 간편해지지 않는가?

한발자국 더 나아가면 더 간단해질 수 있다.

만약에 요소가 너무 많아서 개수를 셀수가 없는 경우는 어떡할 것인가? 그럴 때 사용하는 것이 (length)이다. length는 단어그대로 길이를 알려준다. 배열의 길이는 물론 문자열의 길이를 구할 때도 이 프로퍼티를 사용한다. 이제 코드는 더 간단해 진다.

참고