웹/JavaScript

[Javascript] 모던자바스크립트 딥 다이브 2일차 (~358p)

Judith Hopps 2023. 1. 17. 10:44
반응형

17. 생성자 함수에 의한 객체 생성

17.1 Object 생성자 함수

자바스크립트 Object 생성자 함수 이외에도

String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다.

 

//RegExp
const regExp = new RegExp(/a+b/i) 
console.log(typeOf regExp) // object

19. 프로토 타입

19.13 프로퍼티 존재 확인

in 연산자

for-in 문을 사용하면 객체(배열 포함)에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male'
};

// prop에 객체의 프로퍼티 이름이 반환된다. 단, 순서는 보장되지 않는다.
for (var prop in person) {
  console.log(prop + ': ' + person[prop]);
}

for-in 문은 객체의 문자열 키(key)를 순회하기 위한 문법이다. 배열에는 사용하지 않는 것이 좋다. 이유는 아래와 같다.

  1. 객체의 경우, 프로퍼티의 순서가 보장되지 않는다. 그 이유는 원래 객체의 프로퍼티에는 순서가 없기 때문이다. 배열은 순서를 보장하는 데이터 구조이지만 객체와 마찬가지로 순서를 보장하지 않는다.
  2. 배열 요소들만을 순회하지 않는다.
  3. for-in 문의 단점을 극복하기 위해 ES6에서 for-of 문이 추가되었다.

 

20. strict mode

strict mode를 적용하려면 전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가한다.

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

하지만 전역에 strict mode를 적용하는 것은 바람직하지 않다.

// 전역에 strict mode의 적용하는 것은 바람직하지 않다!
'use strict';

앞서 말한 바와 같이 함수 단위로 strict mode를 적용할 수도 있다. 그러나 어떤 함수는 strict mode를 적용하고 어떤 함수는 strict mode를 적용하지 않는 것은 바람직하지 않으며 모든 함수에 일일이 strict mode를 적용하는 것은 번거로운 일이다. 그리고 strict mode가 적용된 함수가 참조할 함수 외부의 컨텍스트에 strict mode를 적용하지 않는다면 이 또한 문제가 발생할 수 있다. 이러한 이유로 함수 단위로 strict mode를 적용하는 것은 바람직하지 않다.

(function () {
  // non-strict mode
  var lеt = 10; // 에러가 발생하지 않는다.

  function foo() {
    'use strict';

    let = 20; // SyntaxError: Unexpected strict mode reserved word
  }
  foo();
}());

따라서 strict mode는 즉시실행함수로 감싼 스크립트 단위로 적용하는 것이 바람직하다.

 

 

21. 빌트인 객체

eval

eval 함수를 통해 사용자로부터 입력받은 콘텐츠를 실행하는 것은 보안에 매우 취약하다. 

또한 eval 함수를 통해 실행되는 코드는 자바스크립트 엔진에 의해 최적화가 수행되지 않으므로

일반적인 코드 실행에 비해 처리 속도가 느리다. 

따라서 eval 함수의 사용은 금지해야 한다.

 

encodeURI / decodeURI

 

더보기

encodeURI, encodeURIComponent

: www.~ →한글을 아스키 문자셋으로 전환

  encode decode

~URI

~URIComponent
  • 더보기
    URI(인터넷 자원의 주소)는 🔗 아스키 문자 셋으로만 구성되어야 함
  • 더보기
    아스키가 아닌 문자(한글 등)와 일부 특수문자를 포함한 URI를 유효하게 인코딩

 

const keyword = '얄코';
const encodedKeyword = encodeURIComponent(keyword);
​
console.log(encodedKeyword);

 

const searchURI = `https://www.google.com/search?q=${encodedKeyword}`;
console.log(searchURI);
  • URI에 들어갈 요소를 인코딩

 

💡 둘의 정확한 차이

const raw = '?q=얄코';
console.log(encodeURI(raw));
console.log(encodeURIComponent(raw));
  • URI에서 특정 기능을 갖는 =, ?, & 등을 인코딩하는가의 여부
  • encodeURI는 인자를 완성된 URI로, encodeURIComponent는 요소로 인식하기 때문



7. decodeURI, decodeURIComponent

encodeURI(Component)와 반대로 동작

const decodedURI = decodeURI(encodedURI);
​
console.log(decodedURI);

 

const encodedComp = '%EC%96%84%EC%BD%94';
const decodedComp = decodeURI(encodedComp);
​
console.log(decodedComp);
 

 

반응형
저작자표시 비영리