javascript 자바스크립트 'use strict' / Chrome 크롬디버깅 debugger;

use strict란?

• 1. Strict Mode의 선언방식 입니다.
• 2. 이 문구는 ES5부터 적용되는 키워드로, 안전한 코딩을 위한 하나의 가이드라인 입니다.
• 3. Strict Mode는 코드에 더 나은 오류 검사를 적용하는 방법입니다.
• 4. ES6에서는 디폴트가 Strict Mode이기 때문에 사용할 필요가 없습니다.

예제)

1.

'use strict';

$('#click').click(function(){

    formObject = 1234; //에러발생 SCRIPT5042: Strict 모드에서 변수가 정의되지 않았습니다.

});

2.

"use strict";

function a(){

    var hello = 7;

    return hello;

}

hello = 5; // 구문오류 strict 모드를 전역에 설정하였기 때문에 hello라는 변수를 함수 밖의 변수로 선언할 수 없다.

 

debugger 란? 

어떤 프로그램 설치 없이 크롬만으로 디버깅이 가능하다. 

• 1. 방법 script 태그 안에 debugger; 를 입력

<script>

debugger; 

$(document).ready(function(){

    var aa = 'aa';

    alert(aa);

});

</script>

• 2. 크롬(F12) 또는 웹페이지에서 오른쪽 마우스 - 검사 - Developer tool로 들어간다.  
• 3. Developer tool이 실행된 상태에서 스크립트가 실행되면 debugger; 입력된 부분에서 디버깅을 시작한다. (break point)
• 4. F10 또는 step over 키를 눌러 debugger; 위치부터 한줄씩 디버깅한다. 
  
• 5. 변수확인은 마우스를 갖다대거나 아래 console 부분에 입력한다. (자바스립트 문법과 동일, 프레임워크 사용 시 그에 맞는 문법 사용)