[6일차] Do it! 자바스크립트 입문 / 07 배열을 쉽게 다루자! Array 객체

---

< 07-1 Array 객체란? >

- Array :  배열

  * 내장 객체로 만들어져 있음

// 빈 괄호를 사용하면 배열 요소의 개수가 고정되지 않기에
// 얼마든지 많은 자료를 저장할 수 있음!

var myArray = new Array();	// Array 객체의 인스턴스를 만듦


// 초깃값이 있는 배열
var numbers = ["one", "two", "three"];	// 리터럴을 사용한 배열
var numbers = new Array("one", "two", "three");	// Array 객체를 사용한 배열

 

 

- 배열에서 for문 사용하기

  * 인덱스는 0부터 시작한다는 걸 꼭 기억하기!

배열 생성 후 값 담기

for문으로 출력

 

 

 

 

 

< 07-2 Array 객체의 함수 알아보기 >

- 배열과 관련된 함수를 사용할 때는 함수의 반환 값이 무엇인지,

  기존 배열은 그대로 유지되는지, 아니면 추가하거나 삭제한 요소 때문에

  기존 배열이 바뀌는지를 이해하고 있어야 함

 

- concat() : 기존의 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수

   

- 배열 순서를 바꾸면 연결 순서도 달라짐 (chars + nums 순서)

 

- concat()은 합친 후 새로운 배열을 만들기 때문에 기존의 배열들에 영향을 주지 않음

 

 

- join() : 배열 요소를 연결하는 함수

  * 배열 요소를 연결해서 나열할 때 각 요소 사이에 넣을 구분 기호가 필요한데

    join()은 이 기호를 직접 지정할 수 있음

 

 

 

 

[ 새로운 요소를 추가하는 push()와 unshift() ]

- push() : 배열의 맨 끝에 새로운 요소를 추가하는 함수

              * 새 요소가 추가된 후의 배열 요소의 개수가 반환됨

              * concat(), join()과 다르게 원래 배열이 바뀜

push() 처리 방식

 

 

- unshift() : 배열의 맨 앞에 새로운 요소를 추가하는 함수

                * 새 요소가 추가된 후의 배열 요소의 개수가 반환됨

unshift() 처리 방식

 

 

 

[ 배열에서 요소를 추출(삭제)하는 pop()과 shift() ]

- pop() : 맨 뒤에 있는 요소를 추출(삭제)할 때

 

- shift() : 맨 앞에 있는 요소를 추출(삭제)할 때

 

 

 

 

 

[ 원하는 위치의 요소를 삭제하거나 추가하는 splice() ]

- splice() : 배열의 중간 부분에 요소를 추가하거나 삭제할 때 사용

             : 한꺼번에 2개 이상의 요소를 추가하거나 삭제할 때도 사용

 

- 인수가 1개일 때

  * 괄호 안의 인수는 그 배열의 인덱스 값을 가리킴

    이 때 인수가 가리키는 인덱스의 요소 ~ 배열의 끝 요소까지 삭제함

 

 

 

 

- 인수가 2개 일 때

  * 첫번째 인수 : 인덱스 값

    두번째 인수 :  삭제할 개수

 

 

 

- 인수가 3개 이상일 때

  * 첫번째 인수 : 인덱스 값

    두번째 인수 :  삭제할 개수

    세번째 인수 : 앞서 삭제한 위치에 새로 추가할 요소를 지정

 

  * 기존 배열의 요소를 삭제하지 않고 새로운 요소를 추가하고 싶다면

    두번째 인수에 0을 넣으면 됨

 

 

 

[ 원하는 위치의 요소들을 추출하는 slice() 함수 ]

- slice() : 여러 개의 요소를 꺼낸다 (삭제X)

  * 배열에서 요소를 꺼낸다는 점은 pop(), shift()와 같음

  * 첫번째 인수 : 시작 인덱스 값

    두번째 인수 : 끝 인덱스 값-1 (끝 인덱스 값의 직전까지만 추출)

  * 원래 배열은 변경되지 않음 => 진짜 '추출'만 함

인수가 1개일 때

인수가 2개 일 때

 

 

 

[ Array 객체의 함수 살펴보기 ]

206p 표

 

 

 

 

 

< 07-3 여행 준비물 점검 프로그램 만들기 >

[ 만드는 과정 미리 생각해 보기 ]

1. 배열 만들기

2. 챙길 물건 배열에 추가하기

3. 추가한 내용 화면에 표시하기

4. 챙긴 물건 목록에서 삭제하기

 

 

 

[ 실습 - 준비물 점검 프로그램 만들기 ]

- 1단계 : 입력 필드 만들기

소스

실행 결과

 

 

 

- 2단계 : 항목 추가하기

              js 파일                                                                                             html 파일

텍스트 필드 입력 후 [추가] 버튼을 누르면

배열에 잘 추가됨

 

 

 

- 3단계 : 화면에 점검 목록 표시하기

텍스트 필드 입력 후 [추가] 버튼을 누르면 하단 목록으로 추가됨

 

 

 

- 4단계 : 챙긴 준비물 목록에서 지우기

  * querySelectAll() : 괄호 안에 지정한 class 이름을 가진 모든 요소를 가져옴

  * this 키워드를 사용하면 이벤트가 발생한 요소를 알아낼 수 있음

삭제 버튼 눌렀을 시 해당 값 삭제됨