[Hanaro] 13일차 / JavaScript (Array, 객체 지향 프로그램)

JavaScript - 배열(Array)

• 배열(Array)
  • 배열은 순서가 있는! 데이터 집합
  • 0으로 시작하는 숫자형 인덱스 - 배열의 각 요소는(element) 인덱스로 접근
  • length 프로퍼티를 가지며, length를 조정하여 배열의 길이를 조절할 수 있다. (줄이면 제거, 늘리면 empty)
• 배열 Class(static) Methods
  • 순수 함수(pure functions)
    • concat, join, values
    • indexOf, lastIndexOf, includes, findIndex, findLastIndex
    • slice, entries, flat
    • find, findLast
    • some, every, map, filter
    • forEach, reduce
  • 비 순수 함수(non-pure functions)
    • push, pop, shift, unshifr
    • fill, splice
    • sort, reverse
  • 그 외 클래스(static) Methods
    • console.dir(Array.prototype);
    • const arr = [1, 2, 3];
    • console.dir(arr.proto);
• 배열 만들기
  • const a = Array(3); ↔ new Array(3) ↔ [,,,]
• 배열 - push, pop, shift, unshift
  • push(): 배열의 맨 끝에 값 추가
  • unshift(): 배열의 맨 앞에 값 추가
  • pop(): 배열의 맨 끝에 값 제거
  • shift(): 배열의 맨 앞에 값 제거
• 배열 index 찾기 (검색)
  • indexof(찾고싶은 배열 안의 값)
    • 해당 값의 인덱스 출력(값이 두개여도 첫번째 값의 위치만 출력)
    • 없는 값을 넣었을 때→ -1 출력
    • indexof(찾고싶은 값, 찾기 시작할 인덱스 위치)
  • lastIndexOf(찾고싶은 배열 안의 값)
    • 뒤에서부터 검색 시작
  • includes(배열 안에 포함하는지 확인할 값)
    • 해당 값이 배열 안에 있으면 true 출력, 없으면 false 출력
    • includes(배열 안에 포함하는지 확인할 값, 찾기 시작할 인덱스 위치)
• 배열 루프와 찾기
  • forEach
    • ex) users.forEach((user, idx) ⇒ console.log(user.name));
  • map
    • ex = users.map((user, idx) ⇒ ${idx+1}. ${user.name});
  • filter
    • ex = users.filter((user, idx) ⇒ user.id > 1);
  • find
    • users.find((user, idx) ⇒ user.id === 2);
  • findLast((user, idx) ⇒ user.id === 2);
• 배열 요소 & 합치기
  • join()
    • 배열의 모든 요소를 연결해서 하나의 문자열로 만든다.
      • ex) const arr = [’가’, ‘나’, ‘다’];
      • console.log(arr.join(’, ‘)); ⇒ 가, 나, 다
  • concat()
    • 하나의 배열에 다른 배열을 합칠 수 있다.
    • const 합친배열 = 배열1.concat(배열2);
  • spread(…)
    • 배열 안에서 변수 이름 앞에 …을 붙이게 되면 해당 변수가 배열 안에 추가된다.
      • ex) const 배열1 = [1, 2, 3];
      • const 배열2 = [’A’, ‘B’, ‘C’];
      • const 합친배열 = […배열1, …배열2];
      • console.log(합친배열); ⇒ [1, 2, 3, ‘A’, ‘B’, ‘C’];
    • 배열을 복제할 때도 사용할 수 있다.
      • ex) const original = [1, 2, 3];
      • const new = […original];
      • console.log(new); ⇒ [1, 2, 3];
• 배열 정렬 및 뒤집기
  • sort()
    • 배열 정렬, 하지만 배열 요소들을 문자열로 취급하기 때문에 함수 안에 추가로 넣어줘야 함
    • 숫자 배열 정렬
      • 숫자배열.sort((a, b) ⇒ a - b); ⇒ 오름차순 숫자 정렬
      • 숫자배열.sort((a, b) ⇒ b - a); ⇒ 내림차순 숫자 정렬
    • 문자 배열 정렬
      • 문자배열.sort(); ⇒ 오름차순 문자 정렬
      • 문자배열.sort((a, b) => b > a ? 1 : -1); ⇒ 내림차순 문자 정렬
      • 문자배열.sort().reverse(); ⇒ 내림차순 문자 정렬
  • reverse()
    • 배열 순서 반대로 뒤집기(정렬과 문관하고 순서만 바뀐다.)
• 배열 일부 가져오기(slice), 제거+추가하기(splice)
  • slice()
    • slice(시작인덱스, 미만인덱스)
    • slice(시작인덱스)
      • 시작인덱스부터 끝까지 값 다 가져온다.
  • splice()
    • splice(시작인덱스, 삭제할 값의 개수)
      • 배열 일부의 값을 삭제
        • ex) arr = [1, 2, 3, 4, 5];
        • arr.splice(1, 3); ⇒ [2, 3, 4] 삭제 및 리턴, arr은 [1, 5] 상태
    • splice(시작인덱스, 삭제할 값의 개수, 넣을 값들)
      • 배열에 중간에 값들을 넣을 수 있다.
        • ex) arr = [1, 5];
        • arr.splice(1, 0, 2, 3, 4); ⇒ arr은 [1, 2, 3, 4, 5]
• 유사 배열 객체(Array-like Object)
  • 배열과 유사한 형태이지만 배열은 아니다. 일반 객체에 length 프로퍼티가 존재하는 경우 유사 배열 객체라고 말한다.
  • 예로 함수의 arguments 객체가 존재한다.
  • Array.from(유사배열객체)으로 진짜 배열을 만들 수 있다.
• 배열 평탄화 - flat, flatMap
  • flat()
    • []안의 []가 있을 때 제일 겉에서부터 [] 한 차원을 없애준다.
      • ex) [1, 2, [3]].flat(); ⇒ [1, 2, 3]
      • [1, [2, [3]]].flat(); ⇒ [1, 2, [3]]
    • flat(2) 같이 안에 숫자를 넣어주면 해당 값의 차원 개수만큼 줄여준다.
    • flat(Infinity)는 무조건 1차원 배열로 만들어 준다.
• 배열 - reduce
  • reduce()
    • 리듀스 함수는 배열의 요소를 하나의 값으로 줄여서 return 해준다.
    • 배열 기반으로 하나의 값을 도출할 때 사용
    • 배열.reduce(callback(현재누산된값, item) ⇒ 누산, 초기값)
      • ex) const arr = [1, 2, 3];
      • const sum = arr.reduce( (s, a) ⇒ s + a); ⇒ 6 출력
        1. s가 현재 누산된 값이니까 0으로 시작, a는 1 ⇒ 0 + 1 계산되어서 s가 1로 변경
        2. s(=1) + 2 = 3, s가 3으로 변경
        3. s(=3) + 3 = 6, s가 6으로 변경. 배열 모두 돌았으니 6을 return
      • ex) const users = [{ id: 1, name: 'Hong' }, { id: 20, name: 'Kim' }, { id: 3, name: 'Lee' } ];
      • users.reduce( (s, user) => ${s} ${user.name}, ''); ⇒ ‘ Hong Kim Lee’ 출력
        1. 초기값을 ‘’ 빈칸으로 줬으니 s는 ‘’에 user은 Hong 할당, s는 ‘ Hong’ 으로 변경
        2. s(=’ Hong’) + Kim = ‘ Hong Kim’ 으로 s 변경
        3. s(=’ Hong Kim’) + Lee = ‘ Hong Kim Lee’ 으로 s 변경 후 배열 모두 돌았으니 ‘ Hong Kim Lee’을 return

 

JavaScript - 객체 지향 프로그램

• 객체 지향 프로그래밍 (Object Oriented Programming)
  • 원시(primitive) 타입을 제외한 모든 것이 객체(object)
  • 특정 인스턴스에 종속되지 않는 함수를 클래스(정적) 메소드라고 한다.
  • 은닉성
    • 캡슐화, 내부(local) 변수 및 메소드 보호(private, protected, public)
  • 상속성
    • 확장성(extends, mixin, prototype), superclass & subclass
  • 다형성
    • polymorphism, interface / super class
  • 추상화
    • abstract class