03. Variables
03-1. 변수의 사용
다음은 자기소개 문구의 예시입니다.
"제 이름은 김코딩입니다."
"제 직업은 개발자입니다."
제 이름은 무엇이고, 직업은 무엇인가요?
위에서 소개한 대로, 제 이름은 '김코딩'이고 제 직업은 '개발자'입니다.
이처럼 우리는 어떤 정보에 대해 특정 명칭으로 부르곤 합니다.
컴퓨터도 사람과 같이 많은 데이터를 기억해두었다가 필요할 때마다 꺼내어 사용해야 하는데, 이때 변수라는 개념을 사용합니다.
03-2. 변수의 생성(선언) & 변수 값 할당
프로그래밍을 하기 위해서는 다양한 값을 다뤄야 하고, 그 값들은 각각의 변수에 저장되어 사용됩니다. "이름", "직업"과 같은 역할을 하는 것을 변수(variable)라고 하며, "김코딩", "개발자"와 같은 값은 값(value)이라고 합니다. JavaScript 에서 변수를 선언하고 값을 할당하는 방법은 다음과 같습니다.
var name = "김코딩";
var job = "developer";- name, job은 변수 입니다.
- 김코딩은 name이라는 변수에 할당된 값입니다.
- developer는 job이라는 변수에 할당된 값입니다.
var 키워드를 사용해서 name이라는 변수를 선언하고, 동시에 “김코딩”이라는 값을 할당했습니다. 이제 여러분이 제 이름 → "김코딩" 임을 알 수 있듯이, 자바스크립트도 name → "김코딩" 이라고 알 수 있게 되었습니다.
03-3. 변수 이름 정하기
위에서 사용한 변수명인 name과 job은 제가 마음대로 정한 이름입니다. myName 과 fullName 이라는 변수를 만들어 보도록 하겠습니다.
var myName = "김개발";
var fullName = "김개발";이처럼 변수 이름은 원하는대로 정할 수 있지만 몇 가지 주의할 점이 있습니다.
⭐️변수 이름 생성시 주의 사항 (naming convention)⭐️
- 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없습니다.
- 대소문자 구문 - 변수이름, 함수이름, 연산자 모두 대소문자를 구분합니다. 따라서 myName과 MyName은 다른 변수입니다.
- 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다.
function,const와 같이 자바스크립트 내에서 특정 의미를 가지고 사용하는 예약어는 변수로 사용할 수 없습니다.
03-4. cf. camelCase vs. snake_case
1) camelCase
단어 전체적으로 소문자를 사용하지만, 맨 첫 글자를 제외한 각 합성어의 첫 글자만 대문자로 표기합니다.
camelCase는 낙타를 의미하는 "camel" 이라는 영어 단어에서 유추하실 수 있듯이 변수 생김새가 낙타의 등처럼 울퉁불퉁 합니다.
✔️ 참고 예시:
myProfileImg
toDoListArray
2) snake_case
camelCase 이외에 snakecase 라는 표현법도 있습니다. snake_case란 변수의 형태가 뱀과 닮았다고 하여 붙여진 이름입니다.
소문자를 사용하며, 각 합성어를 언더바('')로 연결하는 방식으로 표기합니다.
✔️ 참고 예시:
my_profile_img
to_do_list_array
camelCase 표기법과 차이점을 아시겠죠?
03-5. cf. 의미가 추측 가능한 변수명
어떤 개발자들은 직접 로직을 구현하는 시간보다 변수명을 고르는데 시간과 노력을 더욱 많이 들인다고 말하기도 합니다. 고민의 시간을 덜어주기 위해 변수명을 지어주는 사이트가 있을 정도 입니다. 변수명 짓기는 왜 중요한 걸까요? 아래와 같이 크게 두 가지 이유가 있습니다.
1. 다른 개발자, 혹은 먼 훗날의 자기 자신이 이 코드를 더욱 쉽게 이해할 수 있습니다. (코드의 가독성)
2. 커뮤니케이션에 들어갈 리소스를 줄일 수 있어 개발의 효율이 높아지게 됩니다. (유지보수 용이)
따라서 변수명을 지을 때는 모호하지 않고, 변수명 만으로도 의미가 추측 가능할 수 있도록 노력해야 합니다. 아래 코드의 변수명을 보면 x, asvasefsefwefwe 로 설정이 되어 있습니다. 이와 같이 사용해도 코드는 동작하지만, 해당 코드를 접하게 되는 다른 사람 뿐만 아니라 코드 작성자 자신도 추후에 이해할 수 없는 변수명이기 때문에 적절하지 못한 변수명입니다.
const x = "javascript";
const asvasefsefwefwe = "자바스크립트";03-6. let, const
앞서 변수를 소개하면서 변수 앞에 var 키워드를 사용했습니다. 기존에 JavaScript 의 변수 선언은 var 키워드를 통해서만 가능했는데, ES6 버전에서 var 키워드의 여러 문제점들을 보완한 let과 const 키워드가 추가되어 var 키워드는 거의 사용하지 않게 되었습니다. 두 키워드를 활용한 변수의 선언과 할당 방법은 var 와 같습니다.
let name = "wecode";
const birthday = 19910223;let VS. const
let키워드를 사용하면 변수 값을 수정할 수 있습니다.const키워드를 사용한 변수 값은 수정할 수 없습니다.
→ 즉, 사용하고자 할 변수가 재할당되지 않는 상수라면 const를, 추후에 재할당이 되는 변수라면 let을 사용하면 됩니다. 물론 두 개 구분할 필요 없이 var를 쓸 수는 있겠지만, 보통 어느정도 안정화가 된 최신 버전에 맞는 문법을 사용하는게 권장됩니다.
03-7. 변수 값 수정
위에서 var, let, const 키워드를 사용하여 변수를 선언하고, 그 변수에 값을 할당하는 것도 배웠습니다. 이번에는 변수에 할당된 값을 수정하는 방법에 대해 알아보겠습니다.
const 키워드를 사용한 변수의 값은 수정할 수 없으며, var 키워드는 사용을 지양해야 하는 키워드입니다. 따라서 let 키워드를 사용해 변수의 값을 수정해보도록 하겠습니다.
let 키워드는 변수를 새로 생성할 때만 사용됩니다. 값을 수정할 때는 변수 앞에 let 키워드를 사용하지 않습니다. 다음과 같은 방법으로 변수명에 새로운 값을 할당할 수 있습니다.
(이미 선언해둔) 변수명 = 새로운 값;몇 가지 예시를 살펴보겠습니다.
let name = "김코딩";
let job = "developer";
name = "김준영";
job = "코더";- 첫 두줄에서는 name, job 이라는 변수를 선언하고 각각 "김코딩", "developer"라는 초기값을 할당하고 있습니다.
- 아래 두 줄에서는 name, job 변수에 새로운 값을 할당하고 있습니다.
- 값을 수정할 때는 첫 두 줄의 코드와 달리
let키워드가 없이 변수 이름만 있는 것을 확인할 수 있습니다. - 하지만 위에 언급한 것처럼
const키워드로 선언한 변수는 값을 바꿀 수 없습니다. - 따라서, 아래는 오류가 있는 코드이며 아래 내용을 실행시 다음의 에러가 발생할 것입니다.
const name = "김개발";
name = "김코딩";
//Uncaught TypeError: Assignment to constant variable.03-8. 변수의 생성 vs. 변수의 수정
let name = "김개발";
let name = "김코딩";let키워드의 역할은 변수를 "생성"하는 것입니다.
위의 코드는 name 이라는 변수의 값을 변경한 것이 아니라 name 이라는 변수를 두 번 생성한 것입니다.
- 같은 변수 이름을 중복해서 쓰면 안 됩니다.- 만약 위와 같이 작성하면 아래와 같은 에러가 발생합니다.
Uncaught SyntaxError: Identifier 'name' has already been declared
03-9 변수의 선언(declare) vs. 변수 값 할당(assign)
- 변수의 선언과 할당은 분리될 수도 있습니다.
- 즉, 선언과 할당을 위 예제들 처럼 동시에 할 수도 있지만, 선언만 하고 값의 할당은 그 후에 할 수도 있다는 뜻입니다.
- 아래는 변수의 선언과 할당을 분리한 예시입니다.
let address;
address = "강남";- address 라는 변수를 선언하고, 그 다음 줄에서 "강남" 이라는 값이 할당되었습니다.
- 만약 값의 할당 없이 선언만 한다면 address 라는 변수는 어떤 값이 나올까요? 직접 확인해보세요!
let address;
console.log('address : ', address); //address: undefined
address = "강남";
console.log('address : ', address); //address: 강남변수명은 중복이 되면 안 된다고 하는데, 값의 중복은 가능할까요?
let company1address = "선릉";
let company2address = "선릉";
let company3address = "강남";
let company4address = "강남";
let company5address = "선릉";
company5address = "선릉";물론 가능합니다 ! 변수 이름은 중복되면 안 되지만, 값은 얼마든지 중복 가능합니다.
출처 : wecode
