-
자바스크립트 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는 에러가 난다.
'Coding' 카테고리의 다른 글
Sass(SCSS) 개념 (0) 2022.06.03 깃허브 사이트 생성하기전 해야하는 것 (Jekyll과 Git 설치) (0) 2022.06.01 마크다운 markdown 작성 (0) 2022.06.01 box-sizing 박스 크기 속성 (0) 2022.05.31 CSS 속성 position (0) 2022.05.29 블로그 웹페이지에 F12 컨트롤 하기 (0) 2022.05.29 DCOTYPE와 HTML5에 대해서 (0) 2022.05.29 메타 태그 META TAG 속성들에는 어떤것이 있을까 (0) 2022.05.28