[SEB] Section 1 - Single Page Application[JS/Node] 배열, 객체(TIL 9일차)

박순호·2021년 10월 19일

배열과 객체라는 개념을 통해, 수 많은 데이터를 한 번에 처리 할 수 있습니다. 만약 인스타그램이나 카카오톡 같은 대규모 서비스에서 매번 새로운 변수를 선언한다면, 같은 일을 여러번 반복하게 됩니다. 한 번에 최소 100개 이상의 데이터를 사용 할 때, 배열이나 객체를 사용한다면 단 한 번의 선언으로 해결 할 수 있습니다.

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

배열

배열은 순서가 있는 값
각 인덱스에 있는 값을 요소(element)라고 합니다.

// myNumber라는 배열의 3번째 인덱스를 조회하려면 
myNumber[3];

// myNumber라는 배열의 3번째 인덱스의 값을 변경하려면
myNumber[3] = 200;
myNumber; // [73, 98, 86, 200, 96];

배열의 반복

let myNum = [10, 20, 40, 10];
let sum = 0; /* 0으로 초기화를 해주지 않으면 undefined로 처리되어
                undefined + 10 = NaN으로 되어버립니다. */

for (let n = 0; n < myNum.length; n++) {
  sum = sum + myNum[n];
} // sum의 값 80

배열 기초 메소드

배열인지 아닌지 확인하기

let words = ['피', '땀', '눈물'];
typeof words;  // -> object
let obj = {a: 1};
typeof obj; // -> object
/* 객체일때도 object로 나와서 더 정확하게 배열인지 아닌지를 확인 하려면 
Array.isArray(객체)를 사용해야 합니다 */

Array.isArray('문자열') // false
Array.isArray(123) // false
Array.isArray(words) // true
Array.isArray([1, 2, 3]) // true

배열 요소 추가 및 삭제하기

push : 뒤쪽에 새로운 엘리먼트 추가하기

pop : 뒤쪽의 엘리먼트 삭제하기

shift : 앞쪽의 엘리먼트 삭제하기

unshift : 앞쪽의 엘리먼트 추가하기

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

indexOf(element) : 엘리먼트가 있는지 검사하고 그 엘리먼트의 인덱스 번호 출력

includes(elment) : indexOf와 마찬가지로 엘리먼트가 있는지를 검사하지만 인덱스의 위치를 알 수 없고, Internet Explorer에서 사용할 수 없는 단점이 있어 indexOf를 쓰는 것이 더 좋습니다.

객체

자바스크립트의 객체는 게임 캐릭터처럼 각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하여 손쉽게 데이터를 관리 할 수 있습니다.

중괄호(curly bracket)를 이용해서 객체를 만듭니다.
키-값 쌍(key-value pair)은 쉼표(comma)로 구분해줍니다.

객체의 값을 사용하는 두 가지 방법

방법 1. Dot notation

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

user.firstName; // 'Steve'
user.city; // 'Seoul'

방법 2. Bracket notation

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

user['firstName']; // 'Steve'
user['city']; // 'Seoul'