strict mode

팀 러버덕 by Hoon

strict mode란?

function random() {
  x = "얘가 출력 될까요?";
}

random();

console.log(x);

위의 코드 결과의 실행값을 예상해보세요

strict mode 적용

'use strict';

function random() {
  x = "얘가 출력 될까요?"; // ReferenceError!
}

random();

console.log(x);

위의 코드 결과의 실행값을 예상해보세요

전역에는 strict mode 사용 금지!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <script>
    'use strict';
  </script>
  <script>
    x = 1; // 에러가 발생하지 않습니다!
  </script>
  <script>
    'use strict';
    y = 1; // Reference Error!
  </script>
</body>
</html>

strict mode는 선언한 스크립트에만 적용된다!

함수단위로도 strict mode 사용 금지!

function thisIsStrict() {
  'use strict';

  x = 10; // Reference Error
}

function thisAint() {
  y = 10
}

함수마다 다 use strict를 적용하는건 너무나 번거롭다!

그럼 strict mode는 무얼 하나요?

암묵적 전역 방지

매개변수 이름의 중복 방지

'use strict'; 

function itsStrict() {
  x = 1; 
}

console.log(x) // reference error!
"use strict";

function itsStrict(num, num) {
  return num + num;
}

console.log(itsStrict(10, 201));

strict mode 사용시 주의점

일반 함수의 this

arguments 객체

"use strict";

function thisTest() {
  console.log(this); // undefined
}

function ConstructorFunction() {
  console.log(this); // ConstructorFunction {}
}

new ConstructorFunction();


"use strict";

function double(num) {
  num = 10;
  console.log(arguments);
  return num * 2;
}

double(2); // { 0: 2 }

정적 프로퍼티 메서드

function Article(title, content, publishedDate = new Date()) {
  this.title = title;
  this.content = content;
  this.publishedAt = publishedDate;
}

// prototype method
Article.prototype.getArticleInfo = function () {
  return `${this.title}: ${
    this.content.length < 20 ? `${this.content.slice(0, 20)}...` : this.content
  }`;
};

// static property
Article.publisher = "Hoon";

Article.isRecentlyPublished = function (articleInstance) {
  return (
    (new Date().getTime() - articleInstance.publishedAt.getTime()) /
    (1000 * 60 * 60 * 24 * 3)
  );
};

const post = new Article("제목", "내용", new Date());
console.log(post);

정적 프로퍼티 메서드

Article 생성자 함수

prototype

Article.prototype

constructor

Article

post1

title

new 키워드로 생성

자바스크립트

[[Prototype]]

Function.prototype

constructor

Object.prototype

constructor

Object

...

...

Function

...

...

[[Prototype]]

[[Prototype]]

[[Prototype]]

content

글 내용..

publishedAt

2022-...

getArticleInfo

<function>

프로토타입에 등록된 메소드!

publisher

isRecentlyPublished

hoon

<function>

생성자 함수에 등록된 static 프로퍼티

Made with Slides.com