[SEB FE] Section 1

Unit9 - [JavaScript] 배열, 객체

• 배열

---

회고

오늘은 프로그래밍에서 가장 중요한 배열에 대해서 배웠습니다. 물론 배열에 대해서 알고 있었지만 배열의 메서드에 대해서는 잘 알지 못했습니다. 그래서 오늘 배열의 메서드에 대해서 개념을 배우고 또한 오늘 배운 학습을 토대로 문제를 바로 푸니 이해를 빠르게 했던 거 같습니다.

그리고 오늘 만난 페어분하고 티키타카 하면서 문제를 풀었는데 너무 재미있었고 서로 설명하면서 풀다보니 혼자서 푸는 것보다 습득도 잘되고 문제도 빨리 풀 수 있었습니다. 내일 객체 수업도 기대가 되면서 오늘도 정처기로 마무리 하도록 하겠습니다.😇 화이팅~!

---

배열

학습목표

• 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.

• length 속성을 이용하여 배열의 길이를 조회할 수 있다.

• 배열의 요소가 배열인 이중 배열을 이해하고, 이중 배열의 요소를 조회하거나 변경할 수 있다.

• 배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.

  • split(), join(), slice(), splice(), Array.isArray(), push(), unshift(), pop(), shift(), indexOf(), includes()

---

개념학습

배열 기초

• 순서가 있는 값으로 값은 요소(element), 순서는 인덱스(index)라고 부르며, 1이 아닌 0부터 번호를 매긴다.

• 배열은 대괄호(square bracket)를 이용해서 배열을 만들고, 각각의 원소(element)는 쉼표(comma)로 구분해준다.

• let myNumber = [73, 98, 86, 61, 96];

  • "조회를 원하면 myNumber라는 배열의 3번째 인덱스"를 조회하려면 myNumber[3];를 쓴다. 그러면 61이 출력!

• let myNumber = [73, 98, 86, 200, 96];

  • "myNumber라는 배열의 3번째 인덱스"의 값을 변경하려면 myNumber[3] = 200;을 쓴다. 그러면 200으로 변경!

배열의 반복

• 반복문을 이용해 배열의 요소(element)를 출력

let myNum = [73, 98, 86, 61];

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

배열의 메서드

• Array.isArray: 자바스크립트의 특정 값이 배열인지 아닌지 판별할 수 있다.

let words = ['피', '땀', '눈물'];

Array.isArray(words)
Array.isArray([1,2,3])
Array.isArray([])

---

true
true
true

• push: 해당 배열 뒤의 element를 추가한다.

• pop: 해당 배열 뒤의 element를 삭제한다.

• unshift: 해당 배열 앞의 element를 추가한다.

• shift: 해당 배열 앞의 element를 삭제한다.

• indexOf: 해당 배열의 인덱스 값이 나오고 해당 배열에 없는 경우에는 -1이 출력된다.

• includes: 해당 배열의 element 여부를 불린 값으로 알려준다. (단점은...익스플로러에서 지원X)

Mutable Method(1) - 원본 배열을 직접 변경

• Array.push()
• Array.pop()
• Array.shift()
• Array.unshift()
• Array.splice()

Immutable Method (2) - 원본 배열을 변경하지 않음, 새로운 배열을 생성하여 반환

• Array.slice()
  • slice(시작할 요소, 끝낼 요소)
  • 배열 원본이 변경되지 않는다. (immutable)
  • 시작할 요소는 포함하고 끝낼 요소는 포함하지 않는다.(파이썬 반복문 느낌)
• Array.concat()
• Array.join()