[혼공] 혼자 공부하는 자바스크립트 3주차 -1

이번주는 저번주에 이어서 반복문을 다뤄보려고 한다. 

 

배열이란?

-> 관련 있는 데이터들을 하나로 묶어서 하나의 변수에 저장, 여러 개의 값을 저장하는 저장소 []를 사용한다.

 

배열은 다른 언어와 다른 점이 있는데 

1. 배열 내부의 데이터 타입이 서로 다를 수 있다. 

  => 숫자, 스트링, 불리언, null , undefined, 함수

2. 배열의 크기는 동적으로 변경될 수 있다.

 

배열 요소 개수 확인하기 

length 를사용하여 요소의 개수를 확인할 수 있다. 

-------------------------------------------------------------------

배열 추가 - push() , unshift()를 사용하여 배열에 추가할 수 있다.

 

 push() = 배열의 마지막에 요소를 추가 (메서드를 사용)

 

unshift() = 배열의 앞쪽에 요소를 추가 (인덱스를 사용)

-------------------------------------------------------------------

 

배열 삭제 - pop()와 shift()를 사용하여 제거할 수 있다. 

 

pop() - 배열의 마지막 요소를 제거

 

shift() - 배열의 첫 번째 요소를 제거

-------------------------------------------------------------------

배열에서 기존의 배열을 변동할 수 있는 splice() 메서드와 변동하지 않는 slice() 메서드가 있다. 

 

* splice  기존 배열 변경*  (파괴적 처리)

- 삭제 -

배열. splice(index, 제거 개수);

2번째 인덱스 에서 1개의 요소('다')를 제거한다.

 

- 추가 및 제거 -

배열. splice(index, 제거 개수, 추가하고 싶은 요소);

2번째 인덱스에서 1개의 요소('다')를 제거하고 그 자리에 123을 추가

 

- 추가 -

배열. splice(index, 0, 추가하고 싶은 요소); ->제거하고 싶은 요소가 없을 때 0을 입력하면 된다.

 

-------------------------------------------------------------------

 

* slice() 새로운 배열 * 기존 배열을 건드리지 않고, 아예 새로운 배열을 만드는 메서드이다. (비파괴적 처리)

기존의 배열을 수정하지 않고 어디서부터 ~ 어디까지의 인덱스를 가지고와 새로운 배열을 만든다.

 

-- 한마디로 기본 배열의 요소가 변경되면 파괴적 처리이고, 그렇지 않으면 비파괴적 처리이다.!

 

 

-------------------------------------------------------------------

Chapter 04 확인문제 

1) 다음 배열들의 2번째 인덱스에 있는 값을 찾아보세요.

1. ["1", "2", "3", "4"] --> [ 3 ]

2. ["사과", "배", "바나나", "귤", "감"] --> [ 바나나 ]

3. ["52", "273", "32", "103", "57"] --> [ 32 ]

 

2) 다음 코드의 실행 결과를 예측해 보세요.

==> 5

--틀린 문제 : 1,2,3,4,5로 마지막 요소에 추가되는 줄 알았는데 요소의 개수가 출력되었다...

 

3) 다음 표시된 함수들이 파괴적 처리를 하는지 비파괴적 처리를 하는지 구분해 맞는 것에 o표시하세요.

1. 비파괴적 처리 -> 내용이 변경되지 않고 출력되었다.

2. 파괴적 처리 -> 요소가 추가되어 원본과 다른 값이 출력이 되었다.

3. 비파괴적 처리 -> 내용이 변경되지 않고 출력되었다.

4. 비파괴적 처리 -> 내용이 변경되지 않고 출력되었다.

 

-------------------------------------------------------------------

이번주도 시작이다! 파이팅!!!!! 오늘도 공부 성공~!