[새싹 프론트엔드] JS 배열

배열이란?

여러 개의 원소들을 연속적으로 저장하여 전체를 하나의 단위로 다루는 데이터 구조

작성방식

let array = ["값1", "값2", "값3"];

대괄호를 만들고 그 안에 값을 입력한다
값이 여러개일 경우 쉼표로 구분한다
배열 안에는 숫자, 문자열, 배열 모두 들어갈 수 있다

1. 배열의 값에 접근하기

  array[인덱스 번호]

↑ 인덱스 번호는 0번부터 시작!

  array =  ["값1", ["값2-1", "값2-2", "값2-3"], "값3"];
  
  → array[0] > "값1"
  → array[1] > ["값2-1", "값2-2", "값2-3"]
  → array[1][0] > "값2-1"
  → array[1][1] > "값2-2"
  → array[1][2] > "값2-3"
  → array[2] > "값3"

2. 배열의 길이 구하기

length

배열의 길이값을 구할 수 있다

배열이름.length;

ex)
> let array = ['사과', 160, '딸기', [1,2,3]];

> array.length
< 4

3. 배열에 원소 추가/제거 하기

push( ), unshift( ) / pop( ), shift( )

1) 원소 추가하기

1-1) push() → 배열 끝에 새로운 원소 추가
1-2) unshift() → 배열 앞에 새로운 원소 추가 

작성방식

배열이름.push(추가할 원소);  
배열이름.unshift(추가할 원소);

2) 원소 제거하기

2-1) pop() → 배열의 마지막 원소를 제거
2-2) shift() → 배열의 첫 번째 원소를 제거

작성방식

배열이름.pop( );
배열이름.shift( );

✔️ 참고 ✔️

스택(stack)

• 맨 처음에 추가된 원소가 제일 마지막에 제거 (Last In First Out, LIFO)
  
  ex) 프링글스 과자
  
  
  

큐(queue)

• 맨 처음에 추가된 원소가 제일 먼저 제거 (First In First Out, FIFO)
• 데이터를 차례대로 입력하고, 입력된 순서대로 하나씩 꺼내서 처리하기 위해 사용
  
  ex) 프린트기
  
  
  
  
  
  

4. 배열 결합하기

concat( )

2개 이상의 배열을 하나의 배열로 합친다
원본 배열은 유지된다

작성방식

첫번째배열.concat(두번째배열);  
첫번째배열.concat(두번째배열, 세번째배열, ... , n번째배열);  

ex)
> let array1 = ["사과", 160 ];
> let array2 = ["딸기", [1,2,3]];


> array1.concat(array2);
< ['사과', 160, '딸기', [1,2,3]];

5. 배열 원소의 index값 찾기

indexOf( )

원하는 배열 원소의 index값을 찾아낸다

작성방식

배열이름.indexOf("찾을원소")

ex)
> let array = ["사과", "딸기", "포도", "바나나"];

> array.indexOf("딸기");
< 1

> array.indexOf("파인애플");
< -1

6. 배열을 문자열로 만들기

join( )

배열에 포함된 모든 원소를 하나의 문자열로 생성

작성방식

배열이름.join( );
배열이름.join( "구분자" );

ex)
> let array = ["사과", "딸기", "포도", "바나나"];

> array.join("랑, ");
< 사과랑, 딸기랑, 포도랑, 바나나

---

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 3주차 블로그 포스팅