html,css,js

[자바스크립트 기초] 배열 Array, 배열함수, 배열메서드, for, for of 문

코복이 2023. 5. 2. 15:57
728x90

 

1. 배열 Array

1) 설명

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

- 배열은 [ ] 대괄호로 묶어주고, 쉼표로 구분한다.

  e.g) 우리반 학생은 1번 영희, 2번 철수, 3번 영자 ... 30번 자철. 이걸 배열로 나타내면 

         let student = ['영희','철수','영자' ... '자철'];

- 배열 순서는 첫번째 값이 0, 두번째 값이 1, ... (0부터 시작함) *이것을 index라고 함 index는 0부터 시작

- 배열을 쓰는 가장 큰 이유는 반복을 쓰기 위해서 (for)

 

2) 배열 읽기

- 배열이름[순서] 으로 읽을 수 있음

e.g) console.log(student[0]) //영희

 

3) 배열 수정

- 배열이름[순서] = '변경할 값'

e.g) student[0] = '민정' // 번호 1번이 '영희'에서 '민정'으로 바뀜

 

4) 배열의 특징

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

- 배열 내 함수(메서드)는 배열명[함수의 인덱스]()로 실행

// 배열에는 다양한 것들이 함께 담길 수 있다.
let array = [
    '민수', // String 문자
    3,  // Number 숫자
    true,   //boolean 불린
    {name: '어레이', age: 10},  //object 객체
    function(name){
        return `안녕하세요 ${name}님`;
    }   //function 함수
]
console.log(array[0]);
console.log(array[1]);
console.log(array[2]);
console.log(array[3]);
console.log(array[4]('kim'));
 
민수
3
true
{ name: '어레이', age: 10 }
안녕하세요 kim님

 

2. 배열 함수 (또는 배열 메서드라고도 함)

1) length : 배열이 가진 요소 개수를 반환

- length는 배열의 길이를 구할 수 있다. (index 보다 +1 임)

e.g) student.length // 30개

 

*배열의 가장 끝에서 동작하는 두가지

2) push('값') : 배열 가장 마지막에 요소를 추가

- 한번에 여러 요소를 추가할 수 있음 student.push(고고,가가,김김)

e.g) student.push('선정') // 학생 명부 마지막 번호로 31번 선정이가 들어감

 

3) pop() : 배열 가장 마지막 요소를 삭제 (푸시와 반대)

e.g) student.pop() // 가장 마지막에 추가되었던 31번 선정이 삭제

 

*배열의 가장 앞에서 동작하는 두가지

4) unshift('값') : 배열 가장 앞에 요소를 추가

- 한번에 여러 요소를 추가할 수 있음 student.unshift(고고,가가,김김)

e.g) student.unshift('효정') // 학생 명부 가장 앞 1번으로 효정이가 들어감 (나머지 하나씩 밀림)

 

5) shift() : 배열 가장 앞 요소를 삭제 (unshift와 반대)

e.g) student.shift() // 가장 앞에 추가되었던 1번 효정이 삭제

 

※ 배열 요소 순서를 거꾸로 하고 싶다면?

- arr.reverse() 하면 배열 순서가 거꾸로 됨.

 

*이밖의 필수 배열 함수 리스트

https://jae04099.tistory.com/17

 

 

3. 배열을 이용한 반복문

1) for 를 이용한 반복문

// 배열을 이용한 반복문 for

let days = ['월','화','수'];

days.push('목');

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

 

2)for ... of 를 이용한 반복문

-for(let 값이름 of 배열이름){코드 실행} // 배열을 순서대로 돌며 코드 실행

*여기서의 값이름은 아무거나 써도 되지만, 배열의 값을 대표하는 이름이면 좋을듯. (예시에선 요일이니까 day)

// for ... of 반목문

let days = ['월','화','수'];

days.push('목');

for(let day of days){ // days에 있는 값을 순서대로 끝날때까지 반환
    console.log(day); // 여기서의 day는 for in 반복문처럼 아무 string이나 들어가도 됨 (예약어 제외)
}

 

728x90