[JavaScript Deep Dive] 20. strick mode

소정·2024년 1월 31일
0
post-thumbnail

아침 8시에 1시간 공부하고 수업 들으러 가는 나 어떤데 ... 멋.. 진가 ? (ㅎ)
프로토타입보다는 훨씬 맘이 가벼운 strick mode 가보자고 !


1. strick mode란?

function foo(){ x = 10; }
foo(); 

console.log(x); // 1️⃣ ??

foo 함수 내에서 선언하지 않은 변수를 할당했고, x를 참조했다. 과연 1번 위치에선 어떤 값이 콘솔에 찍힐까?

  1. 자바스크립트 엔진은 foo 함수의 스코프에서 x 변수의 선언을 검색 -> 실패
  2. foo 함수 컨텍스트의 상위 스코프(전역 스코프)에서 x 변수의 선언 검색

위의 과정을 거쳐 x 변수 선언을 찾지 못해서 ReferenceError가 발생할 것 같다면 정상이다.

📌 암묵적 전역

하지만 자바스크립트 엔진은 우리의 생각과는 아주 다르게 ... 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. (례?)
전역 객체 x 프로퍼티는 전역 변수처럼 사용이 가능하다. 이러한 현상을 암묵적 전역이라고 한다.

개발자의 의도와는 상관없이 자바스크립트 엔진이 멋대로 냅다 선포해버린 암묵적 전역은, 오류를 발생시킬 원인이 될 가능성이 크다. 따라서 개발자는, '변수 선언을 하지 않아도 할당이 되네 ~? 냠냠굿'이 아니라 ! 반드시 var, let, const 키워드를 사용하여 변수 선언을 하고 변수를 사용해야 한다.

📌 짜잔 strict mode !

암묵적 전역의 잠재적 오류를 줄이고 아예 오류가 발생하기 어려운 환경을 만들기 위해 strict mode(ES5)가 추가되었다.
strict mode는 자바스크립트의 문법을 엄격하게 적용하여, 오류나 최적화 작업에 문제를 일으킬 수 있는 코드에 명시적인 에러를 발생시킨다.

ESLint 같은 린트 도구를 사용해도 strict mode와 유사한 효과를 얻을 수 있다.
린트 도구는 코딩 컨벤션을 설정 파일 형태로 정의하고 강제할 수 있기 때문에 strict mode보다 유용하다. (필자왈)

  • 린트도구 : 정적 분석 기능을 통해 소스 코드를 실행하기 전에 문법적 오류 + 잠재적 오류를 찾아내어 리포팅해주는 도구

2. strict mode의 적용

  • 사용 방법 : 전역/함수 몸체의 선두에 use strict;를 추가함
// 1️⃣ 전역의 선두
'use strict';
function foo(){ x=10 } // ReferenceError: x is not defined
foo();

// 2️⃣ 함수 몸체의 선두
function foo(){ 
  'use strict';
  x = 10 // ReferenceError: x is not defined 
} 
foo();

3. 전역에 strict mode를 적용하는 것은 피하자

전역에서 적용한 strict mode스크립트 단위로 적용된다.
strict mode 스크립트와 non-strict mode 스크립트를 혼용하는 것은 오류를 발생시킬 수 있다.

특히 외부 서드파티 라이브러리를 사용하는데 non-strict mode라면, 전역에 strict mode를 적용하는 것은 바람직하지 않다. 이럴 경우엔 즉시 실행 함수로 스크립트 전체를 감싸서 스코프를 구분하여 strict mode를 적용하는 것이 좋다.


4. 함수 단위로 strict mode를 적용하는 것도 피하자

오잉? 그럼 대체 strict mode를 언제 쓰라는건가 싶지만? 우선 가보자고 !

앞서 전역의 선두 또는 함수 본문의 선두에서 strict mode를 사용할 수 있는 점을 확인했다.
하지만 어떤 함수는 strict mode, 어떤 함수는 non-strict mode로 적용하는 것은 바람직하지 않다.
또한 모든 함수에 일일이 strict mode를 작성하는 것은 상당히 번거롭다.

strict mode가 적용된 함수가 참조하는 함수 외부 컨텍스트에는 strict mode가 적용되지 않았다면, 이것 역시 문제가 발생할 여지가 있다. 따라서 strict mode즉시 실행 함수로 감싼 스크립트 단위로 적용하는 것이 좋다.


5. strict mode가 발생시키는 에러

대표적인 에러를 몇 가지 살펴보자.

  • 암묵적 전역 : 선언하지 않은 변수를 참조하면 ReferenceError
  • 변수, 함수, 매개변수의 삭제 : delete 연산자로 변수/함수/매개변수를 삭제하면 SyntaxError
  • 매개변수 이름의 중복 : 중복된 매개변수 이름을 사용하면 SyntaxError
  • with 문의 사용 : with문 사용하면 SyntaxError
    • with문은 전달된 객체를 스코프 체인에 추가함
    • 이때 동일한 객체의 프로퍼티를 반복해서 사용할 때 객체의 이름을 생략할 수 있음
    • 코드가 간단해질 수 있지만 성능과 가독성이 나빠져서 사용하지 않는 것이 좋음

6. strict mode 적용에 의한 변화

1. 일반 함수의 this

  • strict mode X : 일반 함수에서 this 호출하면 this에 전역 객체 바인딩
  • strict mode O : 일반 함수에서 this 호출하면 this에 undefined 바인딩

2. arguments 객체

  • strict mode X : 매개변수에 전달된 인수를 재할당하여 변경하면 arguments 객체에 반영됨
  • strict mode O : 매개변수에 전달된 인수를 재할당하여 변경하면 arguments 객체에 반영되지 않음

19장 프로토타입의 여파가 커서인지, strict mode가 6절만에 끝났다는게 믿기지 않는다. (사실 믿김)
수업시간에 어느정도 strict mode를 배우고 읽어서 그런지 쑥쑥 읽혔는데,
암튼 strict mode는 즉시 실행 함수로 감싸서 사용을 해야하고 나도 린트 도구를 쓰는 것이 더 편할 듯 하다 !

추가로, 어제 수업 진도에서 프로토타입을 나갔다 ... !
[[Prototype]], F.prototype, __proto__, constructor 등의 많은 개념이 나와서 어려웠지만 확실히 모던 자스 딥다이브로 한번 훑고 가니까 전체적인 맥락이 보였다. (만세 ~)
수업 진도 복습, 예습 하면서도 꼭 가져가야 할 명분 확실히 생김쓰 !

그럼 오늘 남은 시간도 화이팅 해보자고 ~! (현재 아침 8시 36분 ㅎ)

profile
" 퍼블리셔에서 프론트엔드로 Level up 중 =3 "

0개의 댓글