[생활코딩] JavaScript 배열

 

 

배열 Array

프로그래밍을 하면서 데이터가 많아짐에 따라 코딩은 너무 복잡해지게 되고, 사람이 감당할 수 없는 소프트웨어가 되어버렸다.
따라서 연관된 데이터를 잘 정리정돈하는 일종의 수납상자 같은 것이 필요해졌는데,

그것을 배열(array) 이라고 한다.

배열(array) 이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다.
즉, 여러 개의 데이터를 담기 위한 그릇의 역할을 하고 일반적으로 변수에 저장되어 쓰인다.

배열 내에 있는 하나 하나의 데이터를 원소(element)라 하고, 그것을 식별하는 식별자를 주로 색인(index) 라 칭한다.

index는 첫 번째 원소는 0이고, 이후 1,2,3.. 순서대로 매겨진다.

 

 

배열 활용하기

 

- 배열 작성법 : var 변수이름 = [ '데이터1','데이터2']
- 배열의 데이터 불러오는법 : 변수이름[index]

예시)

var member = ['egoing', 'k8805', 'sorialgi'] 

member[0]; // 'egoing'
member[1]; // 'k8805'
member[2]; // 'sorialgi'

 

- 배열+반복문

예시)

var members = ['egoing', 'k8805', 'sorialgi']; 

function get_members(){ 
  var result = 'We are ';
  for(var i = 0; i < members.length; i++){
  	result = result + members[i] + ' '
  }
  return result;
} 

get_members();  // "We are egoing k8805 sorialgi "

배열의 진가는 반복문과 결합했을 때 나타난다. 
반복문으로 리스트에 담긴 정보를 하나씩 꺼내서 처리할 수 있기 때문이다. 
즉, 연관된 데이터를 하나씩 꺼내어 반복하는 작업을 자동화할 수 있기 때문에 배열과 반복문은 환상의 콤비이다.

 

 

- DOM과 배열

 

예시)

 var alist = document.querySelectorAll('a');
 var i = 0;
 
 function searchtag(){
 	while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
    }
 }
 
 searchtag();

 

모든 a태그에대한 변수를 alist라고 지정하고, a태그에 css를 적용해보자.

콘솔 창에 document.querySelectorAll('a') 라고 치면 예를 들어 NodeList(4) [a, a, a, a] 라고 

해당 웹페이지의 모든 a태그들이 뜨는데, 이는 배열의 형태이므로 배열과 반복문에 활용할 수 있다.

 

 

배열 method

 

배열을 담은 변수는 여러 method를 사용할 수 있다.

push, splice, reverse, sort 등이 있고 각 사용방법은 MDN을 참고하자.

 

 

" 데이터가 바뀌었다고 로직을 바꿔야하는 것은 창피한 일이다.
데이터의 변화에 따라 결과가 유연하게 바뀌어야한다. "