4장. 반복문 - 1

 

 

 

혼공JS 4장 - 1

 

 

 

---

04-1 배열

 

<배열 만들기>

• 배열(array)은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다.
• 배열은 대괄호[...]를 사용해 생성하고 내부의 값을 쉼표(,)로 구분해 입력한다.
• 배열 내부에 들어 있는 값을 요소(element)라고 하며, 어떠한 종류의 자료형도 요소가 될 수 있다.

[요소, 요소, 요소, ..., 요소]

 

---

 

<배열 요소에 접근하기>

• 배열의 기본적인 조작은 문자열과 비슷하다.
• 각각의 요소에 접근하려면 배열 바로 뒤에 대괄호[...]를 입력하고 그 안에 숫자를 넣는다.
• 자바스크립트는 가장 앞에 있는 요소를 0번째로 표현하며, 이때 요소의 순서를 인덱스(index)라고 부른다.

배열[인덱스]

 

---

 

<배열 요소 개수 확인하기>

• 배열 내부에 들어 있는 요소의 개수를 확인할 때는 배열의 length 속성을 사용한다

배열.length

 

---

 

<배열 뒷부분에 요소 추가하기>

push() 메소드를 사용해 배열 뒷부분에 요소 추가하기

• 배열 뒷부분에 요소를 추가할 때는 push() 메소드를 사용한다.

배열.push(요소)

 

인덱스를 사용해 배열 뒷부분에 요소 추가하기

• 자바스크립트의 배열의 길이는 고정이 아니다.
• 만약 3개의 요소를 가진 배열을 만든 뒤, 10번째 인덱스에 요소를 강제로 추가할 수 있다.
• 이때 4~9번째 인덱스는 아무것도 없는 empty가 된다.

배열["a", "b", "c", empty x 7, "강제로 추가된 요소"]

 

---

 

<배열 요소 제거하기>

• 배열 요소를 제거하는 일반적인 방법은 아래의 2가지이다.
  1. 인덱스를 기반으로 제거하는 경우
  2. 값을 기반으로 제거하는 경우

 

인덱스로 요소 제거하기

• 배열의 특정 인덱스에 있는 요소를 제거할 때는 splice() 메소드를 사용한다.
• splice() 메소드의 splice라는 영어단어는 '접합'을 의미한다.
• 접합(splice)은 다양하게 활용된다.
• 일부를 제거한 뒤 붙이는 것도 접합이고, 중간에 다른 요소를 넣고 붙이는 것도 접합이다.
• 즉, splice() 메소드는 요소를 제거할 때뿐만 아니라 요소를 중간에 넣을 때도 사용할 수 있다.

배열.splice(인덱스, 제거할 요소의 개수)

 

값으로 요소 제거하기

• 값을 기반으로 요소를 제거할 때는 배열 내부에서 특정 값의 위치를 찾는 indexOf() 메소드를 사용해서 값의 위치를 추출한 뒤 splice() 메소드를 사용해 제거한다.

const 인덱스 = 배열.indexOf(요소)
배열.splice(인덱스, 1)

 

문자열의 indexOf() 메소드

• 문자열에도 indexOf() 메소드가 있다. 이를 사용하면 문자열 내부에서 특정 문자열의 위치를 찾을 수 있다.

콘솔에서 실행한 결과

 

배열 내부에서 특정 값을 가진 요소 모두 제거하기

• indexOf() 메소드와 splice() 메소드는 배열 내부 요소를 하나만 제거할 수 있다.
• 배열 내부에서 특정 값을 가진 요소를 모두 제거하고 싶을 때는 반복문을 사용하거나 filter() 메소드를 사용해야 한다.

콘솔에서 실행한 결과

 

---

 

<배열의 특정 위치에 요소 추가하기>

• 배열의 특정 위치(인덱스)에 요소를 추가할 때는 splice() 메소드를 사용한다.
• splice() 메소드의 2번째 매개변수에 0을 입력하면 splice() 메소드는 아무것도 제거하지 않으며, 3번째 매개변수에 추가하고 싶은 요소를 입력한다.

배열.splice(인덱스, 0, 요소)

 

 

 

---

 

 

 

스택, 힙, 비파괴적 처리와 파괴적 처리

• 스택(stack)과 힙(heap)
  • 저장을 할 때 사용하는 공간
  • 스택(stack) : 스택스택 쌓는 공간 [ 잘 쌓는 공간 ]
    • 기본 자료형은 직접!
    • 복합 자료형은 그 주소(address!)
  • 힙(heap) : 힙힙 던져서 쌓는 공간 [ 대충 큰 것들을 던져서 쌓은 공간 ]
    • 복합 자료형의 본체가 저장!
  • 스택과 힙 뿐만아니라 데이터, 코드, 문자열 등등 더 많이 있으나 일단 여기까지!
• 파괴적 처리와 비파괴적 처리
  • 처리 후에
    • 원본이 변경되었다 → 파괴적 처리
    • 원본이 변경되지 않았다 → 비파괴적 처리
• const의 제한
  • const
    • 스택에 있는 값을 변경할 때 오류!!!
    • 힙에 있는 레퍼런스된 복합 자료형을 조작하는 것에는 문제가 없음!!
    • 하지만 스택의 레퍼런스 변수 안에 있는 레퍼런스된 복합 자료형 자체를 변경할 때는 오류!!!
      • 예를 들어 const c=[1, 2, 3]로 선언된 배열을 c=[1, 2, 3, 4]로 변경하려고 한다면 오류!
      • const c=[1, 2, 3]로 선언된 배열에 c.push(4)나 c.splice(2, 1), c.splice(1, 0, 2)는 가능!

 

 

 

• 저자 유튜브 강의 보기
  • 20강 - 4.1절 배열 : https://www.youtube.com/watch?v=1Kzy5p6xR6E
  • 21강 - 스택, 힙, 비파괴적 처리, 파괴적 처리 : https://www.youtube.com/watch?v=9tbjjZb65ng

 

 

 

---

해당 글은 [혼자 공부하는 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---