[프로그래밍] Javascript 변수란?

Javascript 변수란?

안녕하세요. 개발자 개발 까마귀입니다. 오늘 알려드릴거는 Javascript 변수입니다.

일단 "변수"의 뜻이 뭘까요? 변수는 데이터를 저장하는 공간이라고 생각하시면 됩니다.

이렇게만 들으면 감이 안오시죠? 그럼 프로그래밍을 하면서 배우도록 하죠

Javascript 변수 Type

저번에 제가 말씀 드렸죠? Javascritp 매우 자유로운 언어라고요 Java같은 경우에는 변수를 사용하려면 무조건 "Type"이라는 것을 해줘야합니다.  여기서 Type은 이 변수가 숫자를 사용하는지 문자열을 사용하는지를 정의하는겁니다.

예시로 String testData = "test"; 이런식으로요. 하지만 Javascript는 다릅니다. 

 

 

Javascript 변수는 무엇을 담아도 에러가 나지 않습니다. 나중에 배울 배열, 객체라는걸 넣어도요. 대단하죠? Javascript만의 장점이면서 단점이죠 단점으로는 저게 변수명에 문자열이 담겨져있는지 숫자가 담겨져있는지 직접 봐야지만 알 수 있으니깐요. 일단 개발자라면 "아 저게 변수구나" 하지 마시고 var 다음에 있는 "testData"를 보십시오 이것이 변수 명이라는 겁니다. 한 마디로 변수한테 이름을 지어주는거죠 저희도 태어나면 이름짓죠? 변수도 똑같습니다. 변수가 생성이되었으니 이름을 지어줘야합니다. 변수명을 막 지어줘서는 안됩니다. 만약에 저희가 한국에 태어났는데 이름이 "막시무스" 이러면 헷갈리죠? 변수 명도 똑같습니다.

 

변수 표기법

변수명도 종류가 있습니다.

 

카멜 표기법(Camel Case): 처음 단어의 첫글자는 소문자로 시작하면 그 다음 단어에 첫글자는 대문자로 시작하는 표기법입니다. Javascript 이러한 표기법을 사용합니다. 낙타의 등과 같다고 해서 Camel이라는 이름이 지어졌습니다.

 

예시

 

카멜 케이스

 

 

파스칼 표기법(Parscal Case): 카멜 케이스와 다르게 단어의 처음 문자를 대문자로 시작하면 그 다음의 단어 문자도 대문자로 시작하는 표기법입니다. 그냥 첫 문자를 대문자로 시작하면 파스칼입니다.  

 

예시

 

파스칼 표기법

 

실무에서는 "생성자" 한테는 파스칼 표기법을 씁니다. Java에서도 class 명을 지을 때 파스칼로 짓습니다. Javascript도 마찬가지고요.

 

스네이크 표기법: 스네이크 표기법은 모든 단어가 소문자입니다. 하지만 단어와 단어 사이마다 "_" 언더 스코어가 들어갑니다. 언더 스코어가 뱀처럼 보인다고해서 스네이크라는 이름이 붙여졌습니다.

 

 

 

스네이크 표기법은 언제 사용하냐? 바로 database 데이터일 때 사용합니다. 일단 database란 데이터 저장 공간이라고 아시면됩니다. database의 데이터를 정의할때 이름은 다 스네이크 표기법으로 합니다. 그래서 Javascript에서 database에 data를 사용할때 이게 database의 데이터 인지 단번에 알 수 있죠

 

이 3개말고도 몇개 더 있는데 위에 3개 말고는 사용하는 거를 본적이 없습니다.

 

var의 문제점

javascript es6가 나온 후로는 var를 쓰지 않습니다. 왜냐하면 var는 문제점이 많거든요.

 

접근 문제

 

예시

 

 

 

여기에 문제점을 말씀 드리겠습니다. Javascript에서 "{}" 는 영역을 의미합니다. 저 영역은 영역에서만 접근이 가능합니다. 분명 name이라는 변수는 if문 영역 안에 있는데 if문 영역밖에있는 console.log는 접근이 가능한겁니다. 이렇게 영역을 무시하고 접근이 가능하면 자유도는 높지만 그만큼 코드가 점점 난장판이 될수도있다는겁니다.

 

 

 

 

여기서 if문의 영역이 test함수의 영역의 name을 쓰고있습니다. 왜냐하면 if문의 상위가 test 함수이기때문이죠

쉽게 상위 영역에 변수들은 하위에 영역이 접근 가능하지만 하위내에서만 쓰는 변수들은 상위는 접근이 불가능합니다. 

이거에 대한거를 "스코프 체인" 이라고하는데 스코프에 대한거는 다음 강좌에 설명하겠습니다. 

호이스팅

일단 호이스팅 문제입니다. 호이스팅이란 끌어올린다라는 의미를 갖습니다. 

 

 

프로그래밍은 위에서 아래로 코드를 실행합니다. 그러면 console.log(testName);을 만나서 testName이라는 변수를 찾습니다. 하지만 testName은 위에서 없기 때문에 기본적으로 에러가 나야합니다. 하지만 console.log의 결과는"undefined"라는 겁니다. var는 코드를 예측하기 힘들게하고 문제를 일으킵니다. 변수가 선언되지도 않았는데 그 변수를 참조한다거 자체가 문제인겁니다.

변수 중복

 

 

 

변수명이 중복이 됬습니다. 어떤 결과가 나올까요? 이거는 에러가 나야하는 코드입니다. 

 

 

 

 

변수가 중복이됐는데도 불구하고 정삭으로 결과가 출력이 되네요. 혼자서는 문제가없지만 만약 이게 5명 정도의 프로젝트라면? 나비효과처럼 엄청난 문제를 일으킬겁니다. 

구원의 const 와 let

es6가 나온후 const 와 let이라는게 나왔습니다. var의 문제점을 보완한 변수들입니다.

 

let

 

 

 

그냥 var에서 let으로 바꿨습니다. 결과는 어떨까요?

 

 

 

 

네 이렇게 에러가 납니다. var와 달리 자신의 영역을 확실히 알고 접근을 못합니다.

 

let은 var처럼 변수 중복이 안됩니다. 변수명이 중복이된다면

 

 

이러면 변수 중복이 안되니 추후에 에러도 이렇게 방지를 할 수 있습니다.

 

그러면 var 호이스팅 문제는 어떨까요? 

 

 

let은 호이스팅 문제도 처음부터 방지해줍니다.

 

const

이젠 const를 알아볼까요? const는 let이랑 호이스팅 접근 문제 다 똑같습니다. 

하지만 한가지가 다른데요. 바로 재 할당이 불가능합니다. 재 할당이란? 변수를 선언을 할때 저희 변수에 데이터를 집어넣었고 let,var은 그 변수의 값을 변경할 수 있었습니다. 하지만 const는 재할당이 불가능합니다. 

 

 

const는 데이터 변경시 이렇게 에러가 납니다. 이젠 어떨때 const를 사용하고 let을 사용할지 감이 오나요?

let은 데이터를 변경해야 할시 사용하면됩니다. 반대로 const는 데이터를 바꿀 필요가없을때 쓰면됩니다. 그러면 여러명이 프로젝트를해도 const와 let만 봐도 얘는 어디에서 변경이되는구나 아 얘는 끝까지 값이 변경이 되지 않는구나를 알수가 있습니다. 하지만 var만 쓰다면 얘가 값이 변경이되는건지 안되는건지를 모릅니다. 

 

좀 변수에 대한 개념이 잡혔나요? 변수는 제일 기초면서도 중요합니다. 원래 기초가 제일 중요한 법이죠 하지만 아직 변수에 대해 다 알려드리지는 못했습니다. 다 알려드리려면 클로저 개념과 스코프의 개념을 알아야합니다. 이러한 개념은 추후에 알아도 큰 문제는 없습니다.  다음 강좌는 스코프에 대해서 알려드리겠습니다.

 

감사합니다.