⚠️ 해당 게시글은 모던애자일 팀원이 준비한 테크톡 내용을 스크랩했습니다.
출처 : 모던애자일 3기 이수형 블로그
clark9810님의 블로그 : 네이버 블로그
자기소개가 없습니다.
blog.naver.com
var, let, const
여러분은 프로그래밍을 할 때 가장 중요한 것이 무엇이라고 생각하십니까??
프로그래밍을 접한지 얼마 안된 저로서는 선언과 할당이라는 것이 코드를 작성하는데 있어서
중요하게 느껴지는데요
코드에서 선언과 할당을 잘하기 위해서 변수와 상수의 개념에 대하여 먼저 짚고 넘어가도록
하겠습니다.
변수란?
아직 알려지지 않거나 어느 정도 까지만 알려져 있는 양이나 정보에 대한 상징적인 이름.
자바스크립트에서의 변수 : var, let
상수란?
수식에서 변하지 않는 값
자바스크립트에서의 상수: const
변수 let에 대해서 먼저 설명하자면 let은 ECMAScript의 6번째 개정판 문서에서 추가 되었습니다.
변수 let의 사용
let myname = 'wooahan';let이라는 변수 생성 키워드를 이용하여 myname이라는 변수를 만들고 그 안에 wooahan이라는 값을 담은 것인데 이 과정은 myname이라는 이름의 상자에 wooahan이라는 값을 담는 것에 비유하면
이해하기 편할 것이다.
이 처럼 말이다.
let myname = 'wooahan';
myname = 'agile';이 처럼 let이라는 변수를 생성하는 키워드로 만들어 준 상자에는 wooahan이라는 값을 할당한
이후에 다시 다른 값을 할당을 할 수 있게 되는데
이처럼 myname 이라는 상자에 담겨있었던 wooahan 이라는 값이 사라지게 되고, 새로운 값을
담아 주었던 agile이라는 값이 myname 상자에 들어가게 된다.
변수 var의 사용
그렇다면 이번엔 var를 사용하여 변수를 선언해 보자
var myname = 'wooahan';변수 let과 마찬가지로 변수 생성 키워드인 var를 사용해서 wooahan이라는 값을 myname에 담아 주었다.
위 사진 처럼 myname이라는 상자에 wooahan이라는 값이 담긴 것을 확인 할 수 있는데 여기 까지만 보면 변수 키워드인 let과 var로 선언 하였을 때 기능적으로 별차이가 없어 보인다.
let과 var의 차이를 알기 위해서는 block scope 라는 개념을 알아야 한다.
자바스크립트에서 block scope란
{
let myname = 'wooahan';
}
console.log(myname);이처럼 let키워드를 사용하여 {} 중괄호 안에 myname을 선언하고, {} 외부에서 호출을 하게 된다면
이 처럼 myname is not defined 라는 에러가 발생하게 되고 이는 myname을 호출한 곳에서 myname을 읽지 못한다는 것이다.
{
var myname = 'wooahan';
}
console.log(myname);그렇지만 똑같은 상황을 let이 아닌 var로 선언하게 된다면
이 처럼 {} 내부에서 선언해 주었던 myname을 {} 외부에서 호출하여도 호출이 됨을 확인 할 수 있다.
이를 javascript block scope라고 하고 앞에서 보았던 예시를 통해 var는 block scope 를 무시함을 알 수 있었다.
이는 우리가 코드를 작성할 때 찾기 힘든 오류를 만들 수 가 있는데 간단한 예시를 통하여 설명하여 보겠다.
for (var i = 0; i < 5; i++) {
console.log(i);
}
console.log(i);이런식으로
for문을 사용하여 0부터 4까지 i를 1씩 증가시키면서 증가 될 때마다 호출하고, for문이 끝나고 난 다음 for문 바깥에서 i를 호출하게 된다면 i의 값은 과연 어떠한 값이 콘솔로 출력 되게 될까??
이처럼 for문이 끝났는데도 불구하고, let으로 선언했다면 for문 이 끝나면 사라져야 할 i가 var로 선언함으로서 i가 살아 있게 되어 우리를 헷갈리게 할 수 도 있게 된다.
이는 간결한 코드에서는 뭐가 잘못되었는지 한눈에 보이지만 코드가 길어지고 복잡하게 된다면
뭐가 어디서 잘못 되었는지 찾기 매우 힘들 것이다.
또한 var는 hoisting 이 되는 것을 알고 있어야 하는데
console.log(myname);
let myname = 'wooahan';let은 선언보다 호출을 먼저 할 경우
myname이 초기화 되어지지 않았다고 에러가 나오게 되는데
console.log(myname);
var myname = 'wooahan';이를 var를 이용해서 확인해 보면
에러가 나오지 않고 값이 선언되어지지 않음을 알려주는 undefined 가 나오게 됨을 확인할 수 있게 된다.
이렇게 되는 이유는 var 가 hoisting이 되기 때문인데
hoisting은 영어로 “끌어올려주다” 라는 의미를 가지고 있고
함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수의 유효범위 최상단에 위치하도록 하는것이다.
쉬운 이해를 위해 이를 코드로서 살펴보면
console.log(myname);
var myname = 'wooahan';이 코드는
var myname = undefined;
console.log(myname);
myname = 'wooahan';이런식으로 hoisting에 의하여 var 로 선언된 myname이라는 값이 최상단으로 끌려 올라가 undefined라는 선언은 되었지만 값을 입력하지 않음을 알리는 값으로 할당되고,
console.log(myname)이 실행 된 이후에, wooahan이라는 값이 할당되기 때문에 콘솔창에는 undefined가 나오게 된 것 입니다.
hoisting 과 block scope 관련한 이유로 ES6이후에 let이 나오게 되고, JS로 코드를 짜는
개발자들은 var사용을 ‘지양’ 하는것이 국룰이 됨.
마지막으로 const에 관하여 간단하게 설명하자면
const myname = 'subro';
myname = 'wooahan';
이렇게 const 라는 키워드로 myname 이라는 상수를 선언하고, subro라는 값을 한번 할당하고 난
이후에 myname의 값을 wooahan으로 바꿔주게 되면
이 처럼 “상수는 값을 바꾸어 줄 수 없다” 라는 에러가 발생하게 됨
이번 테크톡을 준비 하면서 const에 관하여는 깊게 찾아 보지 못했지만
협업을 할 때 되도록이면 변수보다는 상수인 const를 사용하여 선언하는 습관을 들이라는 글들이
많았다.
그 이유에는 여러가지가 있겠지만 크게 두가지만 설명해 보자면
- 보안상의 이유
해커들이 우리가 짠 코드에 이상한 값을 삽입해서 값을 변경해 나갈 수 있기 때문에 한번 선언되어 값이 할당되면 값이 변하지 않는 const를 적극 활용 해야 함. - 스레드 안정성 때문
어플리케이션이 실행 되면 한 가지의 프로세스가 할당 되고, 그 프로세스 안에서는 다양한 스레드가 동시에 돌아가면서 어플리케이션을 좀 더 효율적으로 빠르게 동작할 수 있도록 도와주는데, 다양한 스레드들이 동시에 접근하여 값을 변경 할 수 있는데 동시에 값을 변경할 때 위험한 - 상황이 발생 할 수 있어서 가능하면 값이 변하지 않는 const를 이용하여 선언을 해주는 것이 좋음
마지막으로 이번 테크톡을 한마디로 축약한다면 다음과 같을 것 같다
“우선 const로 선언하고 이후에 값이 바뀔 수 있다면 let으로 고치자.”
최근댓글