개발자를 희망하는 초보의 자기개발 이야기

JavaScript 변수(Variable) 본문

프론트엔드(Front-end)/JavaScript

JavaScript 변수(Variable)

클라우드아실 2020. 12. 13. 20:52
반응형

JavaScript 변수(Variable)

1. 변수

 : 변수(Variable)는 변할 수 있는 값을 의미합니다. 
자바스크립트 (그리고 다른 컴퓨터 언어에서도) 변수는 컴퓨터 메모리에 자리를 잡게 되고, 여러 값을 넣을 수 있습니다. 이렇게 하나의 변수가 자리 잡는 동작을 "변수를 선언한다." 라고 합니다. 
변수를 선언하기 위해서는 let 키워드를 사용합니다. (var라는 키워드도 있지만 일단 let을 기본으로 전제하고 진행합니다.)

let name;

 

 : 선언은 완료되었으나 아직 값을 넣기 전입니다.  변수 이름만 입력할 경우 기본적으로 undefined 값을 반환합니다. 아무런 값이 할당된 게 없다는 뜻입니다. 
선언한 name이라는 빈자리에 무언가를 넣는 작업을 '변수에 값을 할당한다. 또는 대입한다.' 라고 합니다. 
변수 뒤에 = 연산자를 쓰고, = 뒤에 할당할 값을 넣습니다. 그럼 이제 '초기화' 가 되었다 합니다.

name = 'Lee';

 

 : 선언과 할당을 한 줄에 작성할 수도 있습니다. 

let name = 'Lee';

 

 : , 를 넣어 여러 변수를 동시에 선언 및 할당할 수도 있습니다. 하지만 한줄씩 따로 쓰는게 가독성이 좋습니다.

let myName = 'Lee', yourName = 'Park';

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

let myName = 'Lee';
let yourName = 'Park';

 

 : 이미 선언한 변수를 재할당하거나 변수에 변수를 할당할 수도 있습니다.
let은 처음 선언할 때에만 사용하는 선언문이고 '재할당' 할 때에는 할당만 새로 하면 됩니다. 변수는 타입이 정해져 있지 않으며, 할당된 변수에 다른 타입의 값을 다시 대입할 수도 있습니다.

let sum = 1; // 1
sum = sum + 2; // 1 + 2 = 3이 재할당됨
sum = sum + 3; // 3 + 3 = 6이 재할당됨
sum = sum + 4; // 6 + 4 = 10이 재할당됨
sum = '합계' // '합계'라는 문자열 변수로 재할당됨

 

 : 문자는 ""(큰따옴표) 또는 ''(작은따옴표) 로 감싸서 할당하고, 숫자는 그냥 할당합니다.

let name = 'Lee';
let sum = 1;

 

 : 만약 숫자를 따옴표로 감싸면 문자로 인식하여 의도치 않은 문제가 발생할 수 있습니다.
예로 아래의 newNum의 결과는 숫자 2가 아니라 문자 '11'로 할당됩니다. 2번째 줄의 1이 앞의 num을 따라 자동으로 형변환되어 문자열+문자열로 처리가 됩니다.

let num = '1';
let newNum = num + 1; // '11'

 

 : 변수명 의미가 명확한 것이 좋습니다. 
코드의 줄이 길어지거나 타인과 협업하게 되는 경우에 의미 파악이 어려울 수 있습니다.

let a = 21; // (?)
let b = 4.2; // (?)
let c = 2020; // (?)

let age = 21; // (!)
let grade = 4.2; // (!)
let year = 2020; // (!)

 

 : 변수명은 영어사용을 권장합니다.
한국어나 유니코드, 특수문자($와 _만 가능)을 사용해도 되지만 협업 시 호환이 어려울 수 있습니다. 특수문자의 경우 권장하지 않는 이유는 '여기' 를 참조 바랍니다. 간략하게 설명하면 

  • $기호는 일반적으로 document.getElementById () 함수에 대한 바로 가기로 사용됩니다 .
  • _기호는 Private Object 의 속성이나 메소드에 속할 때 주로 사용됩니다.

 : 변수명을 지을 때는 여러 가지 표기법이 있지만 JavaSrcipt에서는 camelcase(카멜케이스)의 표기법으로 짓는 것이 암묵적인 규칙입니다. 
낙타 등 같은 구불구불한 모양을 비유한 것으로 단어가 연결되면 띄어쓰기를 하지 않는 대신 두 번째 단어 첫 글자를 대문자로 기재합니다. 따라서 이 규칙으로 camelcase를 변수명으로 쓰면 camelCase가 됩니다.

let camelCase;

 

 : 예약어는 변수명으로 사용할 수 없습니다. 
예를 들어 어떤 동작을 할지 정해져 있는 if, for, let 같은 단어들은 사용할 수 없습니다.  

let let = '선언'; // (x)
let for = '반복'; // (x)

 

2. 표현식(expression)

 : 표현식(expression)은 하나의 값으로 표현되는 코드를 의미합니다. 
일반적인 덧셈, 곱셈 등의 모든 계산식이 해당하고 값이 도출되는 함수도 표현식이라 볼 수 있습니다.

let sum = 1.2 + 1.5; // 2.7
let mul = 2 * 2; // 4
let mod = 4 % 2; // 0

 

 : 표현식은 변수만으로 구성되기도 합니다.

let pi = 3.141592;
let radius = 5;
pi * radius * radius;

 

 : 표현식을 다른 변수에 결과로 담을 수도 있습니다.

let areaOfCircle = pi * radius * radius;
반응형

'프론트엔드(Front-end) > JavaScript' 카테고리의 다른 글

JavaScript 문자열(String)  (0) 2020.12.20
JavaScript 조건문(Condition)  (0) 2020.12.20
JavaScript 연산자(operator)  (0) 2020.12.20
JavaScript 함수(Function)  (0) 2020.12.14
JavaScript 자료형(Data Type)  (0) 2020.12.13