[HTML] 엄격모드 hoisting

비타민규·2023년 8월 3일

[HTML]

목록 보기
7/25
post-thumbnail

자바스크립트는 " 와 ' 구분하지 않음. 끝에 ;도 안 붙여도 되는데 붙이는게 정석

Javascript 연습

js는 다음과 같이 써준다.

<script type="text/javascript">

window.document.write("환영합니다");
window.document.write("<br><b>환영</b><i>합니다</i>");

</script>

<script>만 쓰고 type은 주지 않아도 된다.

document.write() 메소드는 JavaScript 코드를 사용하여 HTML 문서의 내용을 동적으로 변경하기 위함이다


<script>
	"use strict" // 엄격 모드. 모던한 모드(안쓰면 느슨한 모드)
	// a=10;
	// b=20;
	window.document.write('<br>a:',a);
	var a = 10; // 호이스팅 기능이 자동 발생. 비권장
	var b = 20;
	
	window.document.write("<br>");
	window.document.write(a+b);
	
	// window.document.write('<br>c:',c);
	let c = 30; // 선언한 이후에만 변수 사용 가능
	let d = 40; // js는 에러메세지를 브라우저에서 f12누르고 콘솔차에서 봐야됨
	
	window.document.write("<br>");
	window.document.write(c+d);
	
	//개발자가 엔드유저에게 안 보여주고 싶은 내용이 있으면
	console.log(c+b); // 표준출력장치로 출력. 브라우저 검사창에서 확인

</script>
</body>
</html>

출력물 :

hoisting(호이스팅) 의 개념
js에서는 변수 선언 전에 출력이 가능한데 인터프리터 방식이라 그렇다. 쉽게 이해하자면 변수의 선언이 가장 위로 끌어올려지는 식이다.

인터프리터 방식이란, 한 줄 씩 번역하고(번역과 동시에 메모리 확보가 이루어짐) 이상이 없으면 실행한다.

즉, 메모리 확보는 이미 이루어졌기 때문에 변수 선언전에 출력을 하게 되면 위와 같이 a:undefined 형태로 출력이 되는 것이다(오류안뜸). 이런 방식이 hoisting이다.

이전까지 했던 자바는 컴파일러 방식이라 선언 전에 출력을 시도하면 오류가 난다

ECMA6 이후엔 var로 변수 쓰지 말고 let으로 줘. let하면 hoisting 안 먹어


window.document.write('<br>c:',c);
let c = 30;
let d = 40;

window.document.write("<br>");
window.document.write(c+d);

이렇게 쓰면 c출력에서 에러가 뜨기 때문에 그 밑으로 실행을 해주지 않음

호이스팅은 좋지 않은 방식이기에(선언도 안 했는데 써버리고 undefined로 출력하니) 선언해주고 사용하자는 의미에서 let을 써줌
a=10 or var a=10이렇게 안 써줌

'use strict'는 무엇인가?
(해당 지시문은 스크립트 또는 함수의 시작 부분에서만 인식이 된다)

w3c 참고
직관적인 예로는, 변수나 객체를 선언하지 않고 사용하는 것, 기능(function) 삭제 등을 하지 못하게 한다.

let

반면에 let을 본다면 선언 전에 사용을 하면 오류가 뜨게 된다.
또, 재할당은 가능하지만 재선언은 불가하다.

재할당
let food = 'hamburger';
console.log(food); // hamburger

food = 'bap';
console.log(food); // bap
재선언
let food = 'kim';
let food = 'bap';

console.log(food); // SyntaxError: Identifier 'food' has already been declared
profile
같이 일하고 싶은 개발자가 되어야지

0개의 댓글