🚦 본론

흔한 자바스크립트의 비엄격 모드

엄격 모드! 생각보다 익숙한 주제네요 🙇🏻‍♂️
자바스크립트에서는 비엄격 모드로 개발할 시 괴상한 일들이 정~말 많이 벌어집니다.

암묵적 전역

선언하지 않은 변수를 등록할 때 암묵적으로 전역 객체의 프로퍼티로 할당하기 때문에 다음 코드는 에러를 발생하지 않습니다!

function test() {
	NO_DECLARE_VAR = 'test';
}

console.log(NO_DECLARE_VAL); // test

변수, 함수, 매개변수 삭제 명령 시 에러 X

잘 생각해보면 암묵적 전역에서 파생된 문제에요.
결국 암묵적 전역은 전역 객체의 프로퍼티로 할당하는 거죠?
따라서 delete로 변수, 함수를 삭제할 수도 있답니다. 허허... 😭

매개변수는 엄밀히 말하자면 함수 내부에서 존재하는 지역 변수이므로 삭제가 되지는 않습니다만, 에러를 발생시키지 않는다는 점은 개발자들 간의 코드 분석을 헷갈리게 하는 요소기도 하죠!

function test() {
	a = 1;
    delete a;
}
console.log(a) // Reference Error: a is not defined

매개 변수 이름 중복

이건 저도 몰랐는데요!
매개 변수 이름이 중복되도 에러가 나지 않는군요?!
이때의 매개 변수는 중복된 이름 중 마지막 인수에 적용된답니다!

function foo(x, x) {
  console.log(x)
}

foo(3,4)

with 문의 사용

with... 아무래도 어떤 변수를 검색하는 것이 옳은지를 판단하기가 애매해서 더이상 사용하지 않죠.

하지만 비엄격 모드는 with도 언제든지 환영입니다! 🙆🏻

function test(arg) {
	with(arg) {
    	console.log(arg)
    }
};

test({ arg: 'test!' }); 
// result value: test!; 
// expected value: { arg: 'test!' }를 반환해야 함.

arguments 객체

매개변수가 변경될 때, arguments의 값도 바뀌게 된다는 사실! 알고 계셨나요? 👀

function test(a) {
  a = 3
  console.log(arguments)
}

test(1); // [Arguments] { '0': 3 }

엄격모드의 등장과 한계

이런 문제들 때문에 엄격 모드는 사용되고 있어요!

함수 몸체 내부의 맨 위나, 전역 코드의 맨 위에 strict mode를 선언해주세요. 그렇게 한다면 지역 / 전역으로 동작할 수 있어요. 😉

function test(a) {
  a = 3
  console.log(arguments)
}

test(1); // [Arguments] { '0': 1 }

중요한 건, use strict는 함수 레벨 스코프를 따릅니다. 따라서 블록 레벨 스코프에서의 스코프는 적용이 되지 않는다는 점에 유의하세요!

{
  "use strict";
  function test(a) {
    a = 3
    console.log(arguments)
  }
}

test(1); // [Arguments] { '0': 3 }

한계

다만 이러한 use strict는 전역에서 사용하면 써드 파티 라이브러리가 non-strict mode일 경우에 원치 않는 영향을 주기도 해요.

따라서 지역적으로 쓰는 것을 권장합니다.

😖 엇, 계속 함수 쓸 때마다 비엄격 모드를 선언하는 거 너무 귀찮은데요?!

따라서 정적 분석 도구인 린터를 사용하여, 규칙을 정의하여 사용하는 것을 권장해요!
대표적으로 ESLint가 있답니다 😁

🌈 마치며

사실 생각보다 "use strict"를 직접적으로 써서 사용하는 경우는 없긴 하네요.
ESLint가 생각보다 강력하기 때문입니다. (ESLint의 룰을 어긴다면 에러를 내뱉도록 하는 플러그인 등을 추가하면 더욱 안정성 있는 애플리케이션 운영이 가능하기도 해요!)

그런데 가끔, 간단하게 테스트로 코드를 작성할 땐 ESLint를 적용하지 않을 때가 있는데요, 이럴 때에는 사용하면 유용할 것 같아요. 이상!