javscript #7. 배열

 

 

 

이번 게시글은 배열에 관해 설명해보겠습니다. 

회사에서 실무를 하다보니 배열이 정말 많이 쓰이는 것을 느꼈습니다!

 

그래서 배열은  알고계시면 나중에 유용하게 사용되니 잘 숙지해두세요!!

 

 

 

먼저 배열은

var a = [1,2,3]

이런 형식으로 사용됩니다. 

a라는 변수는 값 1,2,3을 가지고 있는 배열이죠. 

 

 

배열.length 

var array = [1, 2, 3, 4];
array.length; // 4

배열.length는 배열의 길이를 반환해줍니다. 

array의 길이는 4이므로 4가 반환됩니다. 

 

배열.join 

var array = [1, 2, 3];
array.join(); // "1,2,3"
array.join(':'); // "1:2:3"

배열.join은 배열을 구분해줍니다.

괄호안에 아무것도 입력하지 않으면 자동적으로 쉼표로 구분해주고

3번째 줄과 같이 구분자를 입력해주면 그에 따라 배열을 구분해줍니다. 

 

 

배열.concat 

var array = [1,2,3];
array = array.concat(4,5); // [1,2,3,4,5]
array.concat([6,7]); // [1,2,3,4,5,6,7]

배열.concat은 괄호안에 있는 값을 배열에 합쳐줍니다. 

concat(4,5)을 하여 4,5를 array 배열에 합치고, 합쳐진 배열을 또 concat([6,7]) 을 하여 [1,2,3,4,5,6,7]을 반환합니다. 

 

배열.reverse

var array = [1, 2, 3, 4];
array.reverse(); // [4, 3, 2, 1]

배열.reverse는 배열 값을 뒤집습니다. 

 

 

배열.push(항목)  / .pop()

var array = [1,2,3];
array.push(5); // 4
array; // [1,2,3,5]
array.pop(); // 5

배열.push(항목)은 항목을 배열에 추가 한 후 그 추가된 배열의 길이를 반환합니다. 

배열.pop()은 마지막 요소를 제거 한 후 제거된 요소를 반환합니다.  

 

 

배열.unshift(항목) / .shift() 

var array = [1,2,3];
array.unshift(0); // 4
array; // [0,1,2,3]
array.shift(); // [0]

배열.unshift(항목)은 배열의 맨 앞의 항목을 추가한 후 추가된 배열의 길이를 반환합니다. 

배열.shift()는 맨 앞의 항목을 제거한 후 제거된 요소 값을 반환합니다. 

 

 

배열.map(function(값, 자릿수){조건}) / 배열.forEach(function(값, 자릿수){조건})

var array = [1,2,3];
array.map(function(x) {
  return x+1;
}); // [2,3,4]
array.forEach(function(x, i) {
  alert(x);
});

이 두 배열들은 배열의 하나하나의 항목들을 반복하면서 조작하는 함수입니다. 

map()과 forEach() 매개변수로 함수가 각각 들어가 있는데 이 함수안에서 배열의 항목들을 조작할 내용을 적습니다.

 

array.map의 경우 배열[1,2,3]을 차례로 돌아가면서 1씩 증가시키는 것이고, 

array.forEach의 경우 alert문을 사용하여 차례대로 배열의 값을 띄우는 것입니다. 

 

map과 forEach의 차이점은 map은 바뀐 새 배열을 반환하지만 , forEach는 새 배열을 반환하지 않습니다! 

 

실무에서 사용할 때 map을 좀 더 자주 썼던 것 같습니다.

 

 

 

배열.filter(function(항목){조건})

var array = [1,2,3,4,5];
array.filter(function(x) {
  return x % 2 === 0;
}); // [2,4]

배열.filter는 어떤 조건을 사용하여 해당되는 배열만을 찾고 싶을 때 사용합니다. 

function안에 특정 조건을 적어 그 조건에 해당하는 배열을 찾아옵니다. 

 

위 코드를 보면 배열[1,2,3,4]중 값이 짝수인 것만 찾아오겠다는 filter 조건을 걸어놨습니다. 

따라서 [2,4] 값만 배열에서 출력이 됩니다. 

 

filter와 비슷하게 find도 있는데 find는 조건에 해당되는 맨 처음 배열만을 출력합니다. 

 

 

배열.sort(function(이전 값, 다음 값){조건})

var array = [5,2,3,4,1];
array.sort(function(x,y) {
  return x - y;
}); // [1,2,3,4,5]

배열.sort()는 배열을 정렬해줄 때 사용합니다. 

 

위 코드는 배열 [5,2,3,4,1]을 두개씩 차례대로 비교해가며 자동으로 정렬해줍니다. 

따라서 정렬된 [1,2,3,4,5]가 출력됩니다. 

 

 

 

여기까지 기본적으로 자주 쓰이는 배열들에 대해서 적어보았습니다~^~^~

 

참고: 제로초