TIL 210730 - 배열과 객체(대량의 데이터를 다루어 보자!)

배열과 객체

배열과 객체라는 개념을 통해, 수 많은 데이터를 한 번에 처리하는 방법을 학습

대량의 데이터를 다루기에 적합하게 제작된 데이터 타입인 배열과 객체를 참조 타입(reference type) 데이터라고 합니다. 참조 타입 데이터는 이전에 학습한 원시 타입(숫자, 문자열, boolean, undefined 등) 데이터와 다른 성격을 가짐

 

Achievement Goals

배열 기초

• 배열에서 사용되는 다음 용어에 대해 정확히 이해할 수 있다.
  • index, element, length
  • arr[0], push, pop
• 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.
• 배열의 요소가 배열인 이중 배열을 이해할 수 있다.
• 이중 배열의 요소를 조회하거나 변경할 수 있다.

배열의 반복

• 배열의 요소를 반복적으로 불러오는 방법을 이해하고 사용할 수 있다.
• 배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.
  • 기본적인 for 문 for (let i = 0; i < 5; i++) 을 응용하여 다양한 for문을 만들 수 있다.
  • 반복문에 조건문을 응용하여 특정 조건에서만 코드를 실행시킬 수 있다.
  • 이중 반복문이 무엇인지 이해하고 활용할 수 있다.
• 배열과 반복문을 활용하여 실생활에서 접할 수 있는 간단한 문제를 해결할 수 있다.
• 문자열과 배열의 타입 변환을 돕는 메소드를 알고 있다.
  • 띄어쓰기 (" ")로 문자열을 구분하여, 배열로 변경할 수 있다. str.split(" ").join(" ")
  • 문자열을 요소로 가지는 배열을 띄어쓰기 (" ")로 구분한 문자열로 변경할 수 있다.

배열 기초 메소드

• 배열 요소(element)를 조회할 수 있다. bracket notation
• 배열을 복사, 분리하는 법을 이해할 수 있다. slice, splice
• 변수, 데이터, 또는 특정 값이 배열인지 아닌지 판별할 수 있다. Array.isArray
• 배열의 요소(element)를 추가 및 삭제할 수 있다. push, unshift, pop, shift
• 배열의 길이를 구할 수 있다. length
• 변수, 데이터, 또는 특정 값이 배열에 포함되어 있는지 확인할 수 있다. indexOf, includes

배열 시작!!

 

 

 

 

 

myNumber의 1번째 인덱스값의 0번째 인덱스값은 

1번째 인덱스값 = [73, 8]

1번째 인덱스값의 0번째 인덱스값 = 73

 

 

dot으로 변수가 가지고 있는 속성에 접근한다.

 

.push 메소드(함수)를 통해 배열의 마지막 인덱스에 요소 추가 가능

 

.pop 메소드로 배열의 마지막 값 삭제 가능

 

 

배열인지 아닌지 확인하기

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

 

 

arr.shift로 배열의 앞쪽의 값을 삭제 가능

arr.unshift로 배열의 앞쪽의 값을 추가 가능

 

 

배열 요소 포함 여부 확인하기

자바스크립트의 특정 값이 배열에 포함되어 있는지 확인할 수 있는 indexOf, includes

 

 

 

includes 호환성 측면에서 IE 미호환

 

 

arr.slice

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

arr.slice는 배열이 새롭게 시작 되는 인덱스를 입력받아 배열로 표시해주는 메소드이다.

첫번째 전달인자에 음수(-)값이 들어가면 뒤에서 부터 인덱스를 시작한다는 의미이다.

예를 들어 인덱스 크기가 5인 배열이 있는 경우 첫번째 전달인자가 -2이면 

뒤에서 인덱스 0, 1, 2은 제외되고 3, 4번째 인덱스가 배열로 표시된다.

 

arr.splice

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]


months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

arr.splice는 배열을 특정 인덱스부터 일정 구간 만큼을 제거하고,

원하면 요소를 그 자리에 더 추가할 수 있음

 

기존 배열을 변경하는 메소드이기 때문에 조심해서 사용

splice처럼 원본 배열을 변경하는 메소드를 mutator method 혹은 mutable method라고 칭함.

 

다음 링크에서는 배열 메소드가 원본 배열을 변경하는지, 하지 않는지에 대한 정보를 제공하니 메소드 사용 시 참고 https://doesitmutate.xyz/

 

 

 

배열 끝!=====

늘상 그렇듯이 내용은 쉬우나 문제는 어렵다.

 

코플릿 시작==

 

일본, 해외

개발자 대우

예술 공연

 

코플릿 끝!===

 

객체 시작!===

 

각기 다른 값을 가질 수 있지만, 입력해야하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있습니다.

 

객체 기초, 퀴즈, 실습

• 배열과 객체의 구조를 이해하고 언제, 어떻게 사용하는지 이해할 수 있다.
  • 배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다)
  • 배열과 객체의 특징에 따라 실생활에서 언제 쓰는지 이해할 수 있다.
• 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.
  • 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
  • 객체 실습 - 2의 tweet.content와 tweet['content']의 차이가 무엇인지 설명할 수 있다.
  • dot notation을 이용한 객체 할당 방식을 능숙하게 다룰 수 있다. obj.a = "hello"
  • 객체 속성 삭제를 위한 delete 키워드를 사용할 수 있다.
  • 객체를 위한 for문 for ... in 문을 이해하고 다룰 수 있다.
• 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.
•  

객체 기초

 

 

 

 

 

 

 

배열과 객체의 가장 큰 차이점은 순서의 유무입니다.

배열은 요소에 0부터 순차적으로 접근할 수 있지만 객체는 속성에 순서대로 접근하지 않고, key를 통해서 value에 접근합니다.

A: for in 구문을 통해서 객체의 모든 key에 접근하고 출력할 수 있습니다.

B: for of는 string과 array, 유사배열 등에서 사용이 가능한 반복문입니다.

for (let arr[i] of arr)가 for (let i = 0; i < arr.length; i += 1) 과 같다고 생각하면 쉽습니다.

이후에 iterable object에 대해서 배우게 되면, for ~ of 문에 대해서 더 깊게 이해할 수 있습니다.

C: 배열의 요소에 순서대로 반복적으로 접근하기 위한 방법입니다. 객체에서는 사용하지 않는 것이 좋습니다.

객체의 key가 0, 1, 2, 3 ... 인 경우에만 활용할 수 있습니다.

여기서 key는 변수기 때문에 꼭 key 라고 적어주지 않고 props 혹은 아무거나 적어주어도 됩니다.