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

게시글

강좌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- 무단 전재 및 재배포 금지

댓글

12개의 댓글이 있습니다.
2달 전
질문이 있어요~~
약간... 어이없는 질문일 수 있는데요...
제가 배열에 해당하는 함수를 사용한 뒤 console.log로 합니다. 하지만 어떤 값은 배열에 사용된 함수의 결과값을 가져오지만 가끔 원래 배열의 값을 가져올 때가 있습니다.
그럴 때는 console.log() 안에 배열의 함수를 사용하면 가능합니다.
여기서..질문.....
왜 그런지 알고 싶은데... 혼자 곰곰히 생각 해 봤는데...
답변 글 보고 새로운 배열을 만드는 것은 안되는 것이다...
그럼.. 새로운 배열을 만들었다는 것을 확인하려면.. 어떻게 하나요???
(질문이 너무 길네요..)
2달 전
새로운 배열을 만드는 메서드를 외우시는 게 좋겠습니다. concat, slice, map, filter, reduce, every, some은 원래 배열은 가만히 두고, 원래 배열로부터 새로운 배열을 만듭니다. 나머지 메서드들은 원래 배열을 수정하거나 조회합니다.
5달 전
그리고... 배열.sort가 이해가 안됩니당 ㅜㅜㅜ

어떻게 동작하는건징...
5달 전
sort가 복잡하긴 한데요. 일단 간단하게는 return x-y이면 오름차순이고, return y-x면 내림차순이라고 생각하시면 됩니다(실제로는 더 복잡합니다).
5달 전
일단 그렇게 알고 있으면 되는걸까용???
5달 전
VScode에서 array.map을 테스트 해보려는데

const array = [1, 2, 3, 4, 5];

array.map(function (x) {
return x + 1;
});

이것만 입력해서는 출력이 안되어서

console.log(array);

를 추가하였는데 이상하게 1,2,3,4,5 그대로 나오네요

혹시 하고 크롬 개발자 도구에서 해보면 console.log로 출력하면 VScode처럼 1,2,3,4,5 나오고

const array = [1, 2, 3, 4, 5];

array.map(function (x) {
return x + 1;
});

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