[Web/JS] 자바스크립트

Web/JS

[Web/JS] 자바스크립트 - 내장 객체

poopooreum 2024. 5. 13. 21:56

✏️ Array 객체

Array 객체는 자바스크립트의 여라 가지 내장 객체 중에서 배열을 다룹니다. 초깃값이 없는 상태에서 단순히 객체의 인스턴스만 만든다면 new 예약어를 사용해 변수에 할당하고, 초깃값이 있는 배열이라면 인스턴스 선언과 요솟값을 한 번에 할당에 작성할 수 있습니다.

var numbers = new Array(); // 배열의 크기를 지정하지 않음
var numbers = new Array(4); // 배열의 크기를 지정함
var numbers = ["one","two","three","four"]; // 배열 선언
var numbers = Array("one","two","three","four"); // Array 객체를 사용해 배열 선언

// ※ Array의 객체 안에는 length라는 프로퍼티가 있어 numbers.length()를 이용해 배열 길이를 알 수 있습니다.

Array 객체의 메서드

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

#1 배열끼리 합치는 concat() 메서드

concat() 메서드는 서로 다른 배열 2개를 합쳐서 새로운 배열을 만들어 줍니다. 어느 배열을 먼저 쓰는가에 따라 기준이 달라지고, 결과 배열 순서도 달라집니다. 아래 예제는 nums와 chars 배열 2개를 합치는 예제입니다.

var nums = [1, 2, 3];
var chars = ["a", "b", "c", "d"];

var numsChars = nums.concat(chars);
var charsNums = chars.concat(nums);
document.write("nums에 chars 합치면 : ", numsChars, "<br> chars에 nums 합치면 : ", charsNums);

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

join() 메서드는 배열 요소를 연결해서 하나의 문자열로 만들어 줍니다. 이때 각 요소 사이에 원하는 구분자('/')를 넣을 수도 있는데, 따로 지정하지 않으면 요소를 쉼표(,)로 구분합니다. 아래 예제는 join을 사용하여 문자열을 합치는 예제입니다.

var nums = [1, 2, 3];
var chars = ["a", "b", "c", "d"];

var string1 = nums.join();
document.write("구분자 없이 : ", string1);
document.write("<br>");
var string2 = chars.join('/');
document.write("/ 구분자 지정 : ", string2);
document.write("<hr>");

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

배열에 새로운 요소를 추가하기 위해서는 push()나 unshift() 메서드를 사용합니다. 배열의 맨 끝에 요소를 추가하기 위해서는 push() 메서드를 사용하고, 배열의 첫 부분에 요소를 추가하기 위해서는 unshift() 메서드를 사용합니다. 여기서 주의할 점은 두 개의 메서드 모두 사용하게 되면 원래 있던 배열이 변경되어 length()가 달라지게 됩니다.

var nums = [1, 2, 3];

var ret1 = nums.push(4, 5);  // 배열 끝에 추가
document.write("length : ", ret1, " | 배열 : ", nums);  		
document.write("<br>");
var ret2 = nums.unshift(0);  // 배열 앞에 추가
document.write("length : ", ret2, " | 배열 : ", nums);
document.write("<hr>");

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

배열에서 뒤에 있는 요소를 꺼낼 때는 pop() 메서드를 사용하고 앞에 있는 요소를 꺼낼 때는 shift() 메서드를 사용합니다. 이때도 마찬가지로 배열의 length가 달라집니다.

var chars = ["a", "b", "c", "d"];

var popped1 = chars.pop(); // 마지막 요소 꺼냄
document.write("꺼낸 요소 : ", popped1, " | 배열 : ", chars); 
document.write("<br>");
var popped2 = chars.shift(); // 첫번째 요소 꺼냄
document.write("꺼낸 요소 : ", popped2, " | 배열 : ", chars);
document.write("<hr>");

#5 원하는 위치에 요소를 추가.삭제하는 splice() 메서드

위에서는 배열의 맨 앞이나 맨 뒤에서 요소를 추가하거나 삭제하는 메서드에 대해 알아보았습니다. 하지만 배열의 중간이나 특정 부분만 추가하거나 삭제하는 경우도 있습니다. 이런 경우에는 splice() 메서드를 사용할 수 있습니다. splice() 메서드는 인수가 1개인 경우와 인수가 2개인 경우, 인수가 3개 이상인 경우 등 다양하게 사용할 수 있습니다.

인수가 1개인 경우 : 괄호 안에 인수가 한 개라면 인수는 배열의 인덱스값을 가리키는 되는데, 이 인덱스의 요소부터 배열의 맨 끝 요소까지 모두 삭제합니다. 예를 들어 numbers.splice(2)를 입력하면 numbers의 세 번째 요소부터 마지막 요소까지 모두 삭제한 후 numbers의 길이가 달라지게 됩니다.
인수가 2개인 경우 : 첫 번째 인수는 인덱스값이고, 두 번째 인수는 삭제할 요소의 개수입니다. numbers.splice(2, 1)을 실행하면 numbers의 2번 인덱스부터 1개의 요소를 삭제합니다.
인수가 3개 이상인 경우 : 첫 번째 인수는 배열에서 삭제할 시작 위치를 나타내고, 두 번째 인수는 삭제할 개수를 알려줍니다. 세 번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정합니다. numbers.splice(2, 1, 5)를 입력하면 numbers의 2번 인덱스부터 1개의 요소를 삭제하고 그 자리에 5를 추가해줍니다.

<script>
// 인수가 1개일 경우
var numbers = [1, 2, 3, 4, 5];
var newNumbers = numbers.splice(2);
document.write("반환된 배열 : " + newNumbers + "<br>" );
document.write("변경된 배열 : " + numbers );
document.write("<hr>");

// 인수가 2개일 경우
var study = ["html", "css", "web", "jquery"];
var newStudy = study.splice(2,1);
document.write("반환된 배열 : " + newStudy + "<br>");
document.write("변경된 배열 : " + study);
document.write("<hr>");

// 인수가 3개 이상일 경우
var newStudy2 = study.splice(2, 1, "js");
document.write("반환된 배열 : " + newStudy2 + "<br>");
document.write("변경된 배열 : " + study);
</script>

#6 기존 배열을 바꾸지 않고 요소를 꺼내는 slice() 메서드

pop(), shift() 메서드와 비슷해 보이지만 기존 배열이 바뀌지 않는다는 점에서 차이점이 발생합니다. slice() 메서드 역시 인수를 1개만 사용하거나 2개를 사용할 수 있습니다.

인수를 1개만 사용할 때 : 인수를 시작 인덱스로 간주하고 지정한 요소부터 마지막 요소까지 꺼내서 변환합니다. numbers.slice(1)을 입력하면 1번 인덱스부터 마지막 인덱스까지의 요소를 모두 꺼내게 됩니다.
인수를 2개만 사용할 때 : 인수 2개를 사용하면 여러 개의 요소를 꺼낼 수가 있게 됩니다. 첫 번째 수는 배열의 시작 인덱스이고 두 번째 인수는 끝 인덱스의 바로 직전 인덱스를 가리킵니다. numbers.slice(1,4)라고 입력하면 배열의 인덱스 1부터 시작하여 인덱스 4의 직전 인덱스인 3번 인덱스까지만 요소를 꺼냅니다.

var colors = ["red", "green", "blue", "white", "black"];
var colors2 = colors.slice(2); //인덱스 2부터 끝까지
document.write(colors2);
document.write("<br>");
var colors3 = colors.slice(2, 4); // 인덱스 2,3
document.write(colors3);

✏️ Date 객체

Date 객체를 사용하면 현재 날짜와 시간을 출력하거나 달력을 표시할 수도 있고, 특정일까지 얼마나 남았는지 알려주는 등 사이트에서 여러 가지로 응용할 수 있습니다. Date 객체를 사용하여 날짜와 시간을 지정하려면 자바스크립트가 인식할 수 있는 날짜와 시간 형식으로 써야 합니다. 입력 방식은 아래와 같습니다.

YYYY-MM-DD 형식 : 연도를 나타낼 때는 YYYY, 월을 나타낼 때는 YYYY-MM, 연도와 일을 나타낼 때는 YYYY-MM-DD 형태로 사용합니다.
YYYY-MM-DDTHH 형식 : 연도와 월, 일 다음에 시간을 표시하는 형식입니다. 시간을 나타낼 때는 날짜 뒤에 "T"를 붙이고 HH:MM:SS의 형태로 사용합니다. 맨 끝에 "Z"를 붙이면 UTC(국제 표준시)로 표시합니다.
MM/DD/YYYY 형식 : 연도를 마지막에 나타내고 싶을 때 사용하는 형식입니다.
이름 형식 : 월을 January처럼 전체를 사용하거나 Jan과 같이 줄여서 사용할 수 있습니다.

#1 Date 객체의 메서드

구분		설명
날짜와 시간 정보 가져오기	getFullYear()	연도를 4자리 숫자로 표시
	getMonth()	0~11 사이의 숫자로 월을 표시, 0은 1월이고 11은 12월
	getDate()	1~31 사이의 숫자로 일을 표시
	getDay()	0~6 사이의 숫자로 요일을 표시, 0은 일요일 6은 토요일
	getTime()	1970년 1월 1일 자정 이후의 시간을 밀리 초로 표시
	getHours()	0~23 사이의 숫자로 시를 표현
	getMinutes()	0~59 사이의 숫자로 분을 표시
	getSeconds()	0~59 사이의 숫자로 초를 표시
	getMilliseconds()	0~999 사이의 숫자로 밀리초를 표시
날짜와 시간 설정하기	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 사이의 숫자로 밀리초를 설정

✏️ Math 객체의 프로퍼티

종류	설명
E	오일러 상수
PI	원주율(파이) 3.14
SQRT2	√2
SQRT1_2	1/√2
LN2	로그 e의 2
LN10	로그 e의 10
LOG2E	로그 2의 e
LOG10E	로그 10의 e

✏️ Math 객체의 메서드

종류	설명
abs()	절댓값 반환
acos()	아크 코사인(arc cosine)값 반환
asin()	아크 사인(arc sine)값 반환
atan()	아크 탄젠트(arc tangent)값 반환
atan2()	아크 탄젠트(arc tangent)값 반환
celi()	매개변수의 소수점 이하 부분을 올림
cos()	코사인(cosine)값 반환
exp()	지수 함수를 나타냄
floor()	매개변수의 소수점 이하를 버림
log()	매개변수에 대한 로그(log)값 반환
max()	매개변수 중 최댓값을 반환
min()	매개변수 중 최솟값을 반환
pow()	매개변수의 지숫값을 반환
random()	0과 1사이의 무작위 수 반환
round()	매개변수의 소수점 이하 부분을 반올림
sin()	사인(sine)값을 반환
sqrt()	매개변수에 대한 제곱근을 반환
tan()	탄젠트(tangent)값 반환

저작자표시 비영리 변경금지