Week 2-1 : JS로 데이터 효율적으로 다루기

Lesson - 배열 기초

0. intro (1st week review)

-변수 선언: 정보 저장
-함수: 간단한 기능 구현
-반복문: 반복된 작업 수행

1. 배열과 객체

• 대량의 데이터를 다루기 적합하게 제작된 데이터 타입
• 원시 타입의 데이터(e.x. 숫자, 문자열, 불리언, undefined...)와 다른 성격의 참조(reference) 타입

2. 기초

• 대괄호([])를 이용하고, 각각의 원소(element)는 쉼표(,)로 구분
• 요소(element)에 순서(index)가 존재하며, 순서(index)는 0에서 시작
• 이를 통해 배열의 값을 조회(e.x. arr[0]) 및 변경(e.x. arr[0] = 421) 가능
• index에 없는 숫자를 입력 받으면 undefined;
• let myNumber = [[13, 30], [73, 8], [44, 17]] 일 때,
  -> myNumber의 1번째 인덱스 값(myNumber[1]): [73, 8]
  -> myNumber의 1번째 인덱스 값의 0번째 인덱스 값 = 73

3. 배열로 할 수 있는 것

• 배열의 길이 알아내기: arr.length

Lesson - 배열의 반복

1. 배열과 반복문 조합

• for(초기화, 조건식, 증감문) 으로 작성

Lesson - 배열 기초 메소드

1. 배열인지 아닌지 확인하기

• typeof 메소드: 임의 값을 갖는 anything이 있을 때, typeof(anything)에서 'object'가 나오는 경우는 다음 세 가지
  -> 객체(Object), 배열(Array), null
• Array.isArray(): 자료형이 배열인지 확인해 boolean타입의 결과값 리턴

2. 배열의 메소드 사용하기

• 배열 메소드 이용하기: 온점(.)을 이용해 관련된 명령(method)를 실행하며, 함수를 실행하듯 괄호를 열고 닫는 형태
• 배열에 특정 요소 포함 여부 확인:
  -indexOf(searchElement)
  -searchElement를 정확하게 적어야 함(e.x. 대소문자)
  -어떤 값이 포함되어 있는지 확실히 알아야 하며
  -주어진 값과 일치하는 첫 번째 인덱스를 반환
  -값이 없으면 -1을 리턴
  -includes()도 같은 역할을 하지만 브라우저 호환성 측면에서 indexOf 사용 권장
• 배열에 요소 추가: 길이를 리턴
  -arr.unshift() : 앞에서 추가
  -arr.push(): 뒤에서 추가
• 배열에 요소 제거: 값을 리턴
  -arr.shift(): 앞에서 제거
  -arr.pop(): 뒤에서 제거
  

Lesson - 객체

0. intro

여러 값을 위해 여러 변수를 선언하는 것은 이름으로 서로를 구분할 수 있게 만들 뿐, 변수 사이에는 어떠한 관계도 없다.

1) 배열: 대괄호([])를 사용해 선언하며,하나의 변수에 여러 값이 존재

let user = ['Steve', 'Lee', 'steve@codestates.com']

-> 배열은 순서(index)가 있다
-> 어떤 정보를 갖고 있는지 접근하기 위해선 순서(index)를 이용해야 한다
-> 어떤 index에 어떤 정보가 있는지 미리 알고 있어야 하고, 이 경우 가독성도 떨어진다

2) 객체: 중괄호({})를 사용해 선언하며, 한 데이터(변수)가 다양한 속성이 존재

let user = {
firstName: 'Steve',
lastName: 'Lee',
email: 'steve@codestates.com'
};

-> 키와 값의 쌍(key-value pair)으로 이루어지며, 콜론(:)을 이용해 구분
-> 각 쌍의 구분은 쉼표(,)를 이용

1. 객체 기초

1) 객체의 값을 사용하는 방법

(1) Dot Notation:

• user.firstName // 'Steve'
• user.lastName // 'Lee'

(2) Braket Notation:

• user['firstName'] // 'Steve'
• user['lastName'] // 'Lee'

2) 객체의 값을 사용하는 방법 - 심화ver.

let tweet = {
writer: 'SteveLee',
createdAt: '2019-09-10 12-03:33',
content: "프리코스 재밌어요!"
};

tweet.content === tweet['content'] // true;
tweet.wrieter === tweet['writer'] // true;

tweet.wrieter === tweet[writer] // Reference Error: content is not defined

let keyName = 'content';
tweet[keyName] === tweet['content] // true ("프리코스 재밌어요!")

let content = 'writer';
tweet[content] === tweet['content'] // false
tweet[content] === tweet['writer'] // true
tweet['content'] === tweet.content // true;
tweet[content] === tweet.content // false;
tweet[content] === tweet['content'] // false;

3) 객체 활용

(1) delete 키워드

• 객체의 키로 접근한여 키-값 쌍(key-value pair)를 삭제

  delete tweet.createdAt;
  // {
  writer: 'SteveLee',
  content: "프리코스 재밌어요!"
  };

(2) for...in

• in연산자를 이용해 해당하는 키가 있는지 확인

  'content' in tweet; // true;
  'updatedAt' in tweet; // false;

Socrative review - 배열 & 객체

1. [] === [] // false [기수 이동] TIL 6일차 참고
2. (1)str.split('기준'): String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다. (<-> .join('기준'): 합치기 위한 메소드)
   (2)str.splice(제거를 시작할 인덱스, 제거할 엘리먼트 갯수, 추가할 엘리먼트): 기본적으로 '제거'를 위한 메소드
3. arr.unshift/shift/pop/push() 구분
4. arr.slice()메소드를 사용하는 경우, slice는 immutable하기 때문에 return할 때에 유의해야 한다
5. Dot Notation에서 점(.) 뒤에 그리고 Braket Notation에서 Braket([])안에 사용할 때 string타입이 사용 된다
6. (1)배열과 객체의 차이점:
   -배열: 순서
   -객체: 의미
   (2)For...in 반복문: 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복
   (3)For...of 반복문: 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복한다. (조금 더 쉽게 말하면 for(요소of배열))
7. (예시 보고 다시 풀어보기)