최근에 나오는 라이브러리를 보면 ```"use strict"``` 라는 문구가 자주 보입니다.

strict 미국·영국 [strɪkt]

1. (규칙 등이) 엄격한

2. (사람이 남에 대해) 엄격한

3. (사람이 자신의 종교・신념 등에 대해) 엄격한

- 네이버 어학사전

사전에서 볼 수 있듯이 무언가 엄격하게 사용한다는 의미로 생각이 되는데, 간단하게 알아보려 합니다.

#h3 strict 모드의 정의

strict 모드로 설정하는 방법은 간단합니다. 코드 앞쪽에 ```"use strict"``` 를 추가하는 것 입니다.

### js

"use strict";

x = 3.14;       // This will cause an error (x is not defined)

위의 예제를 실행하면 콘솔 창에 아래와 같은 오류가 찍히게 됩니다.

정의가 되지 않은 x 로 인해 정상적으로 동작을 하지 않습니다.

### js

"use strict";

myFunction();

function myFunction() {

    y = 3.14;   // This will also cause an error (y is not defined)

}

위의 예제도 y 가 정의되지 않아 정상적으로 실행되지 않습니다.

### js

x = 3.14;       // This will not cause an error. 

myFunction();

function myFunction() {

   "use strict";

    y = 3.14;   // This will cause an error (y is not defined)

}

위의 예제는 x 가 사용되기 전에는 ```"use strict"``` 가 선언되지 않았으므로 y 에 대해서만 오류가 발생합니다.

#h3 왜 strict 모드를 사용하는가?

"보안" 자바스크립트를 작성하는 쉬운 방법이기 때문입니다. 다른 이유는 "올바르지 않은 문법" 을 사전에 검출할 수 있습니다.

strict 모드는 쓰기금지 프로퍼티의 정의, getter 전용 프로터피, 존재 하지 않는 프로퍼티, 존재하지 않는 변수, 존재하지 않는 객체에 대해 에러를 발생시킵니다.

#h3 strict 모드에서 허용되지 않는 문법

1. 정의되지 않은 변수의 사용

### js

"use strict";

x = 3.14;                // This will cause an error (x is not defined)

### js

"use strict";

x = {p1:10, p2:20};      // This will cause an error (x is not defined)

2. 변수나 객체의 삭제

### js

"use strict";

var x = 3.14;

delete x;                // This will cause an error

3. 함수 파라미터에 중복된 이름

### js

"use strict";

function x(p1, p1) {};   // This will cause an error

4. 8진수

### js

"use strict";

var x = 010;             // This will cause an error

5. 이스케이프 문자

### js

"use strict";

var x = \010;            // This will cause an error

6. 읽기전용 프로퍼티에 값 설정

### js

"use strict";

var obj = {};

Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;            // This will cause an error

7. 조회 전용 프로퍼티에 값 설정

### js

"use strict";

var obj = {get x() {return 0} };

obj.x = 3.14;            // This will cause an error

8. ```eval```, ```arguments``` 문자열에 대한 변수로의 사용

### js

"use strict";

var eval = 3.14;         // This will cause an error

var arguments = 3.14;    // This will cause an error

9. ```with``` 사용

### js

"use strict";

with (Math){x = cos(2)}; // This will cause an error

10. ```eval()``` 에 정의된 변수 사용

### js

"use strict";

eval ("var x = 2");

alert (x);               // This will cause an error

#h3 References

- http://www.w3schools.com/js/js_strict.asp

각종 자바스크립트 라이브러리에서만 써오던 each 함수가 브라우저 지원 함수라는 것을 오늘에야 알았다...

(출처: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

물론 IE 9 이상에서만 동작하는 것이 함정이지만...

새로 확인된 함수는 총 3종류 이다. (각 함수를 클릭하면 MDN 페이지로 연결됩니다.)

• Array.prorotype.forEach()
• Array.prototype.every()
• Array.prototype.some()

Array.prototype.forEach()

### js

[2, 5, , 9].forEach(function (element, index, array) {

  console.log('a[' + index + '] = ' + element);

});

// logs:

// a[0] = 2

// a[1] = 5

// a[3] = 9

배열의 원소들을 인자로 하는 callback 함수를 호출한다. callback 함수의 인자는 (원소, 인덱스, 전체배열) 이다.

Array.prototype.every()

### js

function isBiggerThan10(element, index, array) {

  return element > 10;

}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false

[12, 5, 8, 1, 4].some(isBiggerThan10); // true

자바스크립트에서 in 이라는 구절은 객체의 프로퍼티를 for 문에서 탐색할 때 주로 사용하고 있었다.

### js;

var _params = { name: 'vince', age: 'secret' };

for (var _key in _params) {

var _value = _params[_key];

// ...

}

때로는 배열을 탐색할 때도 사용하기도 한다. (어차피 배열의 인덱스로 프로퍼티이기 때문에)

### js;

var _array = [ 1, 2, 3, 4, 5 ];

for (var _array in _array) {

var _value = _array[_array];

// ...

}

새로 알게된 in 의 활용법은 해당 프로퍼티가 객체에 존재하는지 확인하는 것이다.

### js;

var _params = { name: 'vince', age: 'secret' };

if ('name' in _params) {

var _name = _params['name'];

// ...

}

prop in object 는 object 안에 prop 프로퍼티가 있는지 확인하는 것으로 반환 값은 true/false 이다.

if (!_params['name']) 대신에 사용하면 코딩을 더욱 직관적으로 할 수 있을 것이다.

주로 개발을 크롬에서 하다보니 IE에서 발생하는 문제는 배포 후에 발견하는 경우가 많다.

이 경우도 크롬에서는 정상동작을 해서 몰랐던 부분인데, 다음 번에 동일한 문제가 발생하더라도 근본적인 원인을 모르면 또 헤맬 것 같아서 정리한다.

### php; html-script: true;

<ul id="sampleList">

<li class="template">

<textarea id="description" placeholder="설명을 입력하세요."></textarea>

<li>

</ul>

위와 같이 template 엘리먼트를 이용하여 <ul> 에 추가될 <li> 를 생성한다고 가정하면, 크롬에서는 위의 태그가 화면에 렌더링 되는 순간 위와 동일하게 엘리먼트가 구성되지만 IE에서는 아래와 같이 변환이 된다.

<ul id="sampleList">
	<li class="template">
		<textarea id="description" placeholder="설명을 입력하세요.">설명을 입력하세요.</textarea>
	<li>
</ul>

placeholder 에 있는 값이 textarea 의 값으로 설정되어 버린다.

### js

var $sampleList = $('#sampleList');

var $templateLi = $sampleList.find('li.template');

var _templateLiHtml = $templateLi.clone().removeClass('template')[0].outerHTML;

// _templateHtml 을 이용하여 추가할 html 태그를 생성

var _newHtml = _templateHtml;

$sampleList.append(_newHtml);

위와 같은 자바스크립트가 실행되면 크롬에서는 value 가 빈 textarea 가 복제가 되지만 IE에서는 value 값이 설정된 textarea 가 복제가 된다. 따라서 복제 후에 다음과 같은 작업을 추가적으로 해주어야 한다.

### js; highlight: [3];

var $sampleList = $('#sampleList');

var $templateLi = $sampleList.find('li.template');

$templateLi.find('textarea[placeholder]').val(''); // textarea 값을 초기화

var _templateLiHtml = $templateLi.clone().removeClass('template')[0].outerHTML;

// _templateHtml 을 이용하여 추가할 html 태그를 생성

var _newHtml = _templateHtml;

$sampleList.append(_newHtml);