20 - strict mode

2022. 9. 13.·🎨 프론트엔드 공부/JS & TS

모던 자바스크립트 Deep Dive 정리

1. strict mode란?

▶ 오류를 발생시킬 가능성이 높거나 JS 엔진의 최적화에 문제를 일으킬 수 있는 코드에 대해 명시적 에러 발생

▷ ES5에서 추가

▷ ESLint의 하위 호환

▷ ES6에서 추가된 클래스와 모듈은 기본적으로 strict mode가 적용됨

2. strict mode 적용

▶ 전역의 선두 혹은 함수 몸체의 선두에 `use strict`; 를 추가

▷ 전역의 선두에 추가하면 스크립트 전체에 strict mode 적용

▷ 함수 몸체의 선두에 추가하면 해당 함수와 중첩 함수에 strict mode 적용

3. 전역의 선두에 strict mode 적용은 바람직하지 않음

▶ 서드파티 라이브러리의 경우 non-strict mode로 설정된 경우가 있음

▷ 이 때 충돌로 인한 에러를 발생시킬 수 있다

4. 함수 단위로 strict mode 적용도 바람직하지 않음

▶ strict mode가 적용된 함수가 참조할 외부 컨텍스트가 non-strict mode이면 에러 발생할 수 있음

▷ 즉시실행함수로 감싼 스크립트 단위로 적용하는 것이 바람직함

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

5-1. 암묵적 전역

▶ 선언하지 않은 변수를 참조하면 ReferenceError 발생

5-2. 변수, 함수, 매개변수 삭제

▶ delete 연산자로 변수, 함수, 매개변수를 삭제하면 SyntaxError 발생

5-3. 매개변수 이름 중복

▶ 중복된 매개변수 이름을 사용하면 SyntaxError 발생

5-4. with 문 사용

▶ with 문은 전달된 객체를 스코프 체인에 추가한다

▷ 객체이름을 생략할 수 있어서 코드가 간단해지지만, 성능과 가독성이 나빠지므로 사용하지 않는 것이 좋다

6. strict mode 적용에 의한 변화

6-1. 일반 함수의 this

▶ 일반 함수에서 this를 참조하면 this에 undefined가 바인딩됨

6-2. arguments 객체

▶ strict mode에서는 매개변수에 전달된 인수를 재할당하여 변경해도 arguments 객체에 반영되지 않음

'🎨 프론트엔드 공부/JS & TS' 카테고리의 다른 글
  • 22 - this
  • 21 - 빌트인 객체
  • 19 - 프로토타입
  • 18 - 함수와 일급 객체
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (522)
      • 🎨 프론트엔드 공부 (247)
        • JS & TS (93)
        • HTML & CSS (24)
        • React & Next (51)
        • Vue & Nuxt (22)
        • 기타 (57)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (16)
        • Work (0)
        • Toy (16)
      • ⚙️ 개발 팁 & 노하우 (23)
        • 프론트엔드 (6)
        • 기타 (17)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • 태그

    react-query
    Python
    컴퓨터구조
    javascript
    typescript
    DFS
    브루트포스
    좋은코드나쁜코드
    타이탄의도구들
    웹접근성
    머신러닝
    Vue.js
    SQL
    DP
    PostgreSQL
    GATSBY
    컴포넌트
    객체지향의사실과오해
    nuxt
    태블로
    BFS
    react
    nextjs
    cssbattle
    AWS
    백트래킹
    프로그래머의뇌
    프로그래머스
    그리디
    자료구조
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.4
지식물원
20 - strict mode
상단으로

티스토리툴바