strict mode
strict mode란?
strict mode ( 엄격모드 ) 는 ES5 에 추가된 키워드로, 자바스크립트가 묵인했던 에러들의 에러 메시지를 발생시켜 더욱 엄격한 오류 검사를 적용 해 주는 것이다.
strict mode 사용 이유
function foo () {
x = 10;
}
foo();
console.log(x); // 10foo 함수에서 선언하지 않은 x 변수에 값을 할당했다.
자바스크립트 엔진은 전역에서 x 변수가 어디 선언되었는지 찾고 실패하여, 상위스코프인 foo 함수 컨텍스트에서 x 변수 선언을 찾는다.
x변수가 선언되지 않았기 때문에 ReferenceError를 발생시켜야하는데 자바스크립트 엔진이 암묵적으로 전역객체에 x 프로퍼티를 동적생성한다. 이를 암묵적 전역 이라고 한다.
자바스크립트 마음이 넓군.... 이걸 통과시켜..?
개발자의 의도와는 상관없이 발생한 암묵적 전역은 나중에 오류를 발생시키는 원인이 될 가능성이 크다. 따라서 반드시 var, let, const 를 사용해 변수를 선언하고 사용해야한다.
strict mode는 자바스크립트의 문법을 좀 더 엄격이 적용하여 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다.
strict mode의 적용
strict mode를 사용하려면 전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가할수있지만 문제가 있다.
전역에 strict mode를 적용하면 스크립트 단위로 적용된다.
함수단위로 strict mode를 적용하면 일일히 함수마다 적용해야한다.
따라서 strict mode는 즉시 실행 함수로 감싼 스크립트 단위로 적용하는것이 바람직하다.
// 1. 전역의 선두에 추가
<script>
'use strict';
function foo () {
x = 10; // ReferenceError : x is not defined
}
foo();
console.log(x);
</script>
<script>
x = 20; // 에러 발생하지 않는다.
</script>
// 2. 함수몸체의 선두에 일일히 추가
function(){
'use strict';
x = 10;
}
function(){
'use strict';
y = 20;
}
function(){
'use strict';
z = 30;
}
// --> 번거로움strict mode 가 발생시키는 에러
- 암묵적 전역
- delete 로 변수,함수,매개변수 삭제
- 매개변수 이름의 중복
- with문 사용
빌트인 객체
자바스크립트 객체의 분류
자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다.
-
표준 빌트인 객체 : ECMAScript 사양에 정의된 객체, 즉 순수 JS에 내장되있는 객체들
-
호스트 객체 : ECMAScipt 사양에 정의되어 있지 않지만 실행 환경 ( node.js 또는 브라우저환경 ) 에서 추가로 제공하는 객체를 말한다. 즉 런타임에서 제공되는 객체
-
사용자 정의 객체 : 사용자가 직접 정의한 객체
표준빌트인객체
자바스크립트는 40여개의 표준 빌트인 객체를 제공한다.
String, Number, Boolean, Function, Array, Date 는 생성자함수로 호출하여 인스턴스를 생성할 수 있다.
대부분 리터럴로 표현 가능한것은 빌트인객체를 사용하지않는것같다.
// 빌트인 쓰는것들 모음집
const arr = new Array(1,2,3);
console.log(arr); // (3) [1, 2, 3]
const regExp = new RegExp(/ab+c/i);
console.log(regExp); // /ab+c/i
const date = new Date();
console.log(date); // // Mon Jan 10 2022 15:26:05 GMT+0900 (한국 표준시)원시값과 래퍼 객체
문자열이나 숫자, 불리언 등의 원시값이 있는데도 String, Number, Boolean 표준 빌트인 객체를 사용하는 이유가 무엇일까?
원시값은 객체가 아니므로 프로퍼티나 메서드를 가질 수 없음에도 원시값인 문자열이 마치 객체처럼 동작한다.
const str = 'hi';
// 원시타입인 문자열이 래퍼객체인 string 인스턴스로 변환되어 동작
console.log(str.length); // 2
console.log(str.toUpperCase()); // HI
// 래퍼객체로 동작하고, 다시 원시값으로 되돌린다
console.log(typeof str); // string이는 원시값인 문자열,숫자, 불리언 값의 경우 이들 원시값에 대해 마치 객체처럼 마침표 표기법 ( 또는 대괄호 표기법 ) 으로 접근하면 자바스크립트 엔진이 일시적으로 원시값을 연관된 객체로 변환해주기 때문이다.
이처럼 문자열, 숫자, 불리언값에 대해 객체처럼 접근하면 생성되는 임시객체를 래퍼객체 라고한다.
그 후 래퍼객체의 처리가 종료되면 래퍼객체는 가비지컬렉션의 대상이 된다.
( 사용하지않는 값 들은 가비지컬렉션이 되어 메모리를 자동으로 제거해준다. )
전역 객체
전역 객체는 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체이다.
어떤 객체에도 속하지 않은 최상위객체이다.
전역 객체는 자바스크립트 환경에 따라 지정하는 이름이 제각각이다.
브라우저 환경에서는 window ( 또는 self, this ) 가 전역객체를 가리키고
Node.js 에서는 global 이 전역객체를 가리킨다.
빌트인 전역 함수
isNaN : 전달받은 인수가 NaN인지 검사하여 불리언타입으로 반환한다.
parseFloat : 전달받은 문자열 인수를 실수로 해석하여 반환한다.
parseInt : 전달받은 문자열 인수를 정수로 해석하여 반환한다.
encodeURI / decodeURI : 인터넷 주소에서 사용하는 :, ;, /, =, ?, & 등을 제외하고 인코딩하는 함수 // encodeURI()로 인코딩한 문자열을 디코딩
encodeURIComponent / decodeURIComponent : 모든 문자를 인코딩하는 함수 // encodeURIComponent()로 인코딩한 문자열을 디코딩
- 인코딩 : 사람이 인지할수있는 데이터형태를 컴퓨터가 사용하는 0과1로 변환
=> 즉, 문자를 바이트형식으로 변환 - 디코딩 : 컴퓨터가 사용하는 0과1형태를 사람이 인지할수있는 문자형태로 변환
=> 즉, 바이트형식을 문자로 변환
const url = "https://www.codingfactory.net/?s=스크립트";
console.log(encodeURI(url)); // https://www.codingfactory.net/?s=%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8
console.log(decodeURI(url)); // https://www.codingfactory.net/?s=스크립트
console.log(encodeURIComponent(url)); // https%3A%2F%2Fwww.codingfactory.net%2F%3Fs%3D%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8
console.log(decodeURIComponent(url)); // https://www.codingfactory.net/?s=스크립트
encodeURIComponent 는 특수기호도 다 문자로 변환
