웹 프로그래머(웹 개발자)가 되어보자 - 16

6-2. 배열

저번시간에는 배열에 대해서 살펴보았습니다.
배열은 데이터를 순차적으로 보관하는 기능입니다.
이번시간에는 배열의 특징에 대해서 살펴보려고 합니다.

var text1 = "abcd";
var text2 = text1;
text1 = 1234;
console.log(text1);
console.log(text2);

text1을 text2값에 넣어주었습니다.

 

문제되는 것이 없는 내용입니다.
text1만 변경하였으므로 text2는 text1에 처음 만들어진 내용이 담겨있습니다.
그러면, 아래 내용을 한번 살펴봅니다.

var array1 = [1,2,3,4];
var array2 = array1;
array1[1] = 100;
console.log(array1);
console.log(array2);

둘다 바뀌었습니다..??

 

이럴수가..array2의 값도 변화하였습니다.
배열의 데이터의 형식은 기존에 우리가 사용한 데이터와는 조금 다릅니다.
배열의 데이터는 한번 선언한 뒤에 이처럼 외부에서 사용할 때 "참조" 하는 형식으로 사용되어집니다.
다시말해, 배열을 복사하려면 단순히 대입연산자를 통해 사용하면 안된다는 것 입니다.

배열을 복사하려면, 전 시간에 살펴보았던 slice 함수를 사용하여주면 됩니다.
slice함수에 아무런 값을 넣지 않으면 전체를 복사하도록 되어 있습니다.
위 내용을 수정하여보겠습니다.

var array1 = [1,2,3,4];
var array2 = array1.slice();  //이전시간에 잠깐 만나본 slice라는 함수입니다!
array1[1] = 100;
console.log(array1);
console.log(array2);

이제 복사가 된 것 같습니다.

 

slice라는 함수에 의해서 데이터가 정상적으로 복사되어 array2에 대입되었습니다.
배열에서 꼭 기억해야 되는 부분은 바로 "참조" 입니다.
배열을 복사하는 행위를 하는 경우에 반드시 유의하여야합니다.

몇가지 문제를 통해서 연습 해 보겠습니다.

 

* 문제 : 6-2-1
"임의의 숫자가 담긴 배열을 만들어 주세요. 변수 number를 선언 한 뒤에 해당 값이 10보다 크면 배열에 추가, 작으면 배열의 가장 마지막 값을 제거하여주세요."

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

위 문제에 대한 답 입니다.

* 답

var array = [1,2,3];
var number = 5;
if(number > 10){
    array.push(number);
} else {
    array.splice(array.length-1,1);
}

제거함수입니다!

 

splice함수가 사용되었습니다. 배열에서의 length 속성은 배열의 길이입니다. 
여기서 배열의 길이는 3이며, 가장 마지막 숫자의 3은 배열의길이에서 1을 뺀 2번입니다.
splice 함수에서 첫번째 값은 시작번호를 의미하며, 마지막은 지울 갯수 입니다.
length 속성을 쓰지 않는다면, 배열의 길이가 변할 때 마다 splice 값을 바꾸어 주어야 하므로 오류가 발생 할 수 있습니다.
그러므로 속성 length를 사용하는 것이 좀 더 바람직 합니다.
다음 문제를 풀어보겠습니다.

 

* 문제 : 6-2-2
"임의의 숫자가 담긴 배열을 만들어 주세요. 배열의 중간 값을 가져온 뒤에 곱하기 3을 하고 맨 마지막에 넣어주세요"
"배열에 데이터는 반드시 3이상 홀수만 넣어야 합니다."

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

위 문제에 대한 답 입니다.

* 답

var array = [1,2,3];
var lastData = array[(array.length-1) / 2];
array.push(lastData * 3);

나눗셈이 핵심이네요!

여기서 홀수와 짝수를 구분하기 위한 조건을 한번 달아보겠습니다.
우리는 덧셈, 뺄셈, 나눗셈, 곱셈등 수학적 연산방법을 알고 있습니다.
그러면 홀수와 짝수는 어떻게 구분할까요?
바로 나머지값으로 판단하는 것 입니다!!

예를들어 2을 2로 나누면 나머지값은 0 입니다. 
3을 2로 나누면 나머지값은 1입니다.
이러한 방법을 사용하면 짝수는 2로 나누는 경우 나머지 값이 0이어야 하며, 홀수는 2로나누는 경우 나머지 값이 0이 아니어야 합니다.
위 내용을 조건문을 통해 6-2-2 문제에 적용 해 보겠습니다.

var array = [1,2,3];
if(array.length%2 != 0){  //나머지를 구하는 연산 기호 입니다.
    var lastData = array[(array.length-1) / 2];
    array.push(lastData * 3);
} else {
    console.log('배열의 길이가 짝수입니다.');
}
console.log(array);

나머지 값이 0이 아니면 홀수, 0이면 짝수입니다.

 

나머지를 구하는 수학기호는 % 입니다.  "A를 나눈B의 나머지"를 자바스크립트에서 표현하려면 A%B 입니다.
나머지를 구하는 방법을 꼭 알아야 합니다.

굳이 홀수와 짝수를 구분하는 이유는 무엇이였을까요?
다시 위의 내용을 수정해 보겠습니다.

var array = [1,2,3,4];
var lastData = array[(array.length-1) / 2];
array.push(lastData);
console.log(array);

이상한 값이 있습니다.

 

데이터가 이상하게 들어갔습니다? undefined라는 요상한 데이터가 추가된 것을 볼 수 있습니다.
그 이유로는 바로 배열의 길이를 구하는 값에서 나눗셈 2를 통해 나온 값이 소숫점 이기 때문입니다.

3나누기 2는 1.5입니다!

 

배열의 중간값을 가져오는 부분에서의 계산식 입니다.
계산식 내용이 3 나누기 2로 인하여 1.5의 값이 출력되었습니다.
배열에서의 순서는 1,2,3,4,5,6...으로 증가하는 자연수 입니다. 소숫점이 들어간 데이터는 존재하지 않습니다.
그러므로 배열에서의 1.5번째 값은 존재하지 않기 때문에 이상한 데이터가 들어간 것 입니다.

자바스크립트에서 살펴본 데이터는 숫자, 문자, 논리값 등이 존재한다고 하였습니다.
그중 숫자는 이처럼 자연수와 소수로 구분되어 집니다.
소수를 자주 사용하지는 않지만 이처럼 나눗셈이나 곱셈 기타 계산을 통해서 나오는 경우가 있습니다.
이를 자연수로 바꾸려면 자바스크립트의 함수인 Math 함수를 사용하여야 합니다.

 * Math.floor(데이터);  //소수점 버림
 * Math.around(데이터);  // 소수점 반올림
 * Math.ceil(데이터);  //소수점 올림

 

위 함수중 소수점을 버리는 floor를 "문제 6-2-2"에 다시 적용해 보겠습니다.

var array = [1,2,3,4];
var index = Math.floor( (array.length-1) / 2 );
var lastData = array[index] * 3;
array.push(lastData);
console.log(array);

이제 배열이 짝수던, 홀수이던지 간에 이상한 데이터에 대비가 되었습니다!

배열의 길이가 짝수이던 홀수이던지 간에 이제 undefined라는 이상한 데이터가 들어가지 않는 방법이 탄생하였습니다.

이번시간에는 배열의 특징과 사용법에 대해서 조금 깊게 살펴본 것 같습니다.
내용도 많고 난이도가 제법 있는 것 같습니다.
처음 언급한 나머지 연산자(%), 숫자에서의 자연수와 소수, Math 함수 등에 대해서는 반드시 숙달하셔야 되는 부분 입니다!
다음시간에는 역시나 배열에 대해 좀 더 살펴보겠습니다!