[Javascript] strict 모드

안녕하세요 개발자 han입니다🙌

오늘은 짧게 자바스크립트에서의 strict 모드에 대해서 알아보도록 하겠습니다!
이 포스팅을 하려고 마음먹은 계기는 이렇습니다

타입스크립트를 조금 공부하기는 했습니다만, 제대로 안다고 할 수는 없습니다.
그럼에도 불구하고, 마냥 타입시스템과 인터페이스 정의..제네릭 등 새로운 기능에 눈독을 들이며
타입스크립트로 주 개발언어를 전환하고 싶었는데요, 어느날 주변 개발자로부터 이런 말을 들었습니다.

자바스크립트의 수퍼셋이 타입스크립트라고 하는데 자바스크립트를 제대로 알지 못하면 타입스크립트 또한 그럴 것이다. 덧셈 뺄셈을 하지않고 곱셈 나눗셈을 하려고 하는것과 같다.

저는 무조건 더 많은 기능을 가진 것이 좋다고 생각했는데, 차근차근 단계를 밟아나가야 제대로 익힌다는 것을 잊고있었나봅니다. 그래서 자바스크립트의 서브셋인 strict mode 부터 차근차근 익혀나가기로 했습니다.

strict mode에선 큰 틀에서 다음과 같은 것이 달라집니다.

1. 기존에는 조용히 무시되던 에러들을 throwing합니다.
2. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어집니다.
3. 엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지합니다.

이번 포스팅은 차이에 대해서 간략하게 집고 넘어가도록 하겠습니다.
단순 strict 모드에 대해서 배우는 것이 아니라, 반대로 normal 자바스크립트에서는 이런 것이 됐었구나! 라는 느낌으로 이해하셔도 좋을 것 같습니다.

그럼, 시작합니다🙋‍♂️

사용법

스크립트나 함수의 시작 부분에 "use strict"를 선언하면 그 스코프는 strict 모드로 작동합니다.
코드를 모듈 혹은 클래스로 사용하면 strict 모드로 동작하므로 이미 strict 모드로 코드를 작성하고 있을지도 모릅니다.

일반 javascript와의 차이점

getter만 존재하는 객체는 수정 불가

"use strict"
const obj= { get a() { return 1 } }
obj.a = 10 // error

delete 호출 불가

변수, 함수, 객체의 속성에 대한 delete 호출이 불가능

"use strict"
const a = 1
function b () {}
const c = { x: 1 }
Object.defineProperty(c, "y", { value: 10}})

delete a // error
delete b // error
delete c.x // success
delete c.y // error

여기서 delete c.x를 했을 때 성공하는 이유는 c.x의 속성과 c.y의 속성이 다르기 때문이다.

Object.getOwnPropertyDescriptors(c)

{ 
  x: { value: 1, writable: true, enumerable: true, configurable: true },
  y: {
    value: 10,
    writable: false,
    enumerable: false,
    configurable: false
  }

하나씩 바꿔주며 테스트해본 결과 configurable 속성이 false이면 strict 모드에서 delete를 호출했을때 에러가 난다. 테스트 도중 발견한 사실인데, configurable이 false이면 일반 자바스크립트에서도 삭제가 안된다.
객체를 console로 출력해보면 아무것도 안보이지만. Object.getOwnPropertyDescriptors(obj)로 출력해보면 속성이 존재하는 것으로 나온다. 흥미롭다. delete, getOwnpropertyDescriptors의 동작에 대해서 더 알아보면 새로운 것을 알게될 것 같은 느낌적인 느낌이 든다. 일단 현재 작성중인 문서의 스코프를 벗어나니 다음에 다시 포스팅 하도록하자....

함수에서 동일한 이름의 파라미터 선언 불가

"use strict"
function fn(aa, aa) {} // error

이런게 되나싶어서 해봤는데 strict모드가 아니면 되더군요... @.@
왜 필요한지는 잘 모르겠습니다.

8진수 숫자리터럴 및 이스케이프 문자 사용 불가

"use strict"
const num1 = 010 // Error

Primitive type의 property를 설정할 수 없음

"use strict"
"a".value = "b" // Error

strict 모드가 아닌 경우, 해당 코드는 무시됩니다.

arguments와 eval을 함수명, 변수명으로 사용할 수 없음

this의 값이 undefined 혹은 null인 경우 전역 객체로 변환하지 않습니다.

eval이 주변 스코프에 변수를 추가하지 않습니다.

"use strict"

var x = 0;
var eval = eval("'use strict'; var x = 1; x;");
console.log(x) // 0

어떠셨나요?

아, 나는 항상 이렇게 쓰고있었는데? 하셨던 분도 계시겠지만,
이러한 방법도 있었구나 정도로 생각해주시면 좋을 것 같습니다!

그럼 다음에도 유익한 내용으로 돌아오겠습니다! 🙋‍♂️