JS 기초_07 (Arrays & Objects)

Arrays (배열)

배열의 정의와 특징

• 파이썬의 리스트와 비슷한 참조 타입의 객체

• 순서를 보장하는 특징이 있음

• 주로 대괄호를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에접근 가능

• 배열의 길이는 array.length의 형태로 접근 가능

  • 배열의 마지막 원소는 array.length -1로 접근

배열 관련 주요 메서드 (기본)

메서드	설명	비고
reverse	원본 배열의 요소들의 순서를 반대로 정렬
push & pop	배열의 가장 뒤에 요소를 추가 또는 제거
unshift & shift	배열의 가장 앞에 요소를 추가 또는 제거
includes	배열의 특정 값이 존재하는지 판별 후 참/거짓 반환
indexOf	배열의 특정 값이 존재하는지 판별 후 인덱스 반환	요소가 없을 경우 -1 반환
join	배열의 모든 요소를 구분자를 이용하여 연결	구분자 생략 시 쉼표 기준

• 추가적인 배열 관련 메서드 정보는 아래 링크에서 참고

  • MDN
  • ECMA262

• array.reverse()

  • 원본 배열의 요소들의 순서를 반대로 정렬

• array.push()

  • 배열의 가장 뒤에 요소 추가

• array.pop()

  • 배열의 마지막 요소 제거

• array.unshift()

  • 배열의 가장 앞에 요소 추가

• array.shift()

  • 배열의 첫번째 요소 제거

• array.includes(value)

  • 배열에 특정 값이 존재하는지 판별 후 참 또는 거짓 반환

• array.indexOf(value)

  • 배열에 특정 값이 존재하는지 확인 후 가장 첫번째로 찾은 요소의 인덱스 반환
  • 해당 값이 없을 경우 -1 반환

• array.join([separator])

  • 배열의 모든 요소를 연결하여 반환
  • seperator(구분자)는 선택적으로 지정 가능하며, 생략 시 쉼표를 기본 값으로 사용

배열 관련 주요 메서드 (심화)

• 배열을 순회하며 특정 로직을 수행하는 메서드

• 메서드 호출 시 인자로 callback 함수를 받는 것이 특징

  • callback 함수 : 어떤 함수의 내부에서 실행될 목적으로 인자로 넘겨받는 함수를 말함

메서드	설명	비고
forEach	배열의 각 요소에 대해 콜백 함수를 한 번씩 실행	반환값 없음
map	콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환
filter	콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열 반환
reduce	콜백 함수의 반환 값들을 하나의 값(acc)에 누적 후 반환
find	콜백 함수의 반환 값이 참이면 해당 요소를 반환
some	배열의 요소 중 하나라도 판별 함수를 통과하면 참을 반환
every	배열의 모든 요소가 판별 함수를 통과하면 참을 반환

• array.forEach(callback(element[, index[, array]]))

  • 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행

  • 콜백 함수는 3가지 매개변수로 구성

    • element : 배열의 요소
    • index : 배열 요소의 인덱스
    • array : 배열 자체

  • 반환 값이 없는 메서드

• array.map(callback(element[, index[, array]]))

  • 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
  • 콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환
  • 기존 배열 전체를 다른 형태로 바꿀 때 유용

• array.filter(callback(element[, index[, array]]))

  • 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
  • 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환
  • 기존 배열의 요소들을 필터링할 때 유용

• arry.reduce(callback(element[, index[, array]]))

  • 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행

  • 콜백 함수의 반환 값들을 하나의 값(acc)에 누적 후 반환

  • reduce 메서드의 주요 매개변수

    • acc : 이전 callback 함수의 반환 값이 누적되는 변수
    • initialValue : 최초 callback 함수 호출 시 acc에 할당되는 값으로, 선택적으로 설정 가능하며 직접 제공하지 않으면 배열의 첫번째 값 사용

  • 빈 배열의 경우 initialValue를 제공하지 않으면 에러 발생

• array.find(callback(element[, index[, array]]))

  • 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
  • 콜백 함수의 반환 값이 참이면 해당 요소를 반환
  • 찾는 값이 배열에 없으면 undefined 반환

• array.some(callback(element[, index[, array]]))

  • 배열의 요소 중 하나라도 주어진 판별 함수를 통과하면 참을 반환
  • 모든 요소가 통과하지 못하면 거짓 반환
  • 빈 배열은 항상 거짓 반환

• array.every(callback(element[, index[, array]]))

  • 배열의 모든 요소가 주어진 판별 함수를 통과하면 참을 반환
  • 모든 요소가 통과하지 못하면 거짓 반환
  • 빈 배열은 항상 거짓 반환

배열 순회 방법 비교

방식	특징	비고
for loop	- 모든 브라우저 환경에서 지원 - 인덱스를 활용하여 배열의 요소에 접근 - break, continue 사용 가능
for ... of	- 일부 오래된 브라우저 환경에서 지원 X - 인덱스 없이 배열의 요소에 바로 접근 가능 - break, continue 사용 가능
forEach	- 대부분 브라우저 환경에서 지원 - break, continue 사용 불가능	Airbnb Style Guide 권장 방식

Objects (객체)

객체의 정의와 특징

• 객체는 속성의 집합이며 중괄호 내부에 key와 value의 쌍으로 표현

• key는 문자열 타입만 가능

  • key 이름에 띄어쓰기 구분자가 있을 경우 따옴표로 묶어서 표현

• value는 모든 타입 가능

• 객체 요소 접근은 점 또는 대괄호 가능

  • key 이름에 띄어쓰기 같은 구분자가 있을 경우 대괄호 접근만 가능

객체 관련 ES6 문법

• ES6에 새로 도입된 문법들로 객체 생성 및 조작에 유용하게 사용 가능

  • 속성명 축약

  • 메서드명 축약

  • 계산된 속성명 사용하기

  • 구조 분해 할당

    • 구조 분해 할당은 배열도 가능함

 

속성명 축약 (shorthand)

• 객체를 정의할 때 key와 할당하는 변수의 이름이 같으면 예시와 같이 축약 가능

메서드명 축약 (shorthand)

• 메서드 선언 시 function 키워드 생략 가능

계산된 속성 (computed property name)

• 객체를 정의할 때 key의 이름을 표현식을 이용하여 동적으로 생성 가능

구조 분해 할당 (destructing assignment)

• 배열 또는 객체를 분해하여 속성을 변수에 쉽게 할당할 수 있는 문법

JSON (JavaScript Object Notation)

• key - value 쌍의 형태로 데이터를 표기하는 언어 독립적 표준 포맷

• 자바스크립트의 객체와 유사하게 생겼으나 실제로는 문자열 타입

  • 따라서 JS의 객체로 조작하기 위해서는 구문 분석(parsing)이 필수

• 자바스크립트에서는 JSON을 조작하기 위한 두 가지 내장 메서드 제공

  • JSON.parse()

    • JSON => 자바스크립트 객체

  • JSON.stringify()

    • 자바스크립트 객체 => JSON