[SEB_FE_45] 2023.04.25 / 배열과 객체 기초

📖 [강의 내용 및 개념 정리]

오늘은 배열과 객체 관련하여 이해도 자가 점검 리스트를 참고하여 내용을 정리하고자 한다.

배열

• 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.

  • 특정 인덱스의 요소 조회

  const 배열 = [0, 1, 2, 3, 4, 5, 6];
   const 특정_인덱스 = 3;
   
   // 배열의 특정 인덱스의 요소 조회하는 방법
   // 배열[특정_인덱스]
   console.log(배열[특정_인덱스]);  // 3

  • 특정 인덱스의 요소 변경

  const 배열 = [0, 1, 2, 3, 4, 5, 6];
   const 특정_인덱스 = 3;
   const 변경할_요소_값 = 100;
   
   // 배열의 특정 인덱스의 요소 조회하는 방법
   // 배열[특정_인덱스]
   
   배열[특정_인덱스] = 변경할_요소_값;
   console.log(배열); // [0, 1, 2, 100, 4, 5, 6]

• length 속성을 이용하여 배열의 길이를 조회할 수 있다.

  const 배열 = [0, 1, 2, 3, 4, 5, 6];
  
  // 배열의 길이 조회하는 방법
  console.log(배열.length) // 7 

• 배열의 요소가 배열인 이중 배열을 이해하고, 이중 배열의 요소를 조회하거나 변경할 수 있다.

  const 이중_배열 = [[0, 1], [2, 3], [4, 5]];
  const 특정_인덱스 = 1;
  
  // 이중 배열의 특정 인덱스의 요소 조회
  console.log(이중_배열[특정_인덱스]); // [2, 3]
  
  // 이중 배열의 특정 인덱스의 요소 변경
  이중_배열[특정_인덱스] = [100, 100];
  console.log(이중_배열[특정_인덱스]); // [100, 100]
  
  // 이중 배열의 길이 조회
  console.log(이중_배열.length) // 3

• 배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.

  const 배열 = [0, 1, 2, 3, 4, 5, 6];
  
    // 1) for문 사용
    for (let i = 0; i < 배열.length; i++) {
    	console.log(`배열의 ${i}번째 요소는 ${배열[i]}입니다.`);
    }
    
    
    // 2) forEach 함수 사용
    배열.forEach((v, i) => {
    	console.log(`배열의 ${i}번째 요소는 ${배열[i]}입니다.`);
    })
    
    // 모두 다음과 같은 결과를 나타냄.
    // 배열의 0번째 요소는 0입니다.
    // 배열의 1번째 요소는 1입니다.
    // ...
    // 배열의 6번째 요소는 6입니다.

• 배열에서 사용되는 다양한 메서드를 알고 사용할 수 있다.

  • split(), join(), slice(), splice(), Array.isArray(), push(), unshift(), pop(), shift(), indexOf(), includes()

  1) String.prototype.split()

  const str = 'abcdefg';
  
  // String 객체를 지정한 구분자(파라미터로 전달)를 이용하여 여러 개의 문자열로 나눔
  // return 새로운 배열
  const arr = str.split('');
  console.log(arr);
  // ['a', 'b', 'c', 'd', 'e', 'f']

  2) Array.prototype.join()

  // 배열의 모든 요소를 지정한 구분자(파라미터로 전달)로 연결해 하나의 문자열을 만듦
  // return 새로운 문자열
  const joinedArr = arr.join('-');
  console.log(joinedArr);
  // 'a-b-c-d-e-f-g'

  3) Array.prototype.slice()

  // 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환
  // 원본 배열은 바뀌지 않음
  // return 새로운 배열
  const slicedArr = arr.slice(2, 4);
  console.log(slicedArr);
  // ['c', 'd']

  4) Array.prototype.isArray()

  // 배열인지 여부를 true 또는 false로 반환
  // return 불린형
  console.log(Array.isArray(str)); // false
  console.log(Array.isArray(arr)); // true

  5) Array.prototype.push()

  // 배열의 마지막에 새로운 요소 추가
  // return 호출한 배열의 새로운 length 속성
  const 끝에_요소를_추가할_배열 = [0, 1];
  const 새로운_길이 = 끝에_요소를_추가할_배열.push(2);
  
  console.log(끝에_요소를_추가할_배열); // [0, 1, 2]
  console.log(새로운_길이); // 3

  6) Array.prototype.unshift()

  // 배열의 시작에 새로운 요소 추가
  // return 호출한 배열의 새로운 length 속성
  const 시작에_요소를_추가할_배열 = [1, 2];
  const 새로운_길이 = 시작에_요소를_추가할_배열.unshift(0);
  
  console.log(시작에_요소를_추가할_배열); // [0, 1, 2]
  console.log(새로운_길이); // 3

  7) Array.prototype.shift()

  // 배열의 첫 요소 삭제
  // return 배열에서 제거된 요소
  const 시작에_요소를_삭제할_배열 = [0, 1, 2];
  const 삭제된_요소 = 시작에_요소를_삭제할_배열.shift();
  
  console.log(시작에_요소를_삭제할_배열); // [1, 2]
  console.log(삭제된_요소); // 0

  8) Array.prototype.pop()

  // 배열의 마지막 요소 삭제
  // return 배열에서 제거된 요소
  const 시작에_요소를_삭제할_배열 = [0, 1, 2];
  const 삭제된_요소 = 시작에_요소를_삭제할_배열.pop();
  
  console.log(시작에_요소를_삭제할_배열); // [0, 1]
  console.log(삭제된_요소); // 2

  9) Array.prototype.indexOf()

  // 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환
  // return 숫자형
  
  const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
  
  console.log(beasts.indexOf('bison'));
  // Expected output: 1
  

  10) Array.prototype.includes()

  // 배열이 특정 요소를 포함하고 있는지 여부를 true 또는 false 반환
  // return 불린형
  
  const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
  
  console.log(beasts.includes('bison'));
  // Expected output: true
  

객체

• 배열과 객체의 특징을 구분하고, 배열과 객체의 특징에 따라 웹 애플리케이션 개발 시 어떻게 사용되는지 이해한다.

  • 예를 들어, 유저의 정보를 저장한다고 가정하자

  • 방법1. 각 변수에 저장한다.

    let userNickName = 'kay';
    let userEmail = 'kay@velog.io';

  • 방법2. 배열에 저장한다.

    let user1 = ['kay', 'kay@velog.io'];

  • 방법1은 변수를 저장함에 있어 비효율적이다.

  • 방법2는 변수 저장의 효율성은 높였지만, 각 요소가 유저의 어떤 정보를 저장했는지를 알 수 없다.

  • 따라서, 방법3. 객체에 저장하면 변수 저장의 효율성과 각 정보에 대한 이해라는 장점을 가질 수 있다.

    let user1 = {
    	name: 'kay',
        email: 'kay@velog.io',
    }

• 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.

  • dot notation

    let user1 = {
    	name: 'kay',
        email: 'kay@velog.io',
    }
    
    console.log(user1.name); // kay

  • bracket notation

    let user1 = {
    	name: 'kay',
        email: 'kay@velog.io',
    }
    
    console.log(user1['name']); // kay

• 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.

    let user1 = {
    	name: 'kay',
        email: 'kay@velog.io',
    }
    
    // 추가
    user1.age = 100;
    console.log(user1['age']); // 100
    
    // 변경
    user1.age = 200;
    console.log(user1['age']); // 200
    
    // 삭제
    delete user1.age;
    console.log(user1['age']); // undefined

• 해당 키가 있는지 확인할 수 있다.

  let user1 = {
    	name: 'kay',
        email: 'kay@velog.io',
  }
    
  'name' in user1 // true
  'age' in user1 // false

• 배열과 객체에 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.