-
자바스크립트 var, let, const의 차이Coding 2022. 5. 30. 22:24
JavaScript에서 변수를 선언할때 "var"로 선언한다.
이외에도 let, const가 존재하는데, 이 세가지 변수 선언 차이는 무엇일까
1) var는 함수 단위, let과 const는 블럭 단위의 범위를 지정한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>var/let/const</title> </head> <body> <script type="text/javascript"> var a = 20; console.log("1번 a: "+a); { var a = 50; console.log("2번 a: "+a); { var a = 100; console.log("3번 a: "+a); } console.log("4번 a: "+a); } console.log("5번 a: "+a); </script> </body> </html>와 같이 먼저 var를 선언했다고 가정한다면
이를 실행해 콘솔에 찍히는 1~5번 a를 확인해보면
1~5번 a가 개발자도구로 보았을때 console에 나오는 모양 3번 a에서 var a=100;을 선언하자 4번과 5번 a도 100으로 찍혀 있다.
이는 1번 a에서 var 변수를 이미 할당해놓았고, 하위의 모든 블럭내에서 a를 재선언하면 최초 선언된 a 변수가 전역변수로써 기능을 수행하기에 새로 만들어내는 것이 아니라 이 a를 덮어쓴다.
그래서 3번 a부터는 바뀐 a가 콘솔에 찍힌다,
블럭 범위 단위인 let의 예제
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>var/let/const</title> </head> <body> <script type="text/javascript"> let a = 20; console.log("1번 a: "+a); { let a = 50; console.log("2번 a: "+a); { let a = 100; console.log("3번 a: "+a); } console.log("4번 a: "+a); } console.log("5번 a: "+a); </script> </body> </html>
console에 나타난 모습 이전의 var와 동일하게 3번째에서 a에 100을 집어넣었으나 4번과 5번 a에 영향을 받지 않는다. 이는 let이 블럭 스코프 단위를 가지는데 3번 a에 100을 넣어도 3번 a의 {}블럭 내부에서 값을 다르게 설정해도 {}블록 밖의 a들에 영향을 안준다. 그리고 const도 let과 같이 블록 스코프 단위 변수로 동일하다.
2) var와 let은 변수의 값을 변경할 수 있지만, const는 변경할 수 없다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>var/let/const</title> </head> <body> <script type="text/javascript"> var testVar = 1; let testLet = 1; const testConst = 1; testVar = 2; console.log("var: " + testVar); testLet = 2; console.log("let: " + testLet); testConst = 2; console.log("const: " + testConst); </script> </body> </html>각각 변수 1을 넣어 선언후 변수들의 값을 2로 바꾸고 이를 콘솔로 보자
결과에는 var와 let이 정상으로 바뀌지만 const는 에러가 난다.