본문 바로가기

프로그래밍/자바스크립트(javascript)

[자바스크립트/javascript] 내장된 싱글톤 객체 ( Global 객체, eval() 메서드 , Math 객체 )

내장 객체는 자바스크립트 프로그램이 실행되는 즉시 이미 존재하며 개발자가 내장 객체를 명시적으로 인스턴스화 할 필요 없다는 것입니다.

 

 

Global 객체

 

Global 객체는 명시적으로 접근할 수 없다는 점에서 자바스크립트에서 가장 독특한 객체입니다.

Global 객체를 소유자가 없는 모든 프로퍼티와 메서드를 담는 객체로 정의합니다.  전역 변수나 전역 함수라는 것은 존재 하지 않습니다.

전역에서 정의한 변수와 함수는 모두 Global 객체의 프로퍼티가 됩니다.

 

 

encodeURI()와 encodeURIComponent()  메서드는 브라우저에 전달한 URI를 인코드하는 메서드입니다.

유효한 URI는 공백문자 등의 일부 특수 문자를 포함할 수 없습니다.

URI 인코딩 메서드는 특별한 UTF-8 인코딩을 써서 URI에 사용할 수 없는 문자를 브라우저가 인식하고 이해할수 있는 문자로 바꿉니다.

 

encodeURI() 는 : 이나 /, ?, # 처럼 URI 일부분으로 쓰이는 특수문자는 인코드하지 않지만, encodeURIComponent() 는 비표준 문자를 모두 인코드한다는 점이 있다.

 

var uri = "https://blog.naver.com/tlstjdtn321/221932996313 value.html#start";

console.log("encodeURI => " + encodeURI(uri));

console.log("encodeURIComponent => " + encodeURIComponent(uri));

 

 

 

encodeURI()는 공백문자를 제외한 특수문자는 변하지 않고 공백만 %20로 인코딩 되었습니다.

반면 encodeURIComponent() 메서드는 모든 특수문자를 인코드헀습니다.

 

 

decodeURI() 와 decodeURIComponent()는 각각 encodeURI() 와 encodeURIComponent() 의 반대 역활을 합니다.

 

 

var uri = "https://blog.naver.com/tlstjdtn321/221932996313 value.html#start";

console.log("encodeURI => " + encodeURI(uri));

console.log("encodeURIComponent => " + encodeURIComponent(uri));

console.log("decodeURI(encodeURI(uri)) => " + decodeURI(encodeURI(uri)));

console.log("decodeURIComponent(encodeURIComponent(uri))" + decodeURIComponent(encodeURIComponent(uri)) );

 

 

eval() 메서드

 

자바스크립트 언어에서 가장 강력한 eval() 메서드입니다. 인터프리터 자체인 듯 동작하며 매개변수로 문자열을 하나 받는데 이 문자열은 실행할 수 있는 자바스크립트 코드여야 합니다.

 

eval("console.log('hello')");

 

 

인터프리터가 eval()을 만나면 매개변수를 실제 자바스크립트 문자으로 해석해서 eval() 있던 위치에 삽입합니다.

eval()이 실행하는 코드는 eval()을 호출한 실행 컨텍스트의 일부분으로 간주되며 해당 컨텍스트와 같은 스코프 체인을 갖습니다.

 

eval("var msg = 'hello world';");

console.log(msg);

 

 

eval()는 변수나 함수를 사용하면 실제 코드로 변환되기 때문에 eval() 내부에서나 외부에서 참조를 할 수 있습니다.

 

 

window 객체

 

웹 브라우저에서는 window 객체를 통해 Global 객체에 접근 할 수 있습니다. 즉 전역 스코프에서 선언한 변수와 함수는 모두 window 객체의 프로퍼티가 됩니다.

 

var color = "red";

function GetColor() {
    console.log(window.color);
}

window.GetColor();

 

 

전역 변수가 window의 프로퍼티임을 분명히 알 수 있습니다. 함수를 호출할 때 역시 window.getColor 라는 이름으로 호출했습니다.

 

 

Math 객체

 

자바스크립트에서 수학 공식과 각종 상수를 Math 객체에 저장합니다. 피룡한 계산이 Math 객체에 구현되어 있다면 자바스크립트로 해당 수식을 직접 만들기보단 Math 객체 구현된 것을 이요하는 편이 더 빠릅니다.

 

 

min(), max() 메서드는 이름에서 알 수 있듯 한 그룹의 숫자 중에서 가장 작은 숫자와 가장 큰 숫자를 찾습니다. 매개변수 숫자에는 제한이 없습니다.

 

var max = Math.max(3, 54, 32, 16);
console.log("max => " + max);

var min = Math.min(3, 54, 32, 16);
console.log("min => " + min);

 

 

 

숫자 3, 54, 32, 16 중에서 Math.max() 는  54를 반환하고 Math.min()은 3을 반환합니다.

 

배열 데이터 중에서 최댓값이나 최솟값을 찾을 때는 다음과 같이 apply() 메서드를 쓸 수 있습니다.

 

var values = [ 1, 2, 3, 4, 5, 6, 7, 8 ];
var max = Math.max.apply(Math, values);

console.log("max => " + max);

 

 

apply()의 첫번쨰 매개변수로 Math 객체를 넘겨서 this가 정확히 설정되도록 하는 것입니다. 이렇게 하면 두 번째 매개변수로 배열을 넣었을 때 올바르게 동작합니다.

 

 

반올림 메서드

 

소수점 있는 값을 정수로 바꾸는 반올림 메서드에 대해 알아보겠습니다.

이런 메서드는 Math.ceil(), Math.floor(), Math.round() 가 있습니다.

 

Math.ceil : 항상 가까운 정수로 값을 올림 연산합니다.

Math.floor : 항상 가까운 정수로 값을 내림 연산합니다.

Math.round : 반올림입니다. 0.5 이상이면 올림, 아니면 내림 연산입니다.

 

console.log(Math.ceil(25.9));
console.log(Math.ceil(25.5));
console.log(Math.ceil(25.1));

console.log("================");

console.log(Math.round(25.9));
console.log(Math.round(25.5));
console.log(Math.round(25.1));

console.log("================");

console.log(Math.floor(25.9));
console.log(Math.floor(25.5));
console.log(Math.floor(25.1));

 

 

 

 

Math.random() 메서드는 0과 1 사이의 난수를 반환하되 0이나 1을 반환하지는 않습니다.

Math.random() 메서드를 쓴 이유는 Math.random()이 항상 0과 1 사이의 숫자를 반환하므로 여기에 정수를 곱하고 정수를 더해도 여전히 소수점이 유지되기 때문입니다.

 

1 ~ 10 까지 수를 원하면 다음과 같이 사용하면 됩니다.

 

var num = Math.floor(Math.random() * 10 +1);

console.log(num);

 

실행 할떄마다 다른 결과

 

 

 

Math 객체에는 단순한 것부터 높은 레벨까지, 수학 계산과 관련된 다양한 메서드가 들어 있습니다.