K-MOOC] HTML부터 웹앱까지 7주차 - 자바스크립트 배열

자바스크립트는 복잡한 개발 환경 세팅 필요 없이 웹브라우저만 있으면 실행 가능한 언어이다.
7주 차에서는 자바스크립트의 기본 문법을 배웠다.

 

크롬 브라우저 개발자 도구에서 콘솔 탭 사용

크롬 브라우저에서 F12 키를 누르면 개발자 도구가 나타난다. 
콘솔 탭에서 자바스크립트 코드를 작성 후 실행할 수 있다.
줄 바꾸기를 하고 싶을 경우 Shift + Enter 를 누르면 되고, 결괏값을 보고 싶을 경우 Enter 키를 입력하면 된다.

크롬 개발자 도구 > 콘솔 탭

 

자바스크립트 배열

배열(array)이란?

변수 하나에 여러 개의 값을 저장할 수 있는 특별한 데이터 형으로 index 값은 0부터 시작한다.

다양한 데이터 형태의 값(영문, 한글, 숫자)을 함께 저장할 수 있다.

 

배열 vs 일반 변수 차이?

일반 변수는 하나의 값만 저장 가능하지만, 배열은 변수 하나에 다수의 값을 저장할 수 있다.

아래는 배열을 선언해 본 예시이다.

선언 방법은 일반 변수와 거의 같고, 정보를 담아주는 영역의 형태만 []로 다르다.

[] 안에 들어간 데이터들은 index값을 가지게 되는데 그 값은 0부터 시작된다.
(예전에 책에서 배열을 접했을 때 좀 헷갈렸던 부분이다.)
아래 student_name 에서는 '지민'의 index는 0, '제이홉' 1, '슈가' 2 가 되겠다.

 

var student_name = ['지민', '제이홉', '슈가']
var students = ['지민', '21900001', 'sugar']

 

 

배열 값 참조

배열이름[n] 의 형태로 배열에 들어있는 값을 참조할 수 있다. 

여기서 n은 배열 요소의 index를 나타낸다.  (0 ~ 배열 크기의 -1까지의 값)

 

var student_name = ['지민', '제이홉', '슈가']
student_name[1] /* index가 1인 배열 값을 참조 */

 

 

콘솔창 실행 결과

 

 

배열 값 수정

배열이름[n] = '수정하고 싶은 요소'를 입력해주면 해당 index를 가진 요소의 값이 변경된다.

 

var students = ['지민', '제이홉', '슈가']
students[0] = '랩몬스터'
console.log(students)

 

위의 코드는 student 배열 값 중 index가 0인 '지민'을 '랩몬스터'로 바꾸겠다는 것이다.

console.log()를 통해 student 배열을 출력해보면 '지민'이 '랩몬스터'로 바뀐 것을 알 수 있다. 

 

콘솔창 실행 결과

 

 

배열 요소 개수 확인

배열 이름. length를 입력하면 배열 안에 들어있는 값이 몇 개인지 개수를 확인할 수 있다.

 

var students = ['지민', '제이홉', '슈가']
students.length

 

콘솔창 실행 결과

 

특정 요소의 인덱스 찾기

배열이름.indexOf(index를 찾고 싶은 요소)의 형태로 특정 요소의 index를 찾을 수 있다.

 

var students = ['지민', '제이홉', '슈가']
var index = students.indexOf('제이홉');
/* students 배열의 요소 중 '제이홉'의 index를 index 변수에 저장 */
console.log(index); /* index 변수에는 제이홉의 index인 1이 저장 됨 */

console.log(students[index]) /* students배열의 index번째에 저장된 값인 '제이홉'을 출력 *

 

 

콘솔창 실행 결과

 

 

특정 요소 삭제

배열이름.splice(삭제할 요소의 index, 삭제할 개수)를 사용해 특정 요소를 삭제할 수 있다.

 

var students = ['지민', '제이홉', '슈가']
students.splice(2,1) /* students 배열의 요소 중 index가 2인 '슈가' 1개만 삭제 */
console.log(students) /* students 배열 요소 출력 */

 

콘솔창 실행 결과

 

 

배열의 마지막에 요소 추가 / 요소 꺼내기(제거)

배열이름.push(추가할 요소)을 사용해 배열의 마지막에 요소를 추가할 수 있다.

 

var navigation = [] /* navigation 이라는 이름을 가진 빈 배열을 생성 */
navigation.push('직진 200M')  
navigation.push('우회전')
navigation.push('직진 50M')

 

콘솔창 실행 결과

 

 

 

배열이름.pop() 을 사용해 배열의 마지막에 있는 요소를 꺼낼(제거할) 수 있다.

 

navigation.pop('직진 200M')  
navigation.push('우회전')
navigation.push('직진 50M')

 

콘솔창 실행 결과

 

 

배열 중 임의의 요소에 접근

Math.random() 함수를 이용하면 0 ~ 1 미만의 랜덤한 숫자를 반환한다.
Math.floor() 어떤 수보다 크지 않은 최대의 정수를 반환한다. 

 

var students = ['지민', '제이홉', '슈가', '랩몬스터', '정국']
students[Math.floor(Math.random() * students.length)]
/* students.length = 총 학생 수 (5명), 0~5 사이의 랜덤한 값을 반환*/
/* Math.floor로 소숫점 이하의 값을 제거하고 0~4 사이의 값을 반환 - index 값과 일치 */

 

students[Math.floor(Math.random() * students.length)] 를 여러 번 실행시켜보면 아래 이미지처럼 매번 랜덤한 학생 이름이 출력된다.

 

콘솔창 실행 결과