배열과 메소드 1

배열이란?

• 자바스크립트의 배열(Array)은 여러 값을 하나의 자료구조에 저장 할 수 있는, 순서가 있는 리스트형 객체
• 배열은 제로 인덱스 기반으로, 배열의 각 값은 인덱스를 통해 접근
• 배열은 큐(queue) 자료구조와 (시작과 끝이 구분이 없는 도넛 모양)
  스텍(stack) 자료구조에 모두 활용할 수 있다.
• 다양한 데이터 타입을 함께 저장
• 자바스크립트의 배열 특징 중 하나는 동작 배열 이라는 것이다.
  • 동작 배열=>
    • 배열의 크기를 미리 지정하지 않아도 요소를 추가하거나, 인덱스에 값을 할당하면 배열의 크기가 자동으로 확장되고,
      삭제시 축소된다.
    • 해시테이블과 같은 자료 구조로 구현되어 배열의 요소들이 메모리 상에서 연속적이지 않아도 된다.
• 배열의 끝에서 추가/삭제는 빠른 연산이 되지만, 앞쪽에서의 추가/삭제는 연산이 느리다.
  
  

마지막 요소외의 추가/삭제는 배열 크기의 재연산/인덱스 재할당이 필요하다

 

1. 배열의 생성

• const arr = [];
  arr=['사슴', '코알라','늑대,'여우','호랑이'];
  or
  const  arr=['사슴', '코알라','늑대,'여우','호랑이'];
• const arr = new Array() 문법 사용
  • const arr = new Array( '사슴', '코알라','늑대,'여우','호랑이' ) ;
  • const arr = new Array(2) : 배열의 길이만 선언되고 값은 undefined
• 다차원 배열 (multidimensional array)
  • const arrMult = [
        ['사슴','코알라','노루'],
        ['호랑이','사자','늑대'],
    ]

 

2. 배열의 인덱스

• 배열의 인덱스는 객체의 key(property name)과 같은 역할이다.
• 배열의 인덱스는 0번부터 시작한다.
• 배열의 값에 접근하는 것은 대괄호 [ ] 표기법을 사용한다.
  • arr[2] => 늑대
  • arrMult[1][2] => 늑대
• 배열의 인덱스로 접근하여 요소를 직접 수정 할 수 있다
  arr[2]=곰;  =>출력 : 사슴, 코알라, 곰, 여우, 호랑이

 

3.배열의 메소드

 3-1. 배열의 삭제/추가/ 수정

• shift() : 배열의 첫 요소를 삭제
• pop() : 배열의 마지막 요소를 삭제
• unshift() : 배열의 첫 요소로 값 추가
• push() : 배열의 마지막 요소로 값 추가  
• splice(startIndex, deleteCount, item)
  1. splice 를 사용한 배열의 삭제 : 삭제하고 싶은 인덱스로 부터 전달받은 갯수까지 삭제한다.
     
     • 배열의 첫번째 요소 삭제 : splice(0,1)
     • 배열의 마지막 요소 삭제 : splice(arr.length -1, 1)

let arr=['사슴', '코알라','늑대','여우','호랑이'];

arr.splice(0,1);
//첫번째 1 : 삭제하려는 인덱스 번호, 두번째 1 : 삭제할 갯수

/*-- 출력
 코알라,늑대,여우,호랑이
*/

arr.splice(2);
//첫번째 1 : 삭제하려는 인덱스 번호, 두번째 : 갯수를 생략할 경우 인덱스 뒤 모두 삭제

/*-- 위의 출력값을 기준으로 
코알라,늑대
*/

        

            2. splice 를 사용한  배열의 추가 

//** 추가만 하기

let arr=['사슴', '코알라','늑대','여우','호랑이'];

arr.splice(0,0, '곰');
/*
세번재 파라미터 값을 입력 하면 추가 된다.
- 0 번 인덱스에
- 0 삭제 되는 것 없음
- 대신 '곰'을 추가해
*/

/* 출력

곰, 사슴, 코알라, 늑대, 여우, 호랑이
*/

//** 삭제와 추가 동시에 하기

let arr=['사슴', '코알라','늑대','여우','호랑이'];

arr.splice(0,1, '곰', '사자');
/*
세번재 파라미터 값을 입력 하면 추가 된다.
- 0 번 인덱스에
- 1 개를 삭제하고
- 대신 '곰'과 '사자'를 추가해 => 연속된 파라미터를 넣을 수 있다.
*/

/* 출력

곰,사자, 코알라, 늑대, 여우, 호랑이
*/

 

        3. splice 를 사용한  배열의 수정

let arr=['사슴', '코알라','늑대','여우','호랑이'];

arr.splice(1,1, '곰');
/*
세번재 파라미터 값을 입력 하면 추가 된다.
- 1 번 인덱스 부터
- 1 개를 삭제하고
- 대신 '곰'을 추가해
*/

/* 출력 
사슴,곰,늑대,여우,호랑이
=> 코알라가 삭제 된 자리에 곰이 추가 됨. 결과적으로 1번 인덱스를 수정한 것이 된다.
*/

//여러개 수정
let arr=['사슴', '코알라','늑대','여우','호랑이'];

arr.splice(1,3, '곰','치타','토끼');
/*
세번재 파라미터 값을 입력 하면 추가 된다.
- 1 번 인덱스 부터
- 3 개를 삭제하고
- 대신  '곰','치타','토끼'를 추가해
*/

/* 출력 
사슴,곰,치타,토끼,호랑이
*/

 

  3-2. 배열에서 특정 값 찾기 ( indexOf / lastIndexOf )

• 배열에 포함 되어 있으면 값을 가지고 있는 인덱스 번호가 리턴 되고, 없으면 -1이 리턴 된다. 
  arr.indexOf('값') 으로 사용

let arr=['사슴', '코알라','늑대','여우','호랑이'];

console.log(arr.indexOf("코알라")'

/* 출력 
1
*/

document.write(arr.indexOf('사자'));

/* 출력 
-1
*/

  3-3. 배열에서 특정 값이 있는지 확인하기 ( includes )

• 값이 있는지 확인 후  true / false 로 리턴

let arr=['사슴', '코알라','늑대','여우','호랑이'];

console.log(arr.includes("코알라")'

/* 출력 
true
*/

document.write(arr.includes('사자'));

/* 출력 
false
*/

 3-4. 배열 뒤집기 ( reverse )

• 배열의 순서를 뒤집음

let arr=['사슴', '코알라','늑대','여우','호랑이'];


console.log(arr.reverse());

/* 출력 
호랑이,여우,늑대,코알라,사슴
*/

 

 3-5. 배열의 길이

• length : 배열의 길이를 반환
• 배열의 길이를 자를 수 있음 
  - 짧아진 배열의 길이를 되돌려도 자르면서 없어진 값은 되돌릴 수 없음.

See the Pen Untitled by hwa (@ubdrmgbu-the-lessful) on CodePen.

 

3-6. 배열의 순환

• for..of
  현재 요소의 인덱스는 얻을 수 없고 값만 얻을 수 있다.
• 객체 메소드인 for .. in 을 사용 할 수 있지만 권장하지 않는다.
  • 배열이 아닌 객체에 최적화된 메소드이기 때문에 객체에 사용하는 것 대비 10~100배 정도 느림
  • 모든 프로퍼티를 대상으로 순회하기 때문에 키가 숫자가 아닌 프로퍼티도 순회의 대상이 된다.

See the Pen Untitled by hwa (@ubdrmgbu-the-lessful) on CodePen.

 

• forEach
  
  • 아규먼트로 콜백 함수를 작성하면 콜백 함수의 첫번째 파라미터로 배열의 값을 순서대로 하나씩 전달하면서 순회함.
  • 파라미터로 index 와 반복중인 배열(arr) 자체를 사용할 수 있다.
  • return 값이 없기 때문에 배열의 반복 작업만이 필요할 경우 사용해야한다.

See the Pen Untitled by hwa (@ubdrmgbu-the-lessful) on CodePen.

 

• map
  
  • 메소드의 호출 결과로 return 문을 사용해서 새로운 배열을 리턴하여 변수에 담을 수 있기 때문에, 반복 작업을 통해 새로운 배열이 필요할 경우에 사용한다.
    .

See the Pen Untitled by hwa (@ubdrmgbu-the-lessful) on CodePen.

 

• forEach와 map  사용시 주의점
  • 두 메소드의 최대 반복 횟수는 메소드 처음 호출시 메소드의 갯수이다.
  • 메소드가 실행 되면서 배열의 길이가 줄어들 경우 반복 횟수가 함께 줄어든다.

See the Pen Untitled by hwa (@ubdrmgbu-the-lessful) on CodePen.

 

참조 : 배열