개발/JavaScript

JavaScript] 자바스크립트 뿌시기 (배열)

펭귀니 :) 2021. 1. 7. 20:59

🎉 배열


배열

  • 크기를 지정하지 않아도 된다.
  • 어떤 위치에 어느 타입의 데이터를 저장해도 된다.

배열 리터럴

  • 대괄호를 사용 (객체 리터럴은 중괄호)

    var company = ['SAMSUNG', 'SK', 'LG', 'NAVER', 'HYUNDAI'];
    console.log(company[1]); // print >> SK
  • 0 인덱스이다.

배열 요소 생성

  • 아무 인덱스 위치에 값을 동적으로 추가 가능

  • 모든 배열은 length 프로퍼티가 있다.

    company[10] = true;
    console.log(company); // print >> [ 'SAMSUNG', 'SK', 'LG', 'NAVER', 'HYUNDAI', <5 empty items>, true ]
    console.log(company.length); // print >> 11

배열의 length 프로퍼티

  • 배열의 크기도 인덱스 중 가장 큰 값이 기준

    • 실제 메모리는 length 크기처럼 할당되지는 않는다.
  • length 프로퍼티는 코드를 통해 명시적으로 값 변경 가능

    var arr = [0, 1, 2];
    console.log(arr.length); // print >> 3
    
    arr.length = 4;  
    console.log(arr); // print >> [ 0, 1, 2, <2 empty items> ]
    
    arr.length = 2;  
    console.log(arr); // print >> [ 0, 1 ]
  • 빈 인덱스는 실제로 메모리가 할당되지는 않음

  • 값이 존재하는 인덱스보다 길이를 줄이면 벗어나는 인덱스들은 실제로 삭제 됨

배열의 push() 메서드

  • push()메서드는 length 프로퍼티의 인덱스에 값을 저장한다.
  • length 값은 push()와 같은 표준 배열 메서드 동작에 영향을 줄 수 있다.

배열과 객체

var companyArr = ['SAMSUNG', 'SK', 'LG', 'NAVER', 'HYUNDAI'];
var companyObj = {
    '0' : 'SAMSUNG',
    '1' : 'SK',
    '2' : 'LG',
    '3' : 'NAVER',
    '4' : 'HYUNDAI'
}
console.log(companyArr[0]);
console.log(companyObj[0]); // companyObj['0']이란 문법이 맞지만, 자바스크립트 엔진이 []연산자 내에 숫자가 오면, 자동으로 문자열로 바꿔주어서 해당 코드도 맞다.

companyObj은 배열이 아니라 push()와 같은 표준 배열 메서드를 사용할 수 없다.
왜? 배열과 객체는 자신의 부모인 프로토타입 객체가 서로 다르기 때문이다.

  • 객체의 프로토타입 : Object.prototype 객체

  • 배열의 프로토타입 : Array.prototype 객체 (push(), pop() 등 포함)

    Array.prototype 객체의 프로토타입은 Object.prototype 객체

배열의 프로퍼티 동적 생성

  • 배열도 자바스크립트 객체라 동적으로 프로퍼티 추가가 가능하다.

  • 배열도 객체처럼 key:value 형태로 배열 원소, 프로퍼티 등이 있다.

    var company = ['SAMSUNG', 'SK', 'LG', 'NAVER', 'HYUNDAI'];
    
    company.wishList = 'LINE';  
    company.fintech = 'DANAL';
    
    console.dir(company);  
    /* print  
    [  
    'SAMSUNG',  
    'SK',  
    'LG',  
    'NAVER',  
    'HYUNDAI',  
    wishList: 'LINE',  
    fintech: 'DANAL'  
    ]  
    */
    

배열의 프로퍼티 열거

  • for in 문 : 불필요한 프로퍼티가 출력 될 수 있다.
  • for 문 : 정확히 배열의 요소만 출력한다.

배열 요소 삭제

  • delete
    • delete arr[1]로 배열 요소를 삭제하면, 해당 자리에 undefined가 할당된다. length도 변하지 않는다.
  • splice(start = 배열의 시작 위치, deleteCount = start포함하여 삭제할 요소 수, item = 삭제할 위치에 추가할 요소 ...)
    • splice(2,1); // 2번째 요소를 삭제한다.

Array() 생성자 함수

var desert = new Array(4);
var member = new Array('jun', 'ye', 'sun')

유사 배열 객체

To be continue.....

📖출처


송형주, 고현준 지음, 『인사이드 자바스크립트』, 한빛미디어(2014)