안녕하세요!
오늘은 우리 곁에 있는지 없는 지도 모르게 녹아들어있는
'strict mode'에 대해서 알아보겠습니다!
만약 여러분의 프로젝트가 babel을 사용하고 있다면?
또한 module 형태로 코드를 작성했다면?
strict mode가 뭔지 모르셨더라도 이미 strict mode로 동작하는 코드를
작성하신 셈이 됩니다! 🎇
그래서 오늘은 면접에서도 간혹 물어보는 strict mode 개념에 대해 정리해보려고 합니다!
엄격 모드란?
기존 JS 동작에서 발생할 수 있는 문제를 검출하기 위해, 까다롭게 문법 검사를 하는 모드
넵 그렇습니다.
이보다 더 깔끔한 설명은 있을 수 없는 거 같네요.
그래서 어떤 부분들을 검사하는지 보면서,
strict mode에 대한 개념을 잡는 것이 좋을 거 같아요!
1. 엄격 모드의 특징
엄격 모드는 기존 JS에서는 허용되지만 실수를 유발할 수 있는 문법을 제한하고 있어요!
1-1. 📌 제한되는 문법
1. 글로벌 변수 생성 불가
원래는 위와 같이 입력하면 mistypedVaraible이라는 전역 변수가 생성되지만,
strict mode에서는 해당 구문을 에러로 처리합니다.
2. 변수의 할당이 실패했을 경우에 대한 예외 발생
변수 할당 실패에 대한 시나리오는 굉장히 다양합니다.
NaN, undefined 에 값을 할당하려고 시도할 경우, 기존에는 아무런 동작도 수행하지 않고 넘어갔지만
strict mode에서는 이와같은 동작에서 예외를 발생시킵니다!
3. 삭제할 수 없는 프로퍼티에 대한 예외 발생
아 물론 이런짓을 하는 사람은 없겠지만,
여러 명이서 개발하다보면 다음과같은 실수를 혹시나 할 수도 있겠죠!
원래는 아무런 동작도 수행하지 않고 넘어가지만,
strict mode에서는 예외를 발생 시킵니다!
4. 객체의 프로퍼티의 이름에 대한 중복 불가 (ES2015 이후로는 에러 아님!)
Gecko 34 이전의 strict 모드에서는 에러였지만, ES2015 이후로는 아니라고 하네요!
5. 함수 파라미터 이름에 대한 중복 불가
당연히 에러가 나야겠죠!
6. 8진수 구문사용 불가
이 부분은 모르시는 분들도 많고 실수하시는 분들도 있을 거 같은데요!
C언어를 배우신 분이라면
숫자 앞에 접두사로 '0'을 붙이면 8진수 표현법을 사용할 수 있다는 것을 알고 계실 겁니다!
그런데 간혹 숫자의 정렬을 위해서 위와 같이 0을 붙이는 경우가 있는데,
이 경우 10진수 15가 아니라 8진수 13으로 인식하기때문에
예상치 못한 에러가 발생할 수 있겠죠...
그래서 strict mode에서는 8진수 표현을 아예 금지 시키고 있습니다.
😥 그래도 꼭 8진수 표현이 필요하다면..?
변수 앞에 확실하게 '0o'를 붙여서 8진수로 표현할 수 있습니다.
근데 이 문법은 ES6 이후 버전에서만 사용 가능해요!
7. primitive 값애 프로퍼티 설정 불가
당연히 primitive 타입은 모두가 공유하고 사용하는 개념이니
함부로 바꿔서는 안 되겠죠!
1-2. ❗ 추가적인 제한 내용
그 외에도 많은 내용들이 있지만,
핵심적인 몇 가지만 전달해드리자면
1. 전역 scope에서의 this가 undefined가 됨
JS에서 this는 굉장히 중요한 이슈죠!
원래 전역 scope에서의 this는 브라우저 환경일 경우 window 객체가 나오지만,
strict mode의 경우 undefined가 나온다는 사실!
간단하지만 아주 명확한 차이점이에요.
2. 함수의 caller, arguments 프로퍼티에 대한 접근 제한
특정 함수의 caller나 arguments를 알아내는 일이 보안상 문제가 될 수 있어서 제한한다고 하네요.
그러나 왜 문제가 되는지 정확히 모르겠씁니다..
🍖 혹시 알고 계신 분은 댓글로 알려주세요!
3. 미래 ECMAScript에 대한 예약어 식별 및 제한
위 코드의 변수 명을 보면 왠지 사용하면 안 될 거 같은 이름들이죠?
프로그래밍 세계에서 예약어로 많이 사용되는 단어들이
parameter 또는 변수 이름으로 지정됐습니다.
기존에는 현재 사용하는 예약어가 아니기때문에 문제 없이 동작했지만,
strict mode에서는 이런 행동을 제한하고 있어요!
2. 엄격 모드 적용 방법
2-1. 스크립트에 적용하기
스크립트 최상단에 'use strict' 구문을 넣습니다.
스트립트 전체를 strict 모드로 수행시키고 싶다면, 위와 같이 추가하시면 됩니다!
2-2. 함수에 적용하기
함수 본문 처음에 'use strict' 구문을 넣습니다.
하나의 함수를 strict 모드로 수행시키고 싶으시면 이렇게 하시면 되는데
많이 사용하지는 않을 거 같습니다..🎃
그래도 가능하다는 것은 알아두어야죠!
2-3. 모듈에 적용하기(?)
모듈은 기본적으로 strict mode 입니다.
이전 포스팅에서도 한 번 말씀드렸는데, module은 기본적으로 strict mode로 동작합니다.
혹시 추가적인 내용이 궁금하시면 JS 모듈 포스팅 글을 참고해주세요!
3. 엄격 모드의 브라우저 호환성
혹시나 strict mode를 부분적으로 지원하거나, 아예 지원하지 않는 브라우저가 있을 수 있다고 해요!
그러니 테스트는 언제나 strict mode가 지원되는 브라우저에서,
그리고 배포 전에는 지원하지 않는 브라우저에서의 동작도 꼭 한 번 확인해봐야겠습니다!
