IT/JavsScript

배열 메서드(Method) 선언하기

라임웨일 2021. 3. 10. 13:28
반응형

 

정말 프로그래밍에서 자주 사용하는 배열에 대해 알아볼게요.

배열은 우리가 스크립트로 다중 값을 핸들링해야 할 때 반드시 필요한 요소입니다. 

 

아마 배열에 대해 잘 아시는 분도 있고 전혀 모르시는 분도 있을 거라 생각합니다. 

배열은 객체(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; // 내림차순 정렬
});

 

반응형
광고차단(애드블록)프로그램이나 브라우저를 사용중이시면 프로그램을 비활성화이나 블로그 주소를 예외 처리 해주시면 광고가 노출됩니다. 귀찮고 번거롭겠지만 광고 클릭은 저에게는 큰 힘이 됩니다. 🙇🏻‍♂️🙇🏻‍♀️
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)
//