개발에 AtoZ까지

[ES6][JS] Javascript 배열 사용법과 관련 함수 본문

프론트엔드/JAVASCRIPT

[ES6][JS] Javascript 배열 사용법과 관련 함수

AtoZ 개발자 2021. 1. 27. 00:49
반응형

◆목표

Javascript 배열 사용법
- CRUD 방법(생성, 읽기, 수정, 삭제)
- 배열과 관련된 함수

1. Javascript 배열 생성

   1) 배열 생성(기본)

const data = [1, 2, 3, "dave", true];

   2) 배열 안에 객체 선언

       - {} 괄호는 JS에서는 객체 리터럴로 인지하고, 객체 또한 배열의 아이템으로 선언도 가능함

const data_object = [
  { name: "dave", age: 2 },
  { name: "dave", age: 2 }
];

 

  3) 2차원 배열

const arr = [
  [1, 2, 3],
  [4, 5, 6]
];

  4) New 태그 사용

       - JS는 배열을 객체로 인지하기 때문에 NEW 태그 사용이 가능함

const data1 = new Array();
//인덱스는 0번 부터 시작
data1[0] = 1;
data1[1] = 2;

 

2. Javascript 배열 읽기

  1) 기본 배열 접근

     - 인덱스로 접근하여 사용함 (인덱스 번호는 0번부터 시작함)

const data =[2,3,4];

console.log(data[1]);

  2) 객체로 구성된 배열  접근

const data_object = [
  { name: "dave", age: 2 },
  { name: "dave", age: 2 }
];

console.log(data_object[0].name);

  3) 2차원 배열  접근

const arr = [
  [1, 2, 3],
  [4, 5, 6]
];

console.log(arr[0][1]);

 

4. Javascript 배열 삭제

  1) 배열 삭제

     - JS에서는 배열을 삭제할 때 Splice(삭제를 시작할 인덱스 번호, 시작 위치에서 몇 개 삭제할 것인지 개수) 함수 사용

const data =[2,3,4];

console.log("삭제 전:"+data);
data.splice(1,1);
console.log("삭제 후:"+data);

5. Javascript 배열과 관련된 함수

  1) push()

     - 배열의 끝에 아이템을 추가함

     - 사용법: 배열. push(추가할 아이템)

const data =[2,3,4];

console.log("추가 전:"+data);
data.push(5);
console.log("추가 후:"+data);

  2) pop()

     - 배열의 끝에 아이템을 리턴해주고, 해당 아이템은 배열에서 삭제됨

     - 사용법: 배열.pop()

const data =[2,3,4];

console.log("실행 전:"+data);
let output = data.pop();
console.log("실행 후:"+data);
console.log("추출한 데이터:"+output);

 

  3) shift()

     - 배열의 첫 번째 아이템을 삭제하고, 뒤에 있는 아이템을 앞당김

     - 사용법: 배열.shift()

     - 출력: 실행 전: [2,3,4] -> 실행 후 : [2,3]

const data =[2,3,4];
console.log("실행 전:"+data);
data.shift();
console.log("실행 후:"+data);

  4) concat()

     - 배열 합칠 때 사용

     - 사용법: 배열A.cancat(배열B)

     - 출력:  실행 후 : [2,3,4,5,6,7]

const dataA =[2,3,4];
const dataB =[5,6,7];
const dataAB = dataA.concat(dataB);
console.log("실행 후:"+dataAB);

  5) join()

     - 아이템 사이에 특정 문자열을 넣어서, 새로운 문자열을 만드는 것

     - 사용법: 배열.join(문자열)

     - 출력:  실행 후 : 2'a'3'a'4

let dataA =[2,3,4];
dataA = dataA.join('a');
console.log("실행 후:"+dataA);

 

반응형
Comments