[Javascript] 배열(Array)선언, 추가, 삭제, 관리방법

안녕하세요? ^^원주남자입니다.

 

배열한 사용하는 몇가지 예제들을 통해서 배열을 다루는 방법을 알아볼게요~

먼저 배열은 어떻게 선언을 할까요?

※1. 배열의 선언.

  var array_test1 = [];
  var array_test2 = ["1","2","3"];
  var array_test3 = new Array();

3개의 배열을 선언했는데요.

먼저 array_test1은 중가로만을 사용하여 내용이 없는 배열을 만들었고요.

2번째 array_test2같은 경우는 배열의 선언뿐만아니라 중가로내에 value까지 미리 정의를 해두었습니다.

3번째는 Array()라는 생성자를 통해서 배열을 선언하였고요.

 

그럼 배열에 값을 한번확인해볼까요?

확인방법은 console.log 라는 콘솔명령어를 사용하는 것인데요. 제 개인적으로 크롬브라우저에서 개발하는 것을 추천해드립니다. 빠르고 다양한확장성, 표준화, 깔끔(?)하게 돌아가는 것 같습니다ㅋㅋ;

  var array_test1 = [];
  var array_test2 = ["1","2","3"];
  var array_test3 = new Array();

  console.log("1="+array_test1);
  console.log("2="+array_test2);
  console.log("3="+array_test3);

너무 당연하게 1, 3번 배열은 데이터가 없는 것을 확인하였습니다~

 

제 개인적으로는 1, 2번의 방법을 주로사용하고 있는데요. 이유는 new Array();라고 입력해야하는데 new aray라고 쓰던가 new arry라고 쓴다거나해서 시간을 날린적이 여러번있어서 쳐다보지도 않습니다 ㅠ;

성능상의 차이도 사용해본 경험으로는 미비하다고 생각됩니다.

 

이제 선언후에 배열에 데이터를 넣는 방법을 확인해볼게요.

※2. 배열의 데이터추가.

  var array_test1 = [];
  var array_test2 = ["1","2","3"];
  var array_test3 = new Array();

  array_test1.push("4");
  array_test2.push("4");
  array_test3.push("4");

  console.log("1 = "+array_test1);
  console.log("2 = "+array_test2);
  console.log("3 = "+array_test3);

위에 선언한 배열을 그대로 활용하였는데요. push라는 메소드를 통해서 4라는 데이터를 모든배열에 각각 넣었습니다.

결과는?

아까 유일하게 데이터가 있던 2번 배열에는 제일 끝에 4라는 데이타가 들어왔구요.

아무것도 없던 1, 3배열은 드디어 4라는 데이터를 유일하게 가지게 되었네요.

 

만약 2번배열 제일앞에 0이라는 데이터를 넣고 싶으면??

unshift()를 사용하면 됩니다.

기존 위에서 활용하는 코드에 그대로 활용해서 보시면..

  var array_test1 = [];
  var array_test2 = ["1","2","3"];
  var array_test3 = new Array();

  array_test1.push("4");
  array_test2.push("4");
  array_test3.push("4");

  array_test2.unshift("0");

  console.log("1 = "+array_test1);
  console.log("2 = "+array_test2);
  console.log("3 = "+array_test3);

0이 제일앞에 들어온 것이 보이네요 ㅎㅎ;

이번에는 조금 응용해서 배열하나에 1~100까지 넣어 볼게요~

일일이 ...push("1")..push("2")라고 칠 수는 없으니 for문을 간단하게 활용해볼게요 ㅎㅎ

 

  var array_test = [];
 
  for(var i=1;i<101;i++){
	array_test.push(i);
  }

  console.log("array = "+array_test);

아주 손쉽게 넣었네요 ㅎㅎ!

 

 

 

※3. 배열의 데이터삭제.

사실데이터 넣는 것은 push, unshift를 사용하여 넣으면 되는데 ..(물론 경우에 따라 다르겠지만요ㅠㅠ)

삭제라는 것은 어떤 것을 지우고 지우고 나면 그자리에는 어떤 데이터가 들어와야하는가?

 

그냥 단순히 비어져 있어야하는가?

지우자마자 사용자가 원하는 데이터로 대체되어야 하는건가?

바로 뒤에 있던 데이터부터 그 자리를 채워야하는 건가?

...라는 고민을 해야합니다~

 

사실 제가 개발을 많이 안해봤지만 일반적으로는 3번째에 언급했던게 많이 나오지않았나 싶습니다~

먼저 배열의 제일 처음과 끝의 데이터를 지우는 것 부터 볼게요ㅎㅎ

1~10까지데이터가 있는 배열이 있을 경우입니다.

  var array_test = [];
 
  for(var i=1;i<11;i++){
	array_test.push(i);
  }
  console.log("array = "+array_test);

  array_test.pop(); //배열의 마지막 데이터 제거 & 데이터 return 받아서 삭제된 데이터 확인도가능
  console.log("array = "+array_test);
  
  array_test.shift(); //배열의 처음데이터 삭제
  console.log("array = "+array_test);

뭐 크게 어려운게 없죠? pop은 뒤에 데이터를 지우고 반환도 가능!

shift는 제일 처음데이터 삭제~ 처음데이터가 지워지고 2부터 배열0번자리가 대체되는 것도 확인이 가능하네요 ^^

그러면 ???? 가운데 데이터5가 지우고 싶으면 어떻게 해야할까요?

 

splice라는 메소드를 사용하면 됩니다.

splice(제거할위치, 제거건수)라고 생각하시면되는데 기본적으로 삭제를 원하는 데이터가 어디에있는 지 확인이 되어야겠죠?

위 콘솔이미지 마지막 줄기준으로 일단 5는 3번째자리에 존재하죠?

  var array_test = [];
 
  for(var i=1;i<11;i++){
	array_test.push(i);
  }
  console.log("array = "+array_test);

  array_test.pop(); //배열의 마지막 데이터 제거 & 데이터 return 받아서 삭제된 데이터 확인도가능
  console.log("array = "+array_test);
  
  array_test.shift(); //배열의 처음데이터 삭제
  console.log("array = "+array_test);

  array_test.splice(3,1);
  console.log("array = "+array_test);

splice(3,1) 3번째 자리 1개가 지워졌습니다.

 

delete라는 메소드로 지우는 방법도 있는데 그 방법을 사용하게 되면 배열의 Length가 유지/삭제된 자리는 비워져 있는 상태가 됩니다. 확인해볼까요?

  var array_test = [];
 
  for(var i=1;i<11;i++){
	array_test.push(i);
  }
  console.log("array = "+array_test);

  array_test.pop(); //배열의 마지막 데이터 제거 & 데이터 return 받아서 삭제된 데이터 확인도가능
  console.log("array = "+array_test);
  
  array_test.shift(); //배열의 처음데이터 삭제
  console.log("array = "+array_test);

  delete array_test[3];
  console.log("array = "+array_test);

보이시죠 ㅎㅎ; 경우에 따라서 이런 방식이 필요한 개발도 있을 것입니다~