개발공부/Javascript

#기본기2_"use strict"

킴승 2024. 4. 2. 17:35

1. "use strict"란 무엇인가?

 

use strict(엄격모드)란 ES5에 등장한 기능으로

ES5 이전 자바스크립 기능을 변경한 내용을 활성화 시켜주는 모드이다.

"use strict"; // 스크립트 최상단에 있어야 한다

// 함수 내에서 선언하여 해당 함수에서만 사용할 수도 있다.
// 물론 해당 함수 내에서 최상단에 위치해야함
function strictTest(){
    "use strict"; 
    console.log('this is strict mode!')
}

 

2. 등장배경

 

1) 자바스크립트는 오랜기간 기존의 기능을 변경하지 않고, 새로운 기능만 추가해왔음

2) 업데이트가 되도 기존에 작성한 코드가 문제가 되지 않았음.

3) ES5가 등장하면서 기존의 기능이 변경됨에 따라 호환성 문제가 발생함.

4) 이 문제를 해결하기 위해 ES5에서 strict모드가 나왔으며, 해당 모드에서만 변경사항이 활성화되록 설정해놓음.

 

** ES5 업데이트 내용 (참고 : https://usingu.co.kr/frontend/javascript/javascript-es5/)

forEach, map, filter, reduce, every, JSON.stringfy 등 메소드 추가

Object에 대한 getter, setter 지원

strict mode지원 ...

 

3. 왜 strict mode에 대해 알아야할까?

 

    우리가 자주 사용하는 프레임워크와 문법에 strict mode가 적용되어 있기 때문에 무엇인지 알아야한다.

  1. React, Vue, Angular 등의 현대적인 프론트엔드 프레임워크들은 기본적으로 엄격모드(strict mode)에서 실행된다. 따
  2. ES6부터 도입된 클래스(class)와 모듈(module)은 기본적으로 엄격모드(strict mode)에서 실행된다. 
// class
class Person{
    constructor(name){ 
        this.name = name;
    } 
    sayHello(){
        console.log(`Hello, ${this.name}`)
    }
}

const person = new Person('godpeple')
console.log(person)

// module
export function add(a, b){
    return a + b;
}

4. strcit mode의 장점은 무엇인가?

 

  1. 전역변수의 암묵적 선언을 방지하여 변수의 범위를 명확히 한다.

  • var, let, const 키워드가 없는(명시적선언이 아닌) 암묵적 선언을 할 경우 오류가 발생함. 
// ReferenceError: test is not defined
"use strict";

test = 10;
console.log(test)

 

  2. 안전하지 않은 동작을 금지하여 코드의 안정성을 높인다.

  • 변수 삭제의 제한
// Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.

"use strict";

let test = 10;
delete test;

 

  • 암묵적인 'this' 바인딩의 제한 

 일반적으로 전역에서 함수를 선언하면 함수안의 this는 window객체를 가리킨다.

 엄격모드에서는 this가 undefined로 나온다.

// Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}
function thisTest(){
    console.log(this)
}

const test = thisTest() 


// undefined
"use strict";

function thisTest(){
    console.log(this)
}

const test = thisTest()

 

 

  • with 문 금지 : 사실 사용하지는 않는 듯 하다.
// Uncaught SyntaxError: Strict mode code may not include a with statement
"use strict";

const person = {
  name: 'John',
  age: 30
};

with (person) {
  console.log(name); // 출력: 'John'
  console.log(age); // 출력: 30
}

 

  3. 성능 최적화를 통해 코드 실행 속도를 향상시킨다.

 

1) 암묵적인 this바인딩 제한하여 함수 호출시 발생하는 오버헤드를 줄인다

2) 암묵적인 전역변수 생성을 방지하여 메모리 누수를 예방한다

3) Arguments객체의 동적 바인딩을 최적화하여 함수의 실행속도를 향상시킨다

4) eval함수의 사용이 제한되며, 함수의 인자를 중복으로 선언하는 것이 금지됨, 불필요한 연산을 줄여서 성능을 향상시킴

* eval() 함수는 문자열을 자바스크립트 코드로 해석하고 실행하는 함수, 사실상 사용하지 않음.

// 중복된 인자 선언 : 결과 3,2
function foo(a, b, a) {
  console.log(a, b);
}
foo(1, 2, 3); // 3, 2


// 엄격모드 Uncaught SyntaxError: Duplicate parameter name not allowed in this context
function foo(a, b, a) {
  console.log(a, b);
}
foo(1, 2, 3); // 실행 시 SyntaxError 발생: Duplicate parameter name not allowed in this context