javascript strict mode 와 sloppy mode 차이점

1. Strict Mode

• ES5(ECMAScript 5)부터 도입된 모드로 명시적으로 "use strict";를 선언해 활성화합니다.
• 코딩 실수를 잡아내고 안전한 코드를 작성하는 데 도움을 줍니다.
• 예) 암묵적 전역 변수 생성 금지, this가 명확하지 않을 때 undefined 반환 등.

 

예제:

"use strict";
x = 10;  // ReferenceError: x is not defined

 

위 코드에서는 x가 선언되지 않은 채 사용되기 때문에 에러가 발생합니다.

 

2. Sloppy Mode (기본 모드)

• 모든 JavaScript 파일에서 기본적으로 적용됩니다.
• 느슨한 검사로 인해 암묵적 오류를 무시하며 코드가 실행됩니다.

예제:

x = 10;  // 암묵적으로 전역 변수를 생성해 에러 없이 실행됨
console.log(x);  // 10

 

이 코드에서는 변수 x를 선언하지 않았지만 에러가 발생하지 않습니다.

 

3. 비교

항목                                    Strict Mode                                                          Sloppy Mode

선언 방식	"use strict"; 선언 필요	별도 선언 없이 기본 적용
오류 탐지	코딩 실수를 엄격하게 검사	일부 오류를 무시하고 실행
암묵적 전역 변수	생성 불가	자동으로 생성됨
this 바인딩	명확하지 않으면 undefined 반환	전역 객체에 바인딩됨 (window 등)

 

 

JavaScript의 **strict mode(엄격 모드)**는 코드의 안전성과 유지보수를 향상시키기 위해 실무에서 다양한 방식으로 활용됩니다.

 

다음은 주요 활용 예시입니다.

1. 에러 예방과 디버깅 효율 향상
   • 실수로 전역 변수를 만드는 것을 방지하고 잘못된 this 바인딩 같은 오류를 잡아줍니다.
   • 개발 초기부터 strict mode를 적용해 오류를 줄이고, 유지보수 시 문제 파악이 쉬워집니다
2. 모듈화 코드 관리
   • 모듈화된 JavaScript 코드에서 엄격한 규칙이 적용되어 코드가 예측 가능하게 동작합니다.
   • 함수나 모듈별로 "use strict";를 적용하여 문제를 국소적으로 관리할 수 있습니다 
3. 리팩터링 및 성능 개선
   • 오타나 불명확한 변수를 자동으로 잡아내어 코드 품질을 개선합니다.
   • 오래된 코드베이스를 리팩터링할 때 strict mode를 도입해 더 나은 코드를 유지할 수 있습니다 
4. ES6 모듈에서 기본 적용
   • ES6 모듈은 기본적으로 strict mode가 적용되므로 명시적인 선언이 필요하지 않지만, 개별 함수나 스크립트에서 필요할 때 추가합니다 

 

Strict mode와 Sloppy mode의 스크립트 연결은 문제를 일으킬 수 있기 때문에 심사숙고해야 한다.
사용해야 한다면, 함수를 기준으로 Strict mode를 사용하는 것이 좋다.

 

함수에 적용

function strict() {
  // 함수-레벨 strict mode 문법
  'use strict';
  function nested() { return "And so am I!"; }
  return "Hi!  I'm a strict mode function!  " + nested();
}
function notStrict() { return "I'm not strict."; }

 

자바스크립트는 사용자의 개인정보에 접근할 수 있고, 자바스크립트의 유연성으로 인해 많은 런타임 체크가 필요함
Strict mode를 사용하면 특정 방식으로 호출되므로 런타임 검사의 필요성이 크게 줄어들게 됨
this로 함수에 전달된 값은 강제로 객체가 되지 않음

 

function func() { return this; }
console.assert(func() === undefined);
console.assert(func.call(2) === 2);
console.assert(func.apply(null) === null);
console.assert(func.call(undefined) === undefined);
console.assert(func.bind(true)() === true);

 

function func() { return this; }
console.assert(func() === undefined);

코드 설명

1. Strict Mode가 아닐 때
   • func()를 호출하면 this는 기본적으로 전역 객체(window 또는 global)를 참조합니다.
   • 이 경우, console.assert(func() === undefined);는 실패합니다. 왜냐하면 func()의 반환 값은 undefined가 아니라 전역 객체입니다.
2. Strict Mode에서
   • "use strict";를 선언하면 함수 내부에서 this는 **undefined**가 됩니다.
   • 이로 인해 console.assert(func() === undefined);가 성공합니다.

수정된 코드 (Strict Mode 적용)

"use strict";
function func() {
  return this;
}
console.assert(func() === undefined);  // Assertion 성공

 

strict Mode는 암묵적인 전역 변수 선언을 방지하고 더 엄격한 오류 검사를 적용하기 위해 도입되었습니다

 

function func() {
  return this;
}
console.assert(func.call(2) === 2);

 

console.assert(func.call(2) === 2)에서 중요한 부분은 call() 메서드와 this의 바인딩입니다.

 

• call() 메서드
  • call()은 함수를 호출하면서 첫 번째 인자로 전달된 값을 this로 바인딩합니다.
  • 따라서, func.call(2)를 실행하면 this가 숫자 2로 설정되고 함수는 2를 반환합니다.
• console.assert()
  • console.assert()는 첫 번째 인자가 **거짓(false)**일 때만 오류 메시지를 출력합니다[1].
  • 위 코드에서는 func.call(2)의 결과가 2이므로 console.assert(2 === 2)는 **참(true)**입니다.
  • 따라서 오류가 발생하지 않습니다.

 

function func() {
  return this;
}
console.assert(func.apply(null) === null);

 

console.assert(func.apply(null) === null);는 apply() 메서드를 통해 this가 null로 설정된 함수 호출을 확인합니다. 아래는 코드의 동작 원리입니다.

 

• apply() 메서드
  • apply()는 첫 번째 인자로 전달된 값을 함수의 this로 바인딩합니다.
  • 위 코드에서는 func.apply(null)로 호출되므로, 함수의 내부에서 this가 null로 설정됩니다[4].
• console.assert()
  • console.assert()는 첫 번째 인자가 **거짓(false)**일 때만 콘솔에 오류를 출력합니다.
  • 여기서 func.apply(null)의 결과는 this가 null로 바인딩되어 null을 반환합니다.
  • 따라서 console.assert(null === null)은 참(true)이므로 오류가 발생하지 않습니다.

 

 

 

 

function func() {
  return this;
}
console.assert(func.call(undefined) === undefined);​

 

console.assert(func.call(undefined) === undefined);는 call() 메서드로 함수를 호출하며, 이때 **this가 undefined**로 설정되는 상황을 테스트합니다. 아래는 코드의 동작 방식입니다.

 

 

• call() 메서드
  • call()은 첫 번째 인자로 전달된 값을 this로 바인딩하여 함수를 실행합니다.
  • func.call(undefined)의 경우, this는 undefined로 설정됩니다.
• Strict Mode 여부에 따른 차이
  • Strict mode에서는 undefined가 그대로 유지되며, this가 undefined로 설정됩니다[1].
  • 반면, 비엄격 모드에서는 this가 자동으로 **전역 객체(global object)**로 바뀝니다 (브라우저에서는 window) [4].
• console.assert() 사용
  • func.call(undefined)의 결과가 undefined인 경우만 콘솔에 오류가 출력되지 않습니다.
  • 엄격 모드에서만 이 표현이 true를 반환하므로, Strict mode에서 정확하게 동작합니다.

 

function func() {
  return this; // 'this' will be bound to 'true'
}

console.assert(func.bind(true)() === true);

 

 

console.assert(func.bind(true)() === true);는 bind() 메서드를 사용하여 함수의 this 값을 특정 값(true)에 고정한 후 실행한 결과가 예상대로인지 확인하는 코드입니다.

 

• func.bind(true):
  • func 함수의 this를 true로 고정한 새로운 함수를 만듭니다.
• ()()로 호출:
  • bind()로 생성된 함수가 호출되며, 내부에서 this는 항상 true가 됩니다.
• console.assert():
  • 조건이 **true**가 아닐 경우 오류를 발생시킵니다. 만약 this가 true가 아닌 값으로 평가되면 콘솔에 오류가 출력됩니다.

이 코드는 bind()를 사용하여 함수의 this가 변하지 않도록 하고, 의도한 동작이 실행되는지 검증합니다.