[JavaScript] 자바스크립트 내장 객체

 

오늘은 자바스크립트 내장 객체에 대해 알아보자

 

[ Array 객체 ]

 

Array 객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룬다.

배열을 자바스크립트에서 자주 사용하는 자료형이므로 Array 객체의 주요 프로퍼티와 메서드를 잘 알고 사용하는 것이 중요하다.

 

 

[ Array 객체의 메서드 ]

 

Array 개체에는 여러 가지 메서드가 있다.

 

종류	설명
concat	기존 배열에 요소를 추가해 새로운 배열을 만든다.
every	배열의 모든 요소가 주어진 함수에 대해 참이면 true를 반환하고 그렇지 않으면 false를 반환한다.
filter	배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만든다.
forEach	배열의 모든 요소에 대해 주어진 함수를 실행한다.
indexOf	주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾는다.
join	배열 요소를 문자열로 합친다. 이때 구분자를 지정할 수 있다.
push	배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환한다.
unshift	배열의 시작 부분에 새로운 요소를 추가한다.
pop	배열의 마지막 요소를 꺼내 그 값을 결과로 반환한다.
shift	배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환한다.
splice	배열에 요소를 추가하거나 삭제한다.
slice	배열에서 특정한 부분만 잘라낸다.
reverse	배열의 배치 순서를 역순으로 바꾼다.
sort	배열 요소를 지정한 조건에 따라 정렬한다.
toString	배열에서 지정한 부분을 문자열로 반환한다.  이때 각 요소는 쉼표(,)로 구분한다.

 

 

 

[ 배열끼리 합치는 concat() 메서드 ]

 

concat() 메서드는 서로 다른 배열 2개를 합쳐 새로운 배열을 만든다. 

 

<script>
    var nums = [1, 2, 3, 4];
    var chars = ['a', 'b', 'c', 'd'];
    var numChars = nums.concat(chars);
    var charNums = chars.concat(nums);
    document.write(`nums에 chars를 합치면 : ${numChars}, <br>  chars에 nums를 합치면 : ${charNums} <br>`);
  </script>

 

결과:

 

[ 배열 안의 요소끼리 합치는 join() 메서드 ]

 

join() 메서드는 배열 요소를 연결해서 하나의 문자열로 만들어 준다. 이때 각 요소 사이에 원하는 구분자 '/'를 넣을 수도 있는데, 따로 지정하지 않으면 요소를 쉼표(,)로 구분한다.

 

 

<script>
	var nums = [1, 2, 3, 4];
    var chars = ['a', 'b', 'c', 'd'];

    var string1 = nums.join();
    document.write(string1 + '<br>');
    var string2 = nums.join('/');
    document.write(string2 + '<br>');
    var string3 = nums.join('x');
    document.write(string3+ '<br>');
</script>

 

결과: 

 

 

[ 새로운 요소를 추가하는 push(), unshift() 메서드 ]

 

배열에 새로운 요소를 추가하려면 push()나 unshift() 메서드를 사용한다.

배열 맨 끝에 요소를 추가하려면 push() 메서드를 사용하고, 배열 맨 앞에 요소를 추가하려면 unshift() 메서드를 사용한다. 

이때 주의할 점은 배열 맨 앞과 맨 뒤에 요소를 추가하면 원래 있던 배열이 바뀐다는 것이다.

 

<script>
    var nums = [1, 2, 3];
    var ret1 = nums.push(4,5);
    document.write(`length: ${ret1}  |  배열 : ${nums} <br>`);
    var ret2 = nums.unshift(0);
    document.write(`length: ${ret2}  |  배열 : ${nums} <br>`);
 </script>

 

 

결과:

 

 

[ 배열에서 요소를 꺼내는 pop(), shift() 메서드 ]

 

배열에서 뒤에 있는 요소를 꺼낼 때는 pop() 메서드를 사용하고, 앞에 있는 요소를 꺼낼 때는 shift() 메서드를 사용한다. 

두 메서드는 꺼낸 요소값을 반환하며 기존 배열은 꺼낸 요소가 빠진 상태로 변경된다.

 

  <script>
  var chars = ['a', 'b', 'c', 'd'];
    var popped1 = chars.pop();
    document.write(`꺼낸 요소 : ${popped1} |  배열: ${chars} <br>` );
    var popped2 = chars.shift();
    document.write(`꺼낸 요소 : ${popped2} |  배열: ${chars} <br>` );
  </script>

 

 

결과:

 

 

 

 

[ 원하는 위치에 요소를 추가, 삭제하는 splice() 메서드 ]

 

splice() 메서드는 배열 중간 부분에서 요소를 추가하거나 삭제할 때, 또는 한꺼번에 요소를 2개 이상 추가하거나 삭제할 때 사용한다. 

 

splice() 메서드는 괄호 안에 들어 있는 인수에 따라 배열 요소를 삭제하거나 새로운 요소를 추가한다.

splice() 메서드를 실행하면 삭제한 요소로 이루어진 새로운 배열이 결괏값으로 반환된다.

 

 

 

 <script>
    var numbers = [1, 2, 3, 4, 5];
    var newNumbers = numbers.splice(2);
    document.write(`반환된 배열 : ${newNumbers} <br> 변경된 배열 : ${numbers} <br>`); 
    document.write(`<hr>`);

    var study = ['html', 'css', 'web', 'jquery'];
    var newStudy = study.splice(2,1);
    document.write(`반환된 배열 : ${newStudy} <br> 변경된 배열 : ${study} <br>`);
    document.write(`<hr>`);
    
    var newStudy2 = study.splice(2,1,'js');
    document.write(`반환된 배열 : ${newStudy2} <br> 변경된 배열 : ${study} <br>`);
   </script>

 

1. 인수가 1개인 경우 

 

splice() 메서드의 괄호 안에 인수가 1개 들어있는 경우를 알아보자

위의 예시에서     var newNumbers = numbers.splice(2); 의 경우 인덱스 값이 2인 요소부터 마지막 요소까지 모두 삭제한다. 배열의 인덱스 값은 0부터 시작하므로 splice(2)는 세 번째 요소인 3을 의미한다. 

 

splice() 메서드를 실행한 후에는 삭제한 요소를 반환하고 기존 numbers 배열은 변경된 상태가 된다.

 

2. 인수가 2개인 경우

 

인수가 2개인 경우 첫 번째 인수는 인덱스 값이고 두 번째 인수는 삭제할 요소의 개수를 말한다.

위의 예시에서 var newStudy = study.splice(2,1);의 경우 인덱스 값이 2인 요소부터 요소 1개를 삭제한다. 

=> 'web'이 삭제된다.

 

splice() 메서드를 실행한 후에는 삭제한 요소를 반환하고 기존 study 배열은 나머지 요소만 남는다.

 

3. 인수가 3개인 경우 

 

인수가 3개인 경우 첫 번째 인수는 배열에서 삭제할 시작 위치를 나타내고, 두 번째 인수는 삭제할 개수를 알려준다. 그리고 세 번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정한다. 

 

위의 예시에서 작성한 study 배열을 가지고 study.splice(2, 1, 'js')를 실행하면 인덱스 값이 2인 요소(jquery) 1개를 삭제하고 새로운 요소 "js"를 추가한다. 

 

이렇게 하면 study 배열에는 "jquery"를 대신해 "js"가 추가된다.

 

결과:

 

 

 

 

[ 기존 배열을 바꾸지 않으면서 요소를 꺼내는 slice() 메서드 ]

 

pop(), shift() 메서드와 같이 배열에서 요소를 꺼내는 기능을 하므로 같아 보이지만 시작과 끝 인덱스를 지정해서 요소를 여러 개 꺼내고, 실행결과 기존 배열이 바뀌지 않는다는 차이점이 있다.

 

 

<script>
	var colors = ["red", "green", "blue", "white", "black"];
    var colors2 = colors.slice(2);
    document.write(colors2);
</script>

 

결과:

 

 

slice() 메서드에서 인수 2개를 사용하면 여러 개의 요소를 꺼낼 수 있다. 즉, slice() 메서드의 인수 2개는 꺼낼 요소의 구간을 의미한다. 이때 첫 번째 인수는 배열의 시작 인덱스이고, 두 번째 인수는 끝 인덱스의 바로 직전 인덱스를 가리킨다. 

 

예를 들어 위의 예제에서 var colors2 = colors.slice(2,4);라고 지정한다면 인덱스값이 2부터 3까지의 요소를 꺼내게 되어

 

blue, white를 반환하게 된다. 

 

 

---

 

 

[ Date 객체 ]

 

Date 객체는 날짜와 시간 정보를 나타낼 수 있다.

Date 객체는 현재 날짜와 시간을 출력하거나 달력을 표시할 수도 있고, 특정 일까지 얼마나 남았는지 알려 주는 등 사이트에서 여러 가지로 응용할 수 있다.

 

 

 

[ Date 객체의 메서드 ]

 

날짜와 시간 정보를 사용하기 위한 Date 객체를 만들었다면 Date 객체에 정의된 메서드를 사용할 수 있다. 

 

Date 객체의 메서드는 크게 3가지로 구분된다.

 

1. 날짜/시간 정보를 가져오는 메서드

 

구분	설명
getFullYear()	연도를 4자리 숫자로 표시한다.
getMonth()	0 ~ 11 사이의 숫자로 월을 표시한다.  0부터 1월이 시작되고 11은 12월
getDate()	1 ~ 31 사이의 숫자로 일을 표시한다.
getDay()	0 ~ 6 사이의 숫자로 요일을 표시한다. 0부터 일요일이 시작되고 6은 토요일이다.
getTime()	1970년 1월 1일 자정 이후의 시간을 밀리 초(1/1000초)로 표시한다.
getHours()	0 ~ 23 사이의 숫자로 시를 표시한다.
getMinutes()	0 ~ 59 사이의 숫자로 분을 표시한다.
getSeconds()	0 ~ 59 사이의 숫자로 초를 표시한다.
getMilliseconds()	0 ~ 999 사이의 숫자로 밀리초를 표시한다.

 

2. 사용자가 원하는 날짜/시간으로 설정하는 메서드

 

구분	설명
setFullYear()	연도를 4자리 숫자로 설정한다.
setMonth()	0 ~ 11 사이의 숫자로 월을 설정한다. 0부터 1월이 시작되고 11은 12월이다.
setDate()	1 ~ 31 사이의 숫자로 일을 설정한다.
setTime()	1970년 1월 1일 자정 이후의 시간을 밀리초로 설정한다.
setHours()	0 ~ 23 사이의 숫자로 시를 설정한다.
setMinutes()	0 ~ 59 사이의 숫자로 분을 설정한다.
setSeconds()	0 ~ 59 사이의 숫자로 초를 설정한다.
setMilliseconds()	0 ~ 999 사이의 숫자로 밀리초를 설정한다.

 

3. 날짜/시간 형식을 바꿔주는 메서드

 

구분	설명
toLocaleString()	현재 날짜와 시간을 현지 시간(local time)으로 표시한다.
toString()	Data 객체 타입을 문자열로 표시한다.