본문 바로가기
Javascript

Javascript - Variables(변수)

by Su1993 2020. 6. 17.
반응형

1. 변수의 사용

제 이름은 개발자입니다.

이름 = 개발자

컴퓨터도 사람과 같이 많은 데이터를 기억해야 하는데, 이때 변수를 사용한다.

 

2. 변수의 생성

다양한 값(value)을 각각의 변수에 저장한다. "직업", "이름"과 같은 역할을 하는 것을 variable(변수)라고 하며,

"김개발", "개발자"와 같은 값은 value(값)이라고 한다.

JavaScript에서 위의 문장을 표현하고 싶다면, 변수 이름 앞에 var라고 쓰고 값을 할당해주면 된다.

var name = "김개발";
var job = "frontend developer";
  • name, job은 변수이다.
  • 김개발은 name이라는 변수에 할당된 값이다.
  • frontend developer은 job이라는 변수에 할당된 값이다.

name이라는 변수에 "김개발"이라는 값이 저장되면, 컴퓨터도 name이라는 변수가 "김개발"이라고 알 수 있다.

 

3. 변수 이름 정하기

변수의 이름은 원하는 대로 정할 수 있지만 몇 가지 주의할 점이 있다.

 

  • 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없다.
  • 변수 이름, 함수 이름, 연산자 모두 대소문자를 구분해야 한다.
  • 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자 또는 밑줄(_) 또는 달러 기호($)중 하나를 써야 한다.
  • 두 번째 문자부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있다.
  • 변수 이름, 함수 이름 등 camelCase(카멜 케이스) 방식으로 쓰는 것이 좋다.

camelcase vs snake_case

1) camelcase : 카멜 케이스란 낙타 등처럼 울퉁불퉁하다는 말이다. 단어가 새로 시작할 때부터 대문자로 쓰면 된다.

(예. firstSecond, toDoListArray, myProfileImg)

 

2) snake_case : 카멜케이스 말고 snake_case 표현도 있다.(잘 사용하지 않는다.) 변수 이름에 -는 사용할 수 없어서 _를 사용하는 것이다.

 

연관이 있는 변수명

변수명을 지을 때는 변수명에서 의미가 추측 가능하도록 짓는 습관을 짓는 게 좋다.

그래야 다시 봐도 변수 역할이 어떤 역할을 하는지 알기 쉽기 때문이다.

4. let, const

위에서는 변수 앞에 var 키워드를 사용했다. 원래 Javascript에서 변수를 선언할 때는 var만 있었는데, 버전이 올라가면서

let와 const라는 키워드가 생겼다. 사용법은 var와 같다.

대신 let키워드를 사용하면 변수 값을 수정할 수 있고, const키워드를 사용한 변수는 값을 수정할 수 없다.

변수값을 수정할 필요가 없다면 const를 사용하면 되고, 변수값이 수정돼야 한다면 let를 사용하면 된다.

물론 var를 사용해도 되지만, 최신 문법을 사용하는 것이 좋다.

 

5. 변수 값 수정

변수를 생성할 때 값을 저장하고, 그 이후에 값을 수정할 수 있다. 값을 수정할 때는 변수 앞에 let 키워드를 빼야 수정 가능하다.

let키워드는 변수를 새로 생성할 때만 사용하기 때문이다.

let name = "홍길동"; 
let job = "frontend developer";

name = "김개발";
job = "목수";

 

변수의 생성 vs 변수의 수정

let 키워드의 역할은 "변수"를 생성하는 것이다.

let name = "김개발";
let name = "김코딩";

위 코드는 변수의 값을 변경한 것이 아닌, name이라는 변수를 두 번 생성한 것이다.

 ⚠️ 같은 변수의 이름을 중복해서 쓰면 안 된다.

 

변수의 선언 vs 변수 값 할당

변수를 선언(declare)만 하고 값의 할당(assign)은 나중에 할 수도 있다.

let address;
address = "서울";

앞에서 변수 이름은 중복되지 않는다 말했었는데, 값은 제한 없이 중복 가능하다.

반응형

'Javascript' 카테고리의 다른 글

JavaScript - 텍스트 문자열의 연결  (0) 2020.06.21
JavaScript - Math expressions  (0) 2020.06.21
JavaScript - Function(함수)  (0) 2020.06.21
Javascript - 주석  (0) 2020.06.16
Introduction to JavaScript  (0) 2020.06.16

댓글