제로초 JavaScript 강의 - 객체, 배열

 

• 제로초 JavaScript 강의 - 객체, 배열

---

Review

 

 

 

 

 

 

---

 

• 제로초 JavaScript 강의 - 객체, 배열

 

 

<객체>

 

 

: 객체(object)는 자료형의 일종으로 다양한 값을 모아 둔 또다른 값이다.

객체의 종류는 크게 배열(array), 함수(function), 배열이나 함수가 아닌 객체로 나눌 수 있다.

 

객체의 유형

 

 

 

<배열>

 

: 다양한 값을 나열하는 경우를 생각해보자. 과일을 나열한다고 하면 다음과 같이 변수를 선언한다.

 

const apple = '사과';
const orange = '오렌지';
const pear = '배';
const strawberry = '딸기';

 

과일은 그 종류가 매우 많으므로 모든 과일에 변수명을 붙이는 것은 고통스러운 일이다.

이럴 때는 배열을 사용해 값들을 하나로 묶을 수 있다.

 

const fruits = ['사과', '오렌지', '배', '딸기'];

 

네 종류의 과일을 fruits라는 상수로 묶었다. 배열을 만들려면 대괄호([])로 값들을 감싸면 된다.

값은 쉼표로 구분한다.

배열 내부의 값을 개별적으로 불러올 수도 있다. 배열 이름 뒤에 불러오고 싶은 값의 자릿수를

적어주면 된다. 자릿수는 0부터 시작한다는 점을 기억하자.

일반적으로 숫자는 1부터 세지만, 프로그래밍에서는 0부터 세는 경우가 많다.

프로그래밍에서는 이런 자릿수를 인덱스(index)라고 한다.

 

> const fruits = ['사과', '오렌지', '배', '딸기'];
  console.log(fruits[0]);
  console.log(fruits[1]);
  console.log(fruits[2]);
  console.log(fruits[3]);

  사과
  오렌지
  배
  딸기

 

현재 배열 안에 있는 값은 모두 문자열이지만, 값의 자료형이 모두 같지 않아도 된다.

배열 안에 다른 배열이나 변수를 넣을 수 있다.

 

const arrayOfArray = [[1, 2, 3], [4, 5]];
arrayOfArray[0]; // [1, 2, 3]
const a = 10;
const b = 20;
const variableArray = [a, b, 30];
variableArray[1]; // 20 (b의 값)

 

arrayOfArray 배열을 보면 배열 내부에 배열이 들어 있다. 

arrayOfArray[0]을 하면 [1, 2, 3]이 나오는데 이 또한 배열입니다.

이러한 배열을 이차원 배열이라고 한다.

 

배열은 내부의 값이 중복되어도 되고, 아무 값 없이 만들 수도 있다.

 

const everything = ['사과', 1, undefined, true, '배열', null];
const duplicated = ['가', '가', '가', '가', '가'];
const empty = [];

 

이런 배열 내부의 값을 요소(element)라고 합니다. everything 배열에는 요소가 6개 들어 있고, 

empty 배열에는 요소가 0개 있다. 프로그래밍으로 요소의 개수를 구할 수 있다.

 

 

 

<배열의 요소 개수 구하기>

 

 

: 앞에서 만든 everything 배열의 요소 개수를 구해 보자. 배열 이름 뒤에 .length를 붙이면 된다.

> const everything = ['사과', 1, undefined, true, '배열', null];
  console.log(everything.length);

  6

 

빈 값도 유효한 값이기 때문에 요소 개수를 셀 때 포함된다.

 

> const emptyValue = [null, undefined, false, '', NaN];
  console.log(emptyValue.length);

  5

 

배열의 요소 개수를 활용해 원하는 인덱스의 요소를 찾을 수 있다.

배열의 요소 개수가 항상 마지막 인덱스보다 1 크다는 걸 알 수 있다.

emptyValue 배열에서 NaN의 인덱스는 4이고, 요소의 개수는 5입니다. 

everything 배열에서 null의 인덱스는 5이고, 요소의 개수는 6입니다.

즉, 배열의 요소 개수에서 1을 빼면 마지막 요소의 인덱스가 된다.

이를 이용해 마지막 요소의 값을 찾을 수 있다.

 

> const findLastElement = ['a', 'b', 'c', 'd', 'e'];
  console.log(findLastElement[findLastElement.length - 1]);

  e

 

findLastElement.length가 5이므로 findLastElement.length - 1은 4가 된다.

따라서 findLastElement[4]로 e 값을 찾을 수 있다. 마지막 요소를 찾을 때 자주 쓰는 방법이니 기억하자 !

 

 

 

<퀴즈>

 

arr 라는 배열이 있을 때, 배열의 마지막에서 세 번째 요소를 찾아보세요.

 

const arr = [1,2,3,4,5]
arr[arr.length - 3]

 

 

 

<배열에 요소 추가하기>

 

 

: 배열을 만들고 나면 중간에 배열을 수정할 수 있다.

배열에 요소를 추가할 수도 있고, 특정 인덱스의 요소를 수정하거나 제거할 수도 있다.

먼저, 다음 배열에 요소를 추가해보자. 원하는 배열의 인덱스에 값을 대입하면 된다.

 

> const target = ['a', 'b', 'c', 'd', 'e'];
  target[5] = 'f';
  console.log(target);

  (6) ["a", "b", "c", "d", "e", "f"];

 

처음으로 배열을 console.log 해 보았는데, 배열의 요소가 나열되고 그 앞에 (6)이라는 숫자가

보인다. 이 숫자는 배열의 요소 개수(배열.length)를 의미한다. 

target 배열의 요소 중 e의 인덱스가 4이므로 target[5]에 f를 대입하면 e보다 뒤에 f가 위치한다.

배열의 마지막 요소 인덱스가 배열.length - 1이므로 다음 요소를 추가하려면 배열.length에 값을

넣으면 된다.

 

> const target = ['가', '나', '다', '라', '바'];
  target[target.length] = '마';
  console.log(target);

  (6) ["가", "나", "다", "라", "마", "바"]

 

배열 맨 앞에 값을 추가하고 싶다면 어떻게 해야 할까? 

배열[0] = 값이라고 생각할 수도 있지만, 원하는 결과가 나오지 않는다.

 

> const target = ['나', '다', '라', '마', '바'];
  target[0] = '가';
  console.log(target);

  (5) ["가", "다", "라", "마", "바"]

 

우리가 원한 결과는 ["가", "나", "다", "라", "마", "바"]였는데, 맨 앞에 요소가 추가된 것이 아니라

첫 번째 요소의 값이 '나'에서 '가'로 변경되어 버렸다. 얼떨결에 요소를 수정하는 방법을 배웠다.

원래 원했던, 배열 맨 앞에 값을 추가하려면 unshift라는 기능을 실행하면 된다.

 

> const target = ['나', '다', '라', '마', '바'];
  target.unshift('가');
  console.log(target);

  (6) ["가", "나", "다", "라", "마", "바"]

 

주어진 값이 배열의 첫 번째 요소로 추가되고, 다른 요소들의 인덱스는 하나씩 뒤로 밀린다.

 

맨 뒤에 요소를 추가하는 방법도 있다. 

배열[배열.length] = 값 방식으로도 가능하지만, 배열 자체에서 배열 안에 값을 추가하는 기능을

제공한다. push를 사용해보자.

 

> const target = ['가', '나', '다', '라', '마'];
  target.push('바');
  console.log(target);

  (6) ["가", "나", "다", "라", "마", "바"]

 

성공적으로 맨 뒤에 요소가 추가됐다.

 

- const인데 수정 가능한 이유는 뭔가요?

 

: 앞 예제에서 target 변수를 const로 선언했다. 하지만 target 배열에 새 값을 추가하거나 수정할 수

있었다. 이러한 상황 때문에 const가 엄밀히 상수는 아니라고 했었다.

const에는 새로운 값을 대입(=)하지 못한다고 기억하면 된다. 즉, 재할당이 안된다.

const에 객체(배열, 함수, 객체 리터럴)가 대입되면 객체 내부의 속성이나 배열의 요소는 수정할 수

있다.

 

> const target2 = ['a', 'b', 'c', 'd', 'e'];
  target2 = ['f', 'g']; // 불가능
  target2[0] = 'h'; // 가능

 

 

<배열의 요소 수정하기>

 

: 배열 맨 앞에 요소를 추가하는 연습을 할 때 우연히 요소를 수정하는 방법을 알게 됐었다.

다음처럼 원하는 인덱스에 바꿀 값을 넣으면 된다.

 

> const target = ['가', '나', '다', '라', '마'];
  target[3] = '카';
  console.log(target);

  (5) ["가", "나", "다", "카", "마"]

 

네 번째 요소(인덱스 3)를 '카'로 수정했다.

 

 

 

 

<배열에서 요소 제거하기>

 

 

: 이번에는 배열에서 요소를 제거해보자. 요소를 제거하는 것은 상당히 복잡하다.

어떤 요소를 제거한다면 그 뒤에 위치한 나머지 요소의 인덱스를 모두 1씩 앞으로 당겨야 하기

때문이다. 직접 하기는 어렵지만, 다행히 배열에서 이러한 기능을 제공한다.

먼저 마지막 요소를 제거하는 기능을 사용해보자. pop을 사용하면 마지막 요소가 제거된다.

 

> const target = ['가', '나', '다', '라', '마'];
  target.pop();
  console.log(target);

  (4) ["가", "나", "다", "라"]

 

반대로 첫 번째 요소를 제거할 수도 있다. shift 기능을 사용해보자.

 

> const target = ['가', '나', '다', '라', '마'];
  target.shift();
  console.log(target);

  (4) ["나", "다", "라", "마"]

 

정리해보자면 unshift, shift가 짝이고, push와 pop이 짝이다.

 

 

 

null이나 undefined, false 같은 것들도 배열 안에서 요소들로 간주하기 때문에 null이라고 작성하면

요소를 제거하지 못하고 요소를 수정한다.

즉, 배열에서 마지막 요소를 제거하고 싶을 떄 .pop() 메소드를 이용하자 !

 

 

첫 번째 요소나 마지막 요소를 제거하는 것은 쉽지만, 중간 요소를 제거하는 것은 조금 복잡하다. 

splice 기능을 사용해보자.

 

> const target = ['가', '나', '다', '라', '마'];
  target.splice(1, 1);
  console.log(target);

  (4) ["가", "다", "라", "마"]

 

splice 기능에서는 값을 두 개 사용한다.

첫 번째는 시작 인덱스이고, 두 번째는 제거할 요소의 개수이다. 코드에 1, 1을 넣었기 때문에

인덱스 1부터 1개를 제거하겠다는 의미이다.

만약 2, 2를 넣는다면 어떻게 될까? 다음 코드를 실행하기 전에 먼저 결과를 추정해보자.

 

> const target = ['가', '나', '다', '라', '마'];
  target.splice(2, 2);
  console.log(target);

  (3) ["가", "나", "마"]

 

인덱스 2인 ‘다’부터 2개를 제거했기 때문에 ‘다’, ‘라’가 제거된다.

인덱스가 0부터 시작하기 때문에 조금 헷갈릴 수 있다. 익숙해질 때까지 반복해서 연습해야한다.

지금까지는 splice에 숫자 값 두 개를 넣었는데, 이번에는 하나만 넣어 봤다.

하나만 넣으면 해당 인덱스부터 끝까지 모든 요소를 제거하겠다는 뜻이다.

 

> const target = ['가', '나', '다', '라', '마'];
  target.splice(1);
  console.log(target);

  (1) ["가"]

 

인덱스 1의 요소가 ‘나’이므로 ‘나’부터 ‘마’까지 모두 제거된다.

splice로 값을 제거만 하는 것이 아니라 제거한 자리에 다른 값을 넣을 수도 있다. 

splice의 세 번째 자리부터 바꿀 값을 넣어 주면 된다.

 

> const target = ['가', '나', '다', '라', '마'];
  target.splice(1, 3, '타', '파');
  console.log(target);

  (4) ["가", "타", "파", "마"]

 

splice(1, 3, '타', '파')는 인덱스 1부터 3개 요소를 먼저 제거하고 요소를 제거한 자리에 ‘타’와 ‘파’를

채워 넣는다. 따라서 '가', '타', '파', '마'가 된다.

 

 

> const arr = ['가', '나', '다', '라', '마']
arr.splice(1, 0, '바')
< []

console.log(arr);

(6) ['가', '바', '나', '다', '라', '마']

 

이렇게 되면 인덱스를 하나도 지우지 않고 인덱스 1에 '바'만 추가로 넣을 수 있는 방식이다.