[JavaScript공부 - 5] Variables(변수)

  대부분의 경우에 자바스크립트는 정보를 처리해야함. 이에 대한 예로 2가지를 들어보면

1. 온라인 쇼핑몰 - 온라인 쇼핑몰의 정보는 쇼핑몰에서 파는 물건과 쇼핑카트에 담겨진 물건에 대한 정보가 포함되어 있음.

2, 채팅 어플리케이션 - 채팅 어플리케이션은 사용자, 사용자들이 보내는 메세지 등등을 포함하는 정보가 있음.

Variables(변수)는 이러한 정보를 저장하는 데에 사용됨.

A variable (변수)

---

변수는 "이름이 붙여진 데이터 저장고"임. 우리는 상품이나 방문자 등에 대한 데이터를 변수를 사용하여 저장할 수 있음. 

자바스크립트에서 변수를 사용하기 위해서는 "let"이라는 키워드를 사용함.

아래의 구문은 "message"라는 이름을 가진 변수를 생성(다른 말로, 선언 또는 정의)를 하는 예시임.

let message;

이제, 이 message라는 변수에 할당 연산자인 '='을 사용하여 데이터를 넣을 수 있음.

let message;
 
message = "Hello"; //String 

Hello라는 String은 이제 message 라는 변수와 연관되어 메모리에 저장됨. 이제 message 라는 변수를 사용하여 해당 String에 접근할 수 있음

아래와 같이 message라는 변수를  alert에 넣고 실행하게 되면 Hello라는 메세지가 나타나게됨.

let message;
 
message = "Hello";
 
alert(message); //Hello

let message = "Hello";
 
alert(message); //Hello

또한, 여러 변수를 한 줄에 선언할 수도 있음.

let user = "John", age = 25, message = "Hello";

여러 변수를 한 줄에 선언하는 것은 짧아 보일지 몰라도 이런 방식으로 변수를 선언하는 것은 추천하지 않음. 가독성을 더 좋게 하기 위해서는 변수 하나 당 한 줄에 선언하는 것을 추천함.

아래 처럼 여러 줄에 여러 변수를 선언하는 것은 길어 보일지 몰라도 변수를 파악하기에는 더 쉬움.

let user = "John";
let age = 25;
let message = "Hello";

일부 사람들은 여러 변수를 여러 줄에 아래와 같이 data type을 선언하지 않고 쓰기도 함.

let user = "John",
    age = 25,
    message = "Hello";

또는, 쉼표(comma)를 처음에 두는 경우도 있음!

let user = "John"
    , age = 25
    , message = "Hello";

기술적으로 보면 위의 모든 변수 선언은 다 똑같은 동작을 함. 그래서 개인 취향이나 미적 감각에 따라서 여러 스타일로 코드를 짤 수 있음.

'let' 대신 'var'

오래된 스크립트에서는 let 대신에 var라는 키워드를 사용하여 변수를 선언하는 부분을 볼 수 있음.

var message = "Hello";

키워드 var는 let과 '거의' 같은 동작을 함. 둘 다 변수를 선언하지만 이전의 스크립트에서는 약간 다르게 동작함.

let과 var의 미묘한 차이는 여기서 설명하지 않고 "The old 'var'."라는 챕터에서 설명하겠음.

A real-life analogy(실제 삶을 비유하다)

---

  변수라는 개념은 데이터를 위한 박스를 변수로 보고 이 박스에 유일한 이름이 써진 스티커를 붙인다는 생각으로 이해할 수 있음.

예를 들면 변수인 'message'는 "Hello"라는 값을 message라고 이름이 붙여진 박스에 넣는다고 생각할 수 있음. 이 박스에는 어떠한 값도 넣을 수 있음. 또한, 우리가 원하는 만큼 이 값을 변경시킬 수 있음.

let message;
message = "Hello";
message = "World!"; //value changed
 
alert(message); // World!

만약 위와 같이 값이 변경되면 이전의 ("Hello")데이터는 없어지게 됨.

또한 하나의 변수에 할당된 값을 다른 하나의 변수에 복사하여 두 변수를 선언할 수도 있음!

let hello = "Hello";
let message;
 
//copy 'Hello' from variable hello into variable message
message = hello; 
 
alert(hello); //Hello
alert(message); // Hello

기능 언어

Scala나 Erlang과 같은 기능 프로그래밍 언어는 변수의 값을 변경하는 것을 금지함.

이러한 프로그래밍 언어는 "박스에" 한 번 값을 할당하면, 이 박스에 영원히 남게 됨. 만약 다른 값을 저장해야 할 때, 이 프로그래밍 언어는 새로운 박스(새로운 변수)를 생성하도록 함. 즉, 기존의 변수를 재사용할 수 없다는 의미임.

처음에는 기존 변수의 재사용 불가가 조금 이상해 보일 수 있지만, 이러한 기능 언어는 꽤 상당한 개발을 가능하게 함. 이 외에도 기존 변수의 재사용 불가와 같은 제약이 장점으로 될 수 있는 평행 계산과 같은 영역에서 강점을 보임. 이러한 언어를 공부하는 건 생각의 영역을 넓혀 주기 때문에 추천함.

Variable naming (변수 명명)

---

자바스크립트에서 변수의 이름을 정하는 데에 두 가지 제약 조건이 있음.

1. 이름은 문자나 숫자, 특수문자($, _)만 가능함.

2. 변수 이름의 처음이 숫자로 시작해서는 안됨.

아래는 변수의 이름으로 가능한 예시들임.

let userName;
let test123;

변수명이 여러 단어로 이루어져 있을 때, camelCase가 보편적으로 사용됨.(user name = userName) camelCase는 2개 이상의 단어를 연결하는 데 각 단어의 시작을 대문자로 시작함. (에) myVeryLongName)

신기한건 달러 기호($)와 언더스코어(_)는 이름으로 사용됨. 이들은 특정한 의미를 가지고 ㅇㅆ지 않는 정규 기호임.

따라서 아래와 같은 구문이 가능함.

let $ = 1;
let _ = 2;
 
alert($ + _) // 3

# 영어가 아닌 문자들도 변수명으로 가능하지만 추천하지 않음

어떠한 언어의 문자도 변수 명으로 사용 가능함. 기술적으로는 영어 외의 다른 문자를 변수명으로 허용하지만 변수명으로 영어를 사용하는 것이 국제적인 통상으로 받아 들여짐. 따라서 간단한 스크립트를 짤 때에도, 다른 사람들이 이를 읽고 이해할 수 있도록 영어를 사용하는 것이 좋음. 

# 예약어

변수명으로 사용될 수 없는 예약어가 있음. 에약어들은 그 단어 자체로 사용이 되기 때문에 이를 변수명으로 지정할 수 없음.

예를 들어 : let, class, return, function 들과 같은 것들이 예약어임. --> 예약어 리스트는 정리 된 사이트나 블로그들이 많으므로 찾아보는 것을 추천함.

따라서 아래와 같이 사용하면 구문 에러가 생김.

let let = 5; //cannot name a variable "let"
let return = 10; //cannot name it "return"

# "use strict"를 사용할 때와 아닐 때의 변수 할당

일반적으로, 값을 할당 하기 전에 변수를 정의함. 그러나 이전에는 기술적으로  let과 같은 변수 데이터 타입 없이 값을 할당할 수 있었음. 그러나 "use strict"를 사용하게 되면 이전에 변수 데이터 타입 선언 없이 만들어진 변수는 사용할 수 없음

따라서 "use strict"를 사용함으로써 데이터 타입 선언 없이 변수를 선언하지 않는 좋지 않는 습관을 개선할 수 있음.

"use strict"
 
num = 5; //error : num is not defined

Constant (상수)

---

상수 (변하지 않는) 변수를 선언하기 위해서는  let 대신에 'const'를 사용해야함.

const myBirthday = '18.04.1982';

const를 사용하여 선언된 변수를 "상수"라고 불림. 상수는 변할 수 없음. 상수의 값을 변하게 하면 에러가 발생함.

const myBirthday = '18.04.1982';
myBirthday = '20.01.1992'; //error, cannot reassign the constant!

프로그래밍을 할 때, 변수가 계속 변할지 안변할지를 판단해야함. 만약 변하지 않아야 한다면 const로 변수를 선언하여서 이 값이 변하지 않을 거라는 사실을 코드를 읽는 사람에게 명확히 알려 줄 수 있음.

[ 상수 선언과 대문자 ]

스크립트 실행 전에 기억하기 어려운 값을 별칭으로 상수를 사용하는 것은 널리 퍼진 관습임. 이러한 상수들은 주로 대문자와 언더스코어(_)를 사용하여 이름을 명명함.

예를 들어, 아래와 같이 변수를 명명할 수 있음.

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";
 
let color = COLOR_ORANGE;
alert(color); // #FF7F00

상수를 사용하는 것에 대한 장점은..

1. COLOR_ORANGE라는 변수명은 #FF7F00 이라는 값보다 더 기억하기 쉬움.

2. #FF7F00은 COLOR_ORANGE 보다 오타를 낼 확률이 높음.

3. 코드를 읽을 때 COLOR_ORAGNE가 #FF7F00보다는 더 유의미함.(의미 파악이 쉬움)

언제 상수를 대문자로 쓰는지, 일반 camelCase로 쓰는지는 헷갈림.

상수라는 것은 단지 변수의 값이 절대 변하지 않는다는 것을 의미함. 그러나 실행 전에 알아야하는 상수들이 있고 실행 중에 계산되어야 할 상수가 있음. 그러나 결국 이 두 경우 모두 처음 할당 된 값은 변하지 않는다는 것이 핵심임.

예를 들어

const pageLoadTime = /* time taken by a webpage to load */;

pageLoadTime 값은 페이지가 로드될 때는 그 값을 알 수 없음. 따라서 이 pageLoadTime의 변수명은 camelCase로 명명됨. 그러나 pageLoadTime은 여전히 상수이기 때문에 한 번 값이 할당 되면 그 값이 변하지 않음.

즉, 대문자로 이루어진 상수는 하드 코딩된 값의 별칭으로 보면 됨!

Name things right (적절하게 이름 작성하기)

---

변수에 관련하여 하나 더 가장 중요한 것이 있음. 바로 변수명을 지을 때는 조심스럽게 만들 것!

변수의 이름을 짓는 것은 프로그래밍에서 가장 중요하고 복잡한 기술 중에 하나임. 변수명만 빠르게 봐도 이 코드가 초보자가 만들었는지 경력자가 만들었는지 알 수 있음.

실제 프로젝트에서 대부분의 시간을 완벽하게 분리되어 새로 어떠한 것을 만드는 것보다 기존에 존재하는 코드를 수정하거나 개선 및 확장하는 데에 사용됨. 따라서 변수의 이름이 잘 선언된 코드들이 정보를 찾는 데에 더 쉬움.

따라서 변수를 선언하기 전에 적절한 변수의 이름을 설정하는 것에 시간을 투자해야함. 그렇게 하게 되면, 나중에 다시 코드를 보아도 이해할 수 있음.

다음은 변수의 이름을 설정하는 데에 유용한 규칙임.

1. userName이나 shoppingCart와 같이 인간이 읽기 쉬운 이름을 사용해야함

2. 정말로 무엇을 하는지 모른다해도 a, b, c와 같이 짧은 이름이나 축약어를 사용하는 것을 피해야함.

3. 이름만 봐도 어떤 정보를 담고 있는지를 명확히 알도록 이름을 지어야함. data나 value와 같은 이름들은 좋지 않은 예임. 이 변수들은 이름 자체로 어떤 의미를 담고 있지 않기 때문. 만약 코드에서 명확하게 가리키는게 있다면 사용할 수는 있음.

4. 팀이나 혼자 코드를 짤 때 이 단어에 대해서 모두가 합의 가능해야함. 만약 사이트 방문자를 "user"로 정의한다면 이와 관련된 정보 변수들은 currentVisitor, newManInTown 대신에 currnetUser, newUser라고 쓸 수 있음

규칙들이 간단해 보이지만 실제로 변수를 선언할 때 어려울 수 있음!

# 재사용과 생성과 관련하여..

가끔 몇몇의 프로그래머들은 변수를 새로 선언하기 보다는 기존에 있던 변수를 재사용하려는 경향이 있음.

결과적으로 변수는 사람들이 상자의 이름을 변경하지 않고 이름과 관련 없어 보이는 정보들을 상자에 넣는 것과 같음. 이렇게 마구잡이로 변수에 값을 넣게 되면 그 변수에는 어떤 값이 있는지 누가 알 수 있을까? 아무도 알 수 없기 때문에 변수를 재사용해야할지나 새로 생성해야할지는 잘 체크할 사항임.

변수를 재사용하는 프로그래머들은 변수 선언하는 데에 짧은 시간이 걸리지만 디버깅할 때에는 오랜 시간이 걸릴 수 있음.

변수를 생성하는 건 좋은거지 나쁜것이 아님.

현대 자바스크립트는 코드를 충분히 보고 최적화하기 때문에 새로운 변수를 선언하는 것에 성능 면에서 문제를 일으키지 않음. 다른 값을 다른 변수에 할당하는 것은 엔진이 코드를 보는 데에 오히려 도움이 될 수 있음!

[출처 : https://javascript.info/variables ]