var와 let
전체코드
<script>
function varTest() {
var x = 1;
if(true){
var x =2; //2를 넣었기 때문에 출력이 2 찍힌다. -> 위에 var x 랑 같다.
console.log(x);//출력:2
}
console.log(x);//if문을 빠져나왔으니 당연히 1이 있을꺼라 생각했지만 출력:2가 있다.
}
//var: 함수스코프(함수 내에서 유효)
function letTest(){
let x = 1;
if(true){
let x = 2;
console.log(x); //여기선 2가 찍힌다
}
console.log(x); //여기선 1이 찍힌다.
}
//: 블록스코프(블록 내에서 유효)
//====================================================
//호이스팅
function hostVar(){
console.log(z);
var z = 3;
}//변수 선언만 프로그래밍 시작 전에 프로그램에 알림, 오류x(->undefined로 초기화)
//아무 값도 없는 변수에 선언한다는 것은 의미가 없음
function hostLet(){
console.log(a);
var a = 3;
}//let은 호이스팅은 하지만 초기화X=>에러X
varTest();
letTest();
hostVar(); //z라는 변수를 선언 안해서 값이 없다고 뜬다. 아예 없으면 레퍼런스에러라 뜬다.
hostLet();
</script>
varTest같은 경우는 실 사용률이 매우 높다.
기존에는 var를 사용했는데 2015년 이후로 let 등장.
이 후로는 다 let으로 바뀌어가고있다.
var x = 1;
if(true){
var x =2; //2를 넣었기 때문에 출력이 2 찍힌다. -> 위에 var x 랑 같다.
console.log(x);//출력:2
}
console.log(x);//if문을 빠져나왔으니 당연히 1이 있을꺼라 생각했지만 출력:2가 있다.
var랑 let 둘다 있으면
var는 재정의가 되어 맨위 (2,2) 이렇게 출력이되고
let은 재정의가 되지 않아 처음 정의한 if문을 빠져나온 뒤 그대로 1이 출력되었다.
function hostVar(){
console.log(z);
var z = 3;
}//변수 선언만 프로그래밍 시작 전에 프로그램에 알림, 오류x(->undefined로 초기화)
//아무 값도 없는 변수에 선언한다는 것은 의미가 없음
function hostLet(){
console.log(a);
var a = 3;
}//let은 호이스팅은 하지만 초기화X=>에러X
varTest();
letTest();
hostVar(); //z라는 변수를 선언 안해서 값이 없다고 뜬다. 아예 없으면 레퍼런스에러라 뜬다.
hostLet();Location - var와 let
전체코드
<script>
var num = 0; //전역변수
document.write("head 태그 내 실행 순서 : " + num + "<br />") //출력값 0
//write : 해당하는 웹문서의 매개변수
</script>
<script>
var num = 1; //전역변수2 , 재선언 가능 왠만해선 중복해서 사용하지 않는게 가능
document.write("head 태그 내 실행 순서 : " + num + "<br />") //출력값 1
</script>
</head>
<body>
<script>
var num = 2;
document.write("head 태그 내 실행 순서 : " + num + "<br />") //출력값 2
</script>
<script>
var num = 3;
document.write("head 태그 내 실행 순서 : " + num + "<br />") //출력값 3
</script>
바는 보이는거와 같이 계속해서 재정의가 된다.
<script>
let num = 0; //전역변수
document.write("head 태그 내 실행 순서 : " + num + "<br />") //출력값 2
</script>
<script>
//let num = 1; 이미 선언해서 에러뜸
document.write("head 태그 내 실행 순서 : " + (num+=1) + "<br />") //출력값 3
</script>
</head>
<body>
<script>
//let num = 2;
document.write("head 태그 내 실행 순서 : " + (num+=2) + "<br />") //출력값 2
</script>
<script>
//let num = 3;
document.write("head 태그 내 실행 순서 : " + (num+=3) + "<br />") //출력값 3
</script>
let은 이미 맨 위에서 재정의가 되서 그 밑으로 재정의가 되지 않는다.
아래는 선언을 하면 다 에러가 뜨고
document.write("head 태그 내 실행 순서 : " + (num+=1) + "<br />") //출력값 3처럼 전역 변수로 사용 가능하다.
외부 스크립트 보내기
<title>06.out_javaScript</title>
<script src="../Java_script/out.js"></script>
</head>
<body>
<p>
<button type="button" onclick="alear('외부 자바 스크립트 파일')">버튼 클릭</button>
</p>
</body>let age = 35;
document.write("<div style='color:red; font-size:24px'>외부 스크립트 파일</div>")
document.write("당신의 나이는 " + age + "입니다.")
나를 한줄로 소개하자