JS 표준객체

지식저장공간·2023년 3월 7일

JS

목록 보기

8/16

JS 표준객체

전역 객체와 표준 객체

전역 객체(global object)

전역 객체란 자바스크립트에 미리 정의된 객체로 전역 프로퍼티나 전역 함수를 담는 공간의 역할을한다. 전역 객체 그 자체는 전역 범위에서 this 연산자를 통해 접근할 수 있다.

자바스크립트에서 모든 객체는 전역 객체의 프로퍼티가 된다.
웹 브라우저가 새로운 페이지를 로드하면, 자바스크립트는 새로운 전역 개체를 만들고 해당 프로퍼티들을 초기화한다.

표준 객체(Standard Object)

자바스크립트에서 표준 객체는 다른 객체의 기초가 되는 핵심적인 객체이다.

Number 객체
Math 객체
Date 객체
String 객체
Array 객체

Number 객체

자바스크립트에서는 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현한다.

Infinity

자바스크립트에서는 양의 무한대를 의미하는 Infinity 값과 음의 무한대를 의미하는 -Infinity 값을 사용할 수 있다.

const x = 100/0;
console.log(x); //Infinity

NaN

NaN(Not a Number)는 숫자가 아니라는 의미로, 정의되지 않은 값이나 표현할 수 없는 값을 가리킨다.

const x = 100-"문자열";
const y = 0/0;

console.log(x); //NaN "문자열"은 숫자로 변환할 수 없다.
console.log(y); //NaN 0을 0으로 나눌 수 없다.

console.log(isNaN(x)); //true
console.log(isNaN(y)); //true
// 전역함수 isNaN() 함수를 사용하여 전달받은 값이 숫자인지 아닌지 판단할 수 있다.

null, undefined, NaN, Infinity

자바스크립트에서는 약간은 비슷한 것 같으면서도 전혀 다른 4가지 값을 제공하고 있다.

null

null은 object타입이며, 아직 값이 정해지지 않은 것을 의미한다.

undefined

undefined는 null과는 달리 하나의 타입이며, 타입이 정해지지 않은 것을 의미한다.

NaN

NaN은 number 타입이며, 숫자가 아님을 의미하는 숫자이다.

Infinity

Infinity는 number 타입이며, 무한대를 의미하는 숫자이다.

console.log(typeof null);
console.log(typeof undefined);
console.log(typeof NaN);
console.log(typeof Infinity);

Math 객체

Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체이다.
Math 객체는 다른 전역 객체와는 달리 생성자가 존재하지 않다. 따라서 따로 인스턴스를 생성하지 않아도 Math 객체의 모든 메소드나 프로퍼티를 바로 사용할 수 있다.

Math 메소드

자바스크립트는 웹 페이지에서 수학적 작업을 손쉽게 할 수 있도록 다양한 Math 메소드를 제공한다.

Math.min()
Math.max()
Math.random()
Math.round()
Math.floor()
Math.ceil()

대부분의 Math 메소드는 웹 브라우저마다 다른 결괏값을 얻을 가능성이 높다. 심지어 같은 자바스크립트 인터프리터라도 운영체제가 다르면 다른 결괏값을 반환할 가능성이 있기 때문에 정확한 결괏값이 필요한 작업에는 Math 메소드는 사용하지 않는 것이 좋다.

Math.min()

Math.min() 메소드는 인수로 전달받은 값 중에서 가장 작은 수를 반환한다.

console.log(Math.min(6,5,223,23,321,25,-100,2213)) // -100

Math.max()

Math.max() 메소드는 인수로 전달받은 값 중에서 가장 큰 수를 반환한다.

console.log(Math.max(6,5,223,23,321,25,-100,2213)) // 2213

Math.random()

Math.random() 메소드는 0보다 크거나 같고 1보다 작은 무작위 숫자를 반환한다.

0 <= Math.random() < 1

Math.round()

Math.round() 메소드는 인수로 전달받은 값을 소수점 첫번째 자리에서 반올림하여 결괏값을 반환한다.

console.log(Math.round(12.1)); //12
console.log(Math.round(11.8)); //12
console.log(Math.round(16.5)); //17
console.log(Math.round(16.4)); //16

Math.floor()

Math.floor() 메소드는 인수로 전달받은 값과 같거나 작은 수 중 가장 큰 정수를 반환한다.(내림)

console.log(Math.floor(12)); //12
console.log(Math.floor(11.9)); //11
console.log(Math.floor(11.1)); //11
console.log(Math.floor(-11.1)); //-12

Math.ceil()

Math.ceil() 메소드는 인수로 전달받은 값과 같거나 큰 수중에서 가장 작은 정수를 반환한다.(올림)

console.log(Math.ceil(12)); //12
console.log(Math.ceil(11.9)); //12
console.log(Math.ceil(11.1)); //12
console.log(Math.ceil(-11.1)); //-11

Date 객체

자바스크립트에서는 Date 객체를 사용하여 시간과 날짜에 관한 정보를 손쉽게 얻을 수 있다.
Date 객체를 초기화 하는 방법

const now = new Date();
console.log(now);

Date 메소드

Date.now()

Date.now() 메소드는 1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초 단위의 정수로 반환한다.

const date = Date.now();
console.log(date); //1678155557549

new Date.now()// Error

Date.prototype getter 메소드

모든 Date 인스턴스는 Date.prototype으로부터 메소드와 프로퍼티를 상속받는다.

getFullYear()
getDate()
getDay()
getMonth()

getFullYear()

getFullYear() 메소드는 현재 연도를 4비트의 숫자(YYYY)로 반환한다.

const now = new Date();
console.log(now.getFullYear()); //2023

getDate()

getDate() 메소드는 현재 날짜에 해당하는 숫자를 반환한다.

const now = new Date();
console.log(now.getDate()); //7 -> 3월 7일

getDay()

getDay() 메소드는 현재 요일에 해당하는 숫자를 반환한다.
일요일(0) ~ 토요일(6)

const now = new Date();
console.log(now.getDay()); //2 -> 3월 7일 화요일

getMonth()

getMonth() 메소드는 현재 월에 해당하는 숫자를 반환한다.
1월일 경우 0을 반환하고 12월일 경우 11반환
현재를 출력하고 싶을경우 반드시 1을 더해준다.

const now = new Date();
console.log(now.getMonth()); //2
console.log("현재 3월 7일 getMonth()+1의 값 : ", now.getMonth()+1); //3

String 객체

자바스크립트에서 문자열 리터럴은 큰따옴표("")나 작은따옴표('')를 사용하여 손쉽게 만들 수 있다.

const str = "문자열";
const str2 = '문자열';
const str3 = new String("문자열");

console.log(typeof str); //string
console.log(typeof str2); //string
console.log(typeof str3); //object

console.log(str === str2); //true string 타입과 값이 일치한다.
console.log(str == str3); //true 문자열 값이 같으므로 true
console.log(str2 === str3); //false 문자열 값은 같지만 타입이 다르므로 false

String.prototype 메소드

모든 String 인스턴스는 String.prototype으로부터 메소드와 프로퍼티를 상속받는다.
상속받은 String.prototype 메소드를 이용하면, 다양한 작업이 가능하다.

문자열에서의 위치 찾기

다음 메소드는 String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치나 마지막으로 등장하는 위치를 반환한다.

indexOf() : 특정 문자가 처음으로 등장하는 인덱스
lastIndexOf() : 특정 문자가 마지막으로 등장하는 인덱스

이 메소드들은 문자열을 찾기 시작할 String인스턴스의 위치를 두번째 인수로 전달할 수 있다.
만약 전달받은 특정 문자나 문자열을 찾을 수 없을 때는 -1을 반환한다.

const str = "aabbccddeeff";

console.log(str.indexOf("a")); //0
console.log(str.indexOf("a",1)); //1 --> index 1부터 찾지만 결과값 index는 0기준이다.
console.log(str.indexOf("a",2)); //-1

console.log(str.indexOf("f")); //10
console.log(str.lastIndexOf("f")); //11
console.log(str.indexOf("eeff")); //8, 문자열을 한번에 많이 검색해도 index 0이 기준이다.

문자열에서 지정된 위치에 있는 문자 반환

const str = "aabbccddeeff";

console.log(str.charAt(0)); //a
console.log(str.charAt(1)); //a
console.log(str.charAt(2)); //b
console.log(str.charAt(12)); //"" 문자열의 index보다 큰 index를 파라미터로 넣을경우 공백 출력

문자열 추출

다음 메소드는 String 인스턴스에서 전달받은 시작 인덱스 부터 종료 인덱스 바로 앞까지의 문자열만을 추출하여 만든 새로운 문자열을 반환한다.

slice()
substring()
substr()
메소드 전부 같은 기능을한다.

const str = "aabbccddeeff";

console.log(str.slice(0,2)); //aa
console.log(str.substring(0,2)); //aa
console.log(str.substr(0,2)); //aa
// startIndex <= x < endIndex

문자열 분리

split() 메소드는 String 인스턴스를 구분자(separator)를 기준으로 나눈 후, 나뉜 문자열을 하나의 배열로 반환한다.

split() 메소드는 인수로 구분자를 전달하지 않으면, 전체 문자열을 하나의 배열 요소로 가지는 길이가 1인 배열을 반환한다.

const str = "aabbccddeeff";
console.log(str.split("a"));

const str = "aabbccddeeff";
console.log(str.split(""));

const str = "aabbccddeeff";
console.log(str.split());

const str = "aabbccddeeff";
console.log(str.split("cd"));

문자열 결합

concat() 메소드는 String 인스턴스에 전달받은 문자열을 결합한 새로운 문자열을 반환한다.

const str1 = "점심으로 ";
const str2 = "부대찌개를 먹었다.";

console.log(str1.concat(str2)); //"점심으로 부대찌개를 먹었다."

문자열의 대소문자 변환

toUpperCase()
toLowerCase()

const str = "JavaScript";

console.log(str.toUpperCase()); // "JAVASCRIPT"
console.log(str.toLowerCase()); // "javascript"

문자열 주위의 공백 제거

trim() 메소드는 String 인스턴스 양 끝에 존재하는 모든 공백과 줄 바꿈 문자를 제거한 새로운 문자열을 반환한다.

const str1 = "         JavaScript           ";
const str2 = "Java                Script";

console.log(str1.trim()); //JavaScript
console.log(str2.trim()); //Java                Script
//trim() 메소드는 문자열 가운데 존재하는 공백은 제거하지 않는다.

Array

Array.prototype 메소드

모든 Array 인스턴스는 Array.prototype으로부터 메소드와 프로퍼티를 상속받는다.
이렇게 상속받은 Array.prototype 메소드는 크게 다음과 같이 구분할 수 있다.

push()

push() 메소드는 하나 이상의 요소를 배열 가장 마지막에 추가한다.
원본 배열은 추가한 요소의 수만큼 길이가 늘어나게 되며, 요소를 성공적으로 추가하면 배열의 총 길이를 반환한다.

const arr = [
    1,2,true,false,"문자","열"
];

arr.push("push 테스트");
arr.push("문자열","추가");

console.log(arr);
*console.log(arr.push("push 테스트")); //10 반환

pop()

pop() 메소드는 배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환한다.
따라서 pop() 메소드를 실행할 때마다 배열의 길이는 1씩 줄어들게 된다.

const arr = [
    1,2,true,false,"문자","열"
];

console.log(arr.pop());
console.log(arr);

shift()

shift() 메소드는 pop() 메소드와는 달리 배열의 가장 마지막 요소가 아닌 첫 요소를 제거하고, 그 제거된 요소를 반환한다. 따라서 shift() 메소드도 실행할 때마다 배열의 길이가 1씩 줄어든다.

const arr = [
    1,2,true,false,"문자","열"
];

console.log(arr.shift());
console.log(arr);
console.log(arr.shift());
console.log(arr);

unshift()

unshift() 메소드는 하나 이상의 요소를 배열의 가장 앞에 추가한다. 원본 배열은 추가한 요소의 수만큼 길이가 늘어나게 되며, 요소를 성공적으로 추가하면 배열의 총 길이를 반환한다.

const arr = [
    1,2,true,false,"문자","열"
];

console.log(arr.unshift(0));
console.log(arr.unshift(-1));
console.log(arr);

pop()과 push() 메소드를 사용하면 배열을 스택(stack)이라는 데이터 구조처럼 사용할 수 있으며, shift()와 push() 메소드를 사용하면 배열을 큐(queue)라는 데이터 구조처럼 사용할 수 있다.

출처 : tcp school.com

지식저장공간

발전하는 개발자가 꿈입니다. 지식을 쌓고 지식을 활용해 목표 달성을 추구합니다.

JS 표준객체

JS

JS 표준객체

전역 객체와 표준 객체

전역 객체(global object)

표준 객체(Standard Object)

Number 객체

Infinity

NaN

null, undefined, NaN, Infinity

null

undefined

NaN

Infinity

Math 객체

Math 메소드

Math.min()

Math.max()

Math.random()

Math.round()

Math.floor()

Math.ceil()

Date 객체

Date 메소드

Date.now()

Date.prototype getter 메소드

getFullYear()

getDate()

getDay()

getMonth()

String 객체

String.prototype 메소드

문자열에서의 위치 찾기

문자열에서 지정된 위치에 있는 문자 반환

문자열 추출

문자열 분리

문자열 결합

문자열의 대소문자 변환

문자열 주위의 공백 제거

Array

Array.prototype 메소드

push()

pop()

shift()

unshift()

JS 객체

JS 문서 객체 모델(DOM)

0개의 댓글

관련 채용 정보