03. Variables
03-1. 변수의 사용
- "제 이름은 김개발입니다."
- "제 직업은 개발자입니다."
제 이름은 무엇인가요? 제 직업은요? 바로 위에 있으니 기억하시겠죠. 컴퓨터도 사람과 같이 많은 데이터를 기억해야하는데, 이때 변수를 사용합니다.
03-2. 변수의 생성 (선언) & 변수 값 할당
프로그래밍을 하기 위해서는 다양한 값을 다뤄야 하고, 그 값들은 각각의 변수에 저장되어 사용됩니다. "직업", "이름"과 같은 역할을 하는 것을 변수(variable)라고 하며, "김개발", "개발자"와 같은 값은 값(value)이라고 합니다. JavaScript 에서 변수를 선언하고 값을 할당하는 방법은 다음과 같습니다.
var name = "김개발";
var job = "frontend developer";- name, job은 변수 입니다.
- 김개발은 name 이라는 변수에 할당된 값입니다.
- frontend developer은 job이라는 변수에 할당된 값입니다.
name 이라는 변수에 "김개발" 값이 저장되었습니다. 이제 여러분이 저를 보고 이름 → "김개발" 임을 알 수 있듯이, 컴퓨터도 name → "김개발" 이라고 알 수 있게 되었습니다.
03-3. 변수 이름 정하기
위에서 본 변수이름인 name 과 job 은 제가 마음대로 정한 이름입니다. myName 과 fullName 이라는 변수를 만들어 보도록 하겠습니다.
var myName = "김개발";
var fullName = "김개발";이처럼 변수 이름은 원하는대로 정할 수 있지만 몇 가지 주의할 점이 있습니다.
변수 이름 주의 사항(naming convention)
- 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없습니다.
- 대소문자 구문 - 변수이름, 함수이름, 연산자 모두 대소문자를 구분합니다. 따라서 myName과 MyName은 다른 변수입니다.
- 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다.
- 두 번째 문자 부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있습니다.
- 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 사용합니다.
03-4. cf. camelCase vs. snake_case
1) camelCase
- camelCase란 낙타 등처럼 울퉁불퉁하다는 소리입니다.
- 단어가 새로 시작할 때부터 대문자로 쓰면 됩니다.
✔️ example)
- firstSecond
- myProfileImg
- toDoListArray
2) snake_case
- camelCase 말고 snake_case 표현도 있습니다.
- 변수이름에
-는 사용할 수 없으므로,_를 사용한 것입니다. 하지만 잘 사용하지는 않습니다!
✔️ example)
- first_second
- my_profile_img
- to_do_list_array
03-5. cf. 의미가 추측 가능한 변수명
어떤 개발자들은 직접 로직을 구현하는 시간보다 변수명을 고르는데 시간과 노력을 더욱 많이 들인다고 말하기도 합니다. 변수명을 지어주는 사이트가 있을 정도 입니다. 변수명 짓기는 왜 중요한 걸까요? 아래와 같이 크게 두 가지 이유가 있습니다.
- 다른 개발자, 혹은 먼 훗날의 자기 자신이 이 코드를 더욱 쉽게 이해할 수 있습니다. (코드의 가독성)
- 커뮤니케이션에 들어갈 리소스를 줄일 수 있어 개발의 효율이 높아지게 됩니다.
따라서 변수명을 지을 때는 모호하지 않고, 변수명 만으로도 의미가 추측 가능할 수 있도록 노력해야 합니다. 아래코드의 변수명을 보면 x, asvasefsefwefwe 로 설정이 되어 있습니다. 물론 아래와 같이 사용할 수야 있겠지만 아래의 변수명은 모두 적절하지 않습니다. 변수명을 지은 자기 자신조차도 변수명을 통해 코드의 내용을 추론하기 힘들기 때문입니다.
let x = "김예리";
let asvasefsefwefwe = "선릉 위워크";03-6. let, const
앞서 변수를 소개하면서 변수 앞에 var 키워드를 사용한다고 말씀 드렸습니다. 원래 JavaScript 의 변수 선언은 var 키워드를 통해서만 가능했는데, 버전이 올라가면서(ES5 to ES6) let과 const라는 키워드가 새롭게 생겼습니다. 사용법은 var 와 같습니다.
let name = "wecode";
const birthday = 19910223;:: let vs. const
let키워드를 사용하면 변수 값을 수정할 수 있습니다.const키워드를 사용한 변수 값은 수정할 수가 없습니다.
→ let을 쓸지, const를 쓸지는 개발자가 상황에 맞게 정하면 됩니다. 변수에 값을 할당하고 영원히 수정할 일이 없으면 const를 사용하고, 변수 값이 한 번이라도 수정될 예정이라면 let을 쓰면 됩니다. 물론 두 개 구분할 필요 없이 var를 써도 되지만, 앞으로 최신 버전에 맞는 문법을 사용하면 좋겠습니다!
03-7. 변수 값 수정
위에서 var, let, const 키워드를 사용하여 변수를 선언하고, 그 변수에 값을 할당하는 것도 배웠습니다. 이번에는 변수에 할당된 값을 수정하는 방법에 대해 알아보겠습니다.
const 키워드를 사용한 변수의 값은 수정할 수 없습니다. 또한 var 키워드는 최신 문법이 아닙니다. 이번 시간에는 let 키워드를 사용한 변수의 값을 수정해보도록 하겠습니다.
let 키워드는 변수를 새로 생성할 때만 사용됩니다. 값을 수정할 때는 변수 앞에 let 키워드를 사용하지 않습니다. 다음과 같은 방법으로 변수명에 새로운 값을 할당할 수 있습니다.
(이미 선언해둔) 변수명 = 새로운 값;몇 가지 예시를 살펴보겠습니다.
let name = "김개발";
let job = "frontend developer";
name = "김코딩";
job = "목수";- 첫 두줄에서는 name, job 이라는 변수를 선언하고 각각 "김개발", "frontend 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 = "선릉";
console.log('address : ', address);- 변수명은 중복이 되면 안 된다고 하는데, 값의 중복은 가능할까요?
let company1address = "선릉";
let company2address = "선릉";
let company3address = "강남";
let company4address = "강남";
let company5address = "선릉";
company5address = "선릉";- 네! 가능합니다. 변수 이름은 중복되면 안 되지만, 값은 얼마든지 중복 가능합니다.
Assignment
아래 과제들을 수행해주세요.
index.js에 variables 라는 함수가 있습니다.- 그 안에
myAge라는 변수가 이미 선언되어 있습니다. yourAge라는 변수를 새롭게 선언하고 나이를 할당해주세요.myAge와yourAge변수의 합이 50이 될 수 있도록yourAge의 값을 정해주세요.
// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function variables() {
// 다음 코드는 수정하거나 지우지 마세요
const myAge = 21;
// 아래에 코드를 작성해 주세요
const yourAge = 29;
// 다음 코드는 수정하거나 지우지 마세요
return myAge + yourAge;
}
// 아래의 코드는 절대로 수정하거나 삭제하지 마세요.
module.exports = {variables};
