정말 프로그래밍에서 자주 사용하는 배열에 대해 알아볼게요.
배열은 우리가 스크립트로 다중 값을 핸들링해야 할 때 반드시 필요한 요소입니다.
아마 배열에 대해 잘 아시는 분도 있고 전혀 모르시는 분도 있을 거라 생각합니다.
배열은 객체(Object)와 마찬가지로 여러 가지 값을 저장할 수 있는 데이터 주머니라고 이해하시면 될 거 같아요. 다만 객체와 다른 점은 배열에 저장된 값에 접근할 때 객체처럼 Key : Velue 형태가 아닌 값이 저장된 인덱스(순서)로 접근을 한다는 것이 차이점일 거 같습니다.
그럼 좀 더 자세히 객체에 대해 알아볼게요.
배열은 하나의 변수에 여러 개의 값을 가져와서 사용해야 할 경우 사용합니다. 배열 Array 함수를 이용하여 사용하게 되며 배열의 첫 번째 값은 0부터 시작됩니다. (사실 컴퓨터는 모두 0부터 시작됩니다.)
배열 선언법은 2가지입니다.
- const 변수명 = new Array();
- const 변수명 = Array();
두자기 모두 동일한 결과를 가져오지만 표준 문법은 const 변수명 = new Array()가 맞습니다.
배열을 선언하고 변수에 [](대괄호)를 붙여주면 배열이 선언되게 됩니다. 값을 배정할 때 역시 하나씩 배열을 나눠서 적용할 수도 있고 한 번에 선언과 동시에 할 수도 있습니다.
방법 1 : 배열 값을 한번에 선언
const 변수 = [ '철수', '영희', '영숙' ];
방법 2 : 배열값을 나누어서 선언
변수[0] = '철수';
변수[1] = '영희';
변수[2] = '영숙';
그럼 간단히 배열에 대해 알아봤으니 예제 함수로 배열에 값을 넣고 그 값을 다시 호출하는 함수를 실행해 볼게요.
function example(){
const exam = new Array();
exam[0] = '철수';
exam[1] = '영희';
exam[2] = '영숙';
for ( var i = 0; i < 3; i++ ) {
alert(exam[i]);
}
alert(exam[0]); //결과 : 철수
alert(exam[1]); //결과 : 영희
alert(exam[2]); //결과 : 영숙
}
위의 예제를 실행하게 되면 반복문을 돌면서 배열에 저장된 0부터 2까지 순차적으로 값이 호출되는 걸 알 수 있습니다.
배열의 이점은 많은 값을 담을 수 있다는 것도 있지만 값을 추가하거나 삭제, 정렬 값을 변경 등이 자유롭습니다.
아래 예제는 한 번에 값을 실행하지 말고 하나씩 실행해 보면 이해하시는데 조금 더 도움이 될 거예요.
감사합니다.
var arr1 = ["월","화","수","목","금","토","일"];
var arr2 = ["a","b","c","d"];
// 배열 데이터를 역순으로 반환. [결과:일,토,금,목,수,화,월]
document.write(arr1.reverse());
// 1번 인덱스부터 2번 인덱스 전까지 반환. 인텍스 처음은 0부터 시작. 마지막은 length-1 [결과:수,목,금]
document.write(arr1.slice(2,5));
// 데이터를 정렬(오름차순,acb..,ㄱㄴㄷㄹ..) [결과:금,목,수,월,일,토,화]
document.write(arr1.sort());
// 데이터를 정렬(내림차순) sort에 리버스를 해줌. [결과:화,토,일,월,수,목,금 ]
document.write(arr1.reverse(arr1.sort()));
// 배열 데이터를 구분자로 연결하여 결합 [결과:월+화+수+목+금+토+일]
document.write(arr1.join("+"));
// 여러개의 배열 데이터를 하나로 결합. [결과:월,화,수,목,금,토,일,a,b,c,d ]
document.write(arr1.concat(arr2));
// 배열 마지막 인덱스에 새 데이터를 중첩하여 결합.
arr1.push("값");
// [결과:월,화,수,목,금,토,일,값]
document.write(arr1);
// [결과:월,화,수,목,금,토,일,값,공휴일]
arr1.push("공휴일");document.write(arr1);
// [결과:월,화,수,목,금,토,일,월]
arr1.push(arr1[0]);
// 배열에서 첫번째(0번째 인덱스)에 저장된 데이터를 삭제. [결과:화,수,목,금,토,일,월]
arr1.shift();
//배열 가장 마지막 데이터(length-1)를 가장 앞으로 추가 [결과:일,월,화,수,목,금,토,일]
document.write(arr1);arr1.unshift(arr1[arr1.length-1]);
//배열의 마지막 인덱스를 삭제 [결과:일,월,화,수,목,금,토]
document.write(arr1);arr1.pop();
// 숫자 정렬 - sort()는 문자열 오름차순 정렬이기 때문에, 숫자의 정렬의 경우 아래와 같이 공식으로 적용한다.
document.write(arr1);
// 함수를 활용하여 정렬 변경.
var array = [52, 273, 103, 32];
array.sort(function(left, right) {
return left - right; // 오름차순 정렬
// return right - left; // 내림차순 정렬
});
'IT > JavsScript' 카테고리의 다른 글
모바일 스크롤 페이징 (infinite scrolling pagination) 구현하기 (0) | 2021.03.10 |
---|---|
소수점 쉽게 찍기, 퍼센트 쉽게 계산하고 이해하기 (0) | 2021.03.10 |
객체(object) 활용하기 (feat.JSON) (0) | 2021.03.10 |
공백문자 쉽게 제거하기 (0) | 2021.03.10 |
jQuery 사용 속도를 높이는 6가지 방법 (0) | 2021.03.04 |
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)