이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌11 - JavaScript - 2년 전 등록 / 일 년 전 수정

배열(Array)

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요. 이번 시간은 배열에 대해서 알아보겠습니다. 

배열

배열은 정말 많이 쓰이는 만큼 꼭 메소드에 대한 숙지가 필요합니다. 물론 억지로 외우는 게 아니라 필요한 함수들을 사용하면서 자연스럽게 외우는 것이 좋죠. 배열은 편리하고 성능도 좋은 메소드를 많이 제공하므로 얼마나 많은 메소드를 알고 있냐가 프로그래밍의 효율성을 좌지우지합니다. 그리고 자바스크립트 버전이 업그레이드 됨에 따라 점점 더 고차원적인 함수들이 추가되고 있습니다.

배열.length

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

문자열처럼 배열의 길이를 알려줍니다. 배열의 길이는 배열에 요소가 추가되고 제거됨에 따라 자동으로 바뀝니다.

배열.join(구분자)

var array = [1, 2, 3];
array.join(); // "1,2,3"
array.join(':'); // "1:2: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]

배열을 합친 새 배열을 반환합니다.

배열.reverse()

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

원래의 배열을 뒤집어버립니다.

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

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

배열의 뒤에 추가하거나 뺍니다. 기존의 배열이 변합니다. push는 push한 후 변한 배열의 길이를 반환하고, pop은 마지막 요소를 제거한 후 그 요소를 반환합니다.

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

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

배열의 앞에 추가하거나 뺍니다. 기존의 배열이 변합니다. 마찬가지로 unshift는 변한 배열의 길이를, shift는 shift된 항목을 반환합니다.

배열.splice(시작점, 지울 개수, 넣을 것)

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

pop, shift 같은 것은 배열의 처음 또는 끝만을 뺄 수 있지만, splice는 중간도 뺄 수 있습니다. 그러면서 동시에 그 자리에 무언가를 넣을 수도 있습니다. 예시를 보면 2번째 자리부터 한 개를 지우고 그 대신에 숫자 5를 넣으라고 되어있습니다. 그래서 2번째 자리(3)가 없어지고 5가 들어갑니다. 없애지는 않고 추가만 하고 싶으면 splice(시작점, 0, 넣을 것) 하면 아무것도 없어지진 않고 추가만 됩니다.

배열.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 + ':' + i);
});

배열의 항목들을 반복하면서 조작하는 함수입니다. map과 forEach의 매개변수로 함수가 들어가는데 함수 안에 배열의 항목들을 어떻게 조작할 지 적어주면 됩니다. 예시에서는 각각 1을 더하는 것과 alert하는 조작을 했습니다. map과 forEach의 차이점은 map은 바뀐 새 배열을 반환하지만, forEach는 반환하지 않습니다. 따라서 forEach보다는 map이 활용성이 더 높습니다.

배열.reduce(function(이전값, 현재) { 조건 }), 배열.reduceRight

var array = [1, 2, 3, 4, 5];
array.reduce(function(prev, cur) {
  return prev + cur;
}); // 15

배열을 왼쪽부터 조건을 적용해 하나의 값으로 만듭니다. 위의 코드의 조건은 이전 값과 현재 값을 더한 값을 반환하는 거죠? 왼쪽 두 개부터 시작합니다. 이전 값은 1이고 현재 값은 2라서 더하면 3이 됩니다. 그 값이 다시 이전 값이 됩니다. 이제 이전 값은 3이고 현재 값은 3이라서 더하면 6이되고, 다음에는 이전 값이 6이고, 현재 값은 4가 되어서 더하면 10, 마지막으로 이전 값이 10이고 현재 값이 5라서 더하면 15가 됩니다. 최종 결과를 반환합니다. 간단히 말하면 조건에 따라, 1 + 2 + 3 + 4 + 5를 한 겁니다. 오른쪽부터 줄여가고 싶으면 자매품, reduceRight 함수를 사용하시면 됩니다.

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

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

필터링한다는 말을 들어보셨죠? 특정 조건에 해당하는 배열만을 걸러내 새 배열로 만듭니다. 역시 매개변수로 있는 함수 안에 조건을 적으면 됩니다. 여기서는 조건이 항목을 2로 나눈 나머지가 0인 것(짝수)만 걸러내라고 되어있네요.

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

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

배열을 특정 조건에 따라 정렬합니다. 조금 복잡합니다.

배열.indexOf(찾을 것), 배열.lastIndexOf(찾을 것)

문자열처럼 배열에서 찾습니다. 여러 개가 있더라도 처음으로 찾은 위치만을 알려줍니다. lastIndexOf는 뒤에서부터 찾습니다.

배열.every(function(항목) { 조건 }), 배열.some(function(항목) { 조건 })

var array = [1, 3, 5, 7, 9];
array.every(function(i) {
  return i % 2 === 1;
}); // true
array.every(function(i) {
  return i < 9;
}); // false
array.some(function(i) {
  return i === 9;
}); // true

최근에 추가된 함수인데 생각보다 유용해서 소개합니다. 각각 배열의 모든 항목 또는 일부 항목이 true면 true를 반환합니다. 즉 every는 모든 항목이 조건을 만족하면 true, some은 하나의 항목이라도 조건을 만족하면 true를 반환입니다. every의 첫 예는 array의 모든 값이 다 홀수이기 때문에 true가 됩니다. 하지만 그 다음 예는 i < 9를 다 만족하지는 않기 때문에 false가 되죠. some의 예시에서는 배열 요소 중 9인 게 하나 이상 있기 때문에 true를 반환합니다.

Array.isArray(값)

Array.isArray('array?'); // false
Array.isArray(['array?']); // true

Array 객체 자체의 static 메소드입니다. 배열인지 아닌지 확인해주는 역할을 합니다. 생각보다 자주 쓰이니 기억해둡시다.

다음 시간에는 Window 객체에 대해 알아보겠습니다.

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

8개의 댓글이 있습니다.
한 달 전
array.concat([6,7]); // [1,2,3,4,5,6,7]
array.concat(6,7); // [1,2,3,4,5,6,7]
둘 다 똑같이 반환되는데 항상 () 안에 []배열을 넣어야하는 건가요?
한 달 전
아뇨 두 방식 다 사용해도 된다는 뜻입니다
일 년 전
신세가 많습니다.
일 년 전
배열.sort(function(이전 값, 다음 값) { 조건 })
여기서 조건을 x-y로 해보고, x+y로 해보고, x,y로 해봐도 반환되는 값은 항상 [1, 2, 3, 4, 5]이던데요. 혹시 이게 어떤 알고리즘인지 좀 알려주실 수 있으신가요...??ㅠ
일 년 전
이건 return 값이 음수냐 양수냐에 따라 정렬하는 겁니다. 반대로 나오게 하고 싶다면 y-x 하시면 됩니다.
일 년 전
아하! 감사합니다. 간만에 들어와서 질문 폭탄 죄송합니다~
일 년 전
한창 여기서 공부하다가 업무에 시달리느라 공부 못하다가 다시 정독 중이네요...
예제중에 array.concat([6,7]); // [1,2,3,4,5,6,7]
이건 아무리해봐도 [1, 2, 3, 6, 7]로 반환되던데
바로 위의 예제인 array.concat(4,5);의 값을 저장하고, [1,2,3,4,5,6,7]를 반환해야 정상인건가요?
일 년 전
아 실수했네요 수정하겠습니다! concat은 기존 배열을 수정하지 않고 새 배열을 반환합니다
일 년 전
늘좋은강의 감사합니다, 그런데 자바스크립트강의를 보며 문득 드는생각이 math,array같은 함수의 메소드 들을 외워야 하나요?? 너무양이 많은것같은데 영어단어 외우듯 외워야할지 궁금합니다.
일 년 전
자주 쓰다 보면 저절로 외워집니다~ 일부러 외우려 하실 필요는 없어요.
일 년 전
pop은 pop된 항목을 반환합니다. 에서 pop된 항목이라는게 어떤걸 의미하는지 잘 모르겠습니다..ㅠ
일 년 전
pop은 영어로 튀어나온다는 뜻이죠! 자바스크립트에서는 배열의 마지막 요소가 튀어나오는데요. 좀 더 이해하기 쉽게 고쳤습니다!
일 년 전
map같이 내부에 리턴값이 있는 함수들은 루프당 return문의 각 항목들을 모아서 배열로 반환하나요? 일반적인 절차지향 프로그램언어에서는 return이 나오면 해당 함수가 종료해서요 조금 생소하네요.
일 년 전
모아서 반환합니다. return을 하면 map 안에 인자로 넣었던 function이 종료되는 것이고, sort 자체는 종료되지 않습니다.
일 년 전
아 그렇군요 피드백 감사해요ㅎㅎ
일 년 전
나중에 prototype 배우시면 map을 직접 구현할 수도 있어요!
일 년 전
Array.isArray 가 자주 쓰인다고 하셨는데 어떤 경우에 쓰이는지 간단한 예시를 들어주실 수 있나요?
일 년 전
어떤 변수가 배열인지 아닌지 확인할 때 쓰입니다. 만약 변수 x가 있다면 Array.isArray(x)를 하면 x가 배열이면 true를 아니면 false를 return합니다