개발자

Javascript에서 왜 더이상 var를 사용하지 않나요?

2022년 12월 29일조회 3,736

안녕하세요, 이제 막 시작한 코딩 초보입니다. 변수 선언에 대해 배우는 중인데, var은 이제 거의 쓰지 않고 let이나 const로 바꾸어서 사용한다고 배웠습니다. 궁금한 점은 다음과 같습니다. 1. 왜 var 대신 let과 const가 더 좋나요? 2. 그럼 var은 더이상 배우지 않아도 문제 없을까요? 선생님께서는 쓸 일이 거의 없을 거라고 하셨는데, 개발자 커뮤니티 등등 찾아보면 var에 관련된 내용이 은근 많은 것 같아서요..! 감사합니다. 즐거운 연말 되세요 ㅎㅎ.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 5

인기 답변

강동희님의 프로필 사진

var 키워드로 변수를 선언했을때 문제점을 보안하기 위해서 ES6 문법으로 let, const 키워드가 나왔습니다. 블록레벨 스코프와 함수레벨 스코프, 호이스팅, TDZ에 대해서 구글링 해보시면 좋을것 같아요! 유튜브에 이해하기 좋은 영상이 있어서 링크 첨부해드립니다😎 즐거운 연말 되세요~ https://youtu.be/HsJ4oy_jBx0

profile picture

익명

작성자

2022년 12월 29일

갈 길이 머네요 ㅎㅎ ㅜㅜ. 답변 달아주셔서 감사합니다. 적어주신 내용 열심히 공부해 보겠습니다!!

인기 답변

문석기님의 프로필 사진

명확하게 말하면 var 의 사용을 지양합니다. 사용하지 못하는건 아니니까요. 텍스트로만 답변드리기 어렵지만 최대한 간략하게 답변드리면 자바스크립트의 동작과 연관이 있습니다. 결론부터 말하면 자바스크립트 코드가 실행될때 선행으로 호이스팅이라는 동작을 하는데 그때 모든 변수들을 미리 등록합니다. 그때 var 변수는 전역(window인지 document인지 헷갈리네요 ㅎㅎ)에 변수가 저장이됩니다. -> 이 의미는 자바스크립트 코드 내부 전체에서 해당 var 변수를 참조할 수 있다는 겁니다. 이러한 동작을 이해하지 못하고 var변수를 사용해 코드를 작성하면 매우 크리티컬한 버그가 발생할 가능성이 높습니다. 최근에는 그래서 var 변수의 사용을 지양 아니 극단적으로 쓰지말라고 합니다. 짧게 답변을 작성하느라 명확하게 설명도 못드리고 정확하지 않을 수도 있지만 도움이 되시길 바라겠습니다.

profile picture

익명

작성자

2022년 12월 29일

아하.. var이 변수를 중복으로 선언할 수 있다는 점이 호이스팅에서 문제를 일으킬 수 있기 때문이라는 말씀이시죠?? 호이스팅이 무엇인지, 그리고 어떤 문제를 일으킬 수 있는지는 더 자세히 공부해 보겠습니다. 감사합니다!

문석기님의 프로필 사진

문석기

교보생명보험 프론트엔드 개발자2022년 12월 29일

그 중복의 문제보다는 전역변수에 대해 좀 더 찾아보시면 위험성에 대한 이해가 더 가실겁니다. 프로그래밍에서 전역변수는 보통 불변성을 지닌 항목들만 전역으로 지정하는걸 권고합니다. 그런데 var 는 전역에서 참조가 되고 변경도 가능하죠. 이에 대응해서 자바스트립트에서 새로운 타입을 만든게 const <- 선언 후 변경불가 let <- 선언 후 변경가능 윗 댓분의 답변처럼 es5,6 의 내용을 찾아보시면 전반적인 내용을 확인하실 수 있습니다.

profile picture

익명

작성자

2022년 12월 29일

아하 그렇군요... 넵 찾아보겠습니다. 도움 주셔서 감사합니다!

인기 답변

윤석현님의 프로필 사진

1. var 변수는 함수 레벨 스코프에서 선언한 것을 제외하고 전역 변수가 됩니다. 다시 말해, if, for, while 같은 제어문 블록 내에서 var 변수를 선언한 것도 전역변수가 됩니다. 만일 블록 밖에서 i라는 var 변수를 선언한 적이 있다면, 블록 내에서 그 변수를 중복 선언해 값이 바뀔 수 있습니다. 2. 변수 선언 시 할당이 이뤄지는 런타임 이전에 선언 단계와 초기화 단계가 있습니다. var 변수는 선언 시 런타임 이전부터 이미 선언 단계와 초기화 단계를 거쳐 undefined이 됩니다. 그 변수에 값이 할당이 되는 것은 런타임 때 코드를 한 줄 한 줄 읽다가 할당문을 만나면 그때 값을 할당합니다. 만일, var x = 1; 이라는 문이 50번 째 줄에 있다고 하고, if(x)가 1번 째 줄에 있다고 한다면, 참조 오류가 아닌 x = undefined를 출력합니다. 이를 변수 호이스팅 이라고 합니다. let도 호이스팅이 일어나지만, var 변수와 주요한 차이는 선언 단계 이후에 undefine으로 초기화되지 않기 때문에 위와 같은 경우 참조 오류가 발생합니다. let을 포함한 ES6에서 추가된 키워드는 모두 선언 단계 이후에 TDZ에 들어가는데, TDZ에 들어가면 할당 이전에 참조가 금지됩니다. 이 내용이 더 궁금하시다면 실행 컨텍스트를 공부해보시면 됩니다.

유근수님의 프로필 사진

커리어리에 올라온 글인데, 이 글을 보시고 모르는 단어나 이해가 안가시는 부분들을 좀 더 찾아보시면 도움이 될 것 같습니다~ 😆 https://careerly.co.kr/comments/68614?utm_campaign=user-share

Booting님의 프로필 사진

다들 답변해 주셨지만 참고 하시라는 뜻에서 답변 남겨드립니다. 그렇다고 var가 아예 안쓴다는 것은 아닙니다. 현 시점에서 쓸일이 없는 것이죠. 예를들어 ES6 문법을 이해하지 못하는 브라우저는 크로스브라우징으로 let, const 대신 var를 사용하여야 합니다. 하지만 그것을 우리가 해야하냐? 그건 또 아니죠 let, const 로 사용한 것을 babel, swc 같은 트랜스파일러를 통해 build 시 let과 const를 var로 변경해서 빌드합니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!