Array 객체

여러 개의 항목을 하나의 변수에 저장해야할 때 배열을 자주 사용한다. 배열은 자바스크립트에서 자주 사용하는 자료형이므로 미리 프로토타입 객체로 만들어져 있다. 그리고 그 안에는 배열에 활용하는 많은 속성과 함수가 미리 정의되어 있다.

배열 만들기

1. 리터럴 표기법

배열에 저장할 자료를 쉼표로 구분해 대괄호 [ ]로 묶으면 배열을 선언할 수 있다.

var seasons = ["spring","summer","fall","winter"]
seasons[0] // "spring"
seasons[3] // "fall"

var addvalue = [] // 빈 배열 선언도 가능 

2. Array 객체의 인스턴스

자바스크립트 안에는 배열을 쉽게 만들고 다룰 수 있게 미리 Array 객체가 만들어져 있다.

var myArray = new Array();
var numbers = new Array("one","two","three")

numbers.length // 3
numbers[0] // "one"
numbers[1] // "two"
numbers[2] // "three"

/* for문을 사용해 요소들을 순서대로 접근하려면 인덱스 값을 0 ~ `length-1`까지 지정 */
for (var i=0; i < numbers.length; i++){
  console.log(numbers[i]);
} 

// one
// two
// three

Array 객체의 함수

/* [둘 이상의 배열 연결 concat()] */
  var nums = [1,2,3]
  var chars = ['a','b','c']

  nums.concat(chars)
  // (6) [1, 2, 3, 'a', 'b', 'c']
  chars.concat(nums)
  // (6) ['a', 'b', 'c', 1, 2, 3]
  // concat 함수는 새로운 배열을 만들기 때문에 기존의 배열에 영향 x 

/* [배열 요소 연결 join()] */
  nums.join() // 구분 기호 지정하지 않으면 쉼표로 구분 
  // '1,2,3'
  nums.join("-") 
  // '1-2-3'

/* [새로운 요소 추가 unshift(), push()] */
  nums.push(4,5)
  // 5 // 새 요소가 추가된 후 배열 요소의 개수 반환 
  nums.unshift(0) 
  // 6 // 새 요소가 추가된 후 배열 요소의 개수 반환
  nums
  // (6) [0,1,2,3,4,5] 

/* [요소 추출 shift(), pop()] */
  var study = ['html','css','js']

  study.pop()
  // "js" // 추출한 요소 반환 
  study.shift()
  // "html" // 추출한 요소 반환 

  study()
  // (1) ['css']

/* [원하는 위치의 요소 삭제 및 추가 splice()] */
// 1) 인수가 1개일 경우 
  var nums = [0,1,2,3,4,5]
  nums.splice(2) // 인덱스 2부터 끝까지 삭제 
  // (4) [2,3,4,5] // 삭제된 요소로 이루어진 배열 
  nums
  // (2) [0,1]

// 2) 인수가 2개일 경우
  var study = ['html','css','js','web']
  study.splice(2,1) //인덱스 2부터 1개 삭제 
  // ["js"] // 삭제된 요소로 이루어진 배열
  study
  // (3) ['html','css','web']

// 3) 인수가 3개일 경우
  study.splice(2,1,'python') //인덱스 2부터 1개 삭제하고 삭제한 자리에 새 요소 추가
  // ['web'] // 삭제된 요소로 이루어진 배열
  study
  // (3) ['html','css','python']

  study.splice(1,0,'java')
  // [] // 삭제한 요소가 없어서 빈 배열 반환 
  study
  // (4) ['html', 'java', 'css', 'python']

/* [원하는 위치의 요소 추출 slice()] */
  var colors = ['red','green','blue','white','black']

  colors.slice(2) // 인덱스 2부터 끝까지 추출 
  // (3) ['blue','white','black'] 

  colors.slice(1,4) // 인덱스 1부터 인덱스3까지 추출 
  // (3) ['green','blue','white']

  colors
  // (5) ['red','green','blue','white','black'] // 원래 배열은 변경 x