JavaScript 개요, 변수와 상수, 변수명 작성법

JavaScript란?

자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어이다.
자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부릅니다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다.
스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있다. 이런 관점에서 보면 자바스크립트는 자바(Java)와는 매우 다른 언어라고 할 수 있다.
언어는 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다.
자바스크립트에서 사용되는 기초적인 문법의 개념으로는 속성과 메소드를 갖는 객체(오브젝트) 개념이 있으며, 변수 선언, 함수 정의, 연산자 그리고 제어문 등을 이 프로그래밍 언어의 주요 개념으로 언급할 수 있을뿐만아니라 이 언어가 속한 객체 지향 프로그래밍언어(OOP)의 공통적인 주요 개념이기도 한다.

 

변수

변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 이다. 
자바스크립트에선 let 키워드를 사용해 변수를 생성한다.

JavaScript의 선언에는 3가지 방법이 있다.

• var 변수를 선언. 추가로 동시에 값을 초기화.
• let 블록 스코프 지역 변수를 선언. 추가로 동시에 값을 초기화.
• const 블록 스코프 읽기 전용 상수를 선언.

var 변수선언은 이제 사용하지 않는 추세라고 한다. 요즘에는 let을 사용하며  상수 선언에 있어서는 const를 사용한다. (변화하지 않는 변수를 선언할 땐, let 대신 const를 사용한다.)

변수 선언 후 해당 변수에 할당연산자 = 를 사용하여 변수안에 데이터를 저장할 수 있다.

let message;
message = 'hello';

var age = 32;
let user = 'Jhon';

// var 은 오래된 문서에서 사용하던 변수선언, 요즘은 let 으로 선언해야한다.
// 위처럼 메세지를 변수 선언하고 선언된 변수에 다시 할당할 값을 입력할 수 있기도 하고 
// 유저 = 존이라는 것처럼 한번에 작성도 가능하다

const myBirthday = '06.05.1991'

// const는 상수 선언으로 변화하지 않는것을 선언할때 사용한다.

같은 변수를 여러 번 선언하면 에러가 발생합니다. 만약 변수에 새로운 값을 넣으면 새로운 값을 기록하게된다.

let message = "hello";
let message = "hi"; //SyntaxError: 'message' has already been declared

// message 라는 변수명이 반복되어 에러발생. 
// 따라서 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용해야한다

message = "bye"
console.log(message); // bye

// 만약 값이 변경되면, 이전 hello 데이터는 변수에서 제거되며 새로운 데이터인 bye가 기록된다.

만약 변수 두개를 선언하고, 한 변수 데이터를 다른 변수에 복사 할 수도 있다.

let pickColor = 'yellow';

let message;

// pickColor 'yellow' 값을 message에 복사합니다.
message = pickColor;

// 이제 두 변수는 같은 데이터를 가집니다.
alert(pickColor); // yellow
alert(message); // yellow

변수 명명

자바스크립트에선 변수 명명 시 두 가지 제약 사항이 있습니다.

1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
2. 첫 글자는 숫자가 될 수 없다.

다음은 유효한 변수명의 예시

let busNumber;
let test12345;

 

변수 선언시 변수이름 짓는 방법은 크게 3가지가 있지만 보통 여러 단어를 조합하여 변수명을 만들 땐 카멜 표기법(camelCase)이 흔히 사용됩니다. 카멜 표기법은 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성한다. 

let $ = 1; // '$'라는 이름의 변수를 선언합니다.
let _ = 2; // '_'라는 이름의 변수를 선언합니다.

alert($ + _); // 3

다음은 잘못된 변수명의 예시

let 5a; // 변수명은 숫자로 시작해선 안 됩니다.

let friend-name; // 하이픈 '-'은 변수명에 올 수 없습니다.

예약어는 변수명으로 사용할 수 없습니다. 예약어는 자바스크립트 내부에서 이미 사용 중이기 때문!

예약어 예시: let, class, return, function 예약어(reserved name) 목록

let let = 5; // 'let'을 변수명으로 사용할 수 없으므로 에러!
let return = 5; // 'return'을 변수명으로 사용할 수 없으므로 에러!

 

상수

변화하지 않는 변수를 선언할 땐, let 대신 const를 사용

const myBirthday = '06.05.1991';

이렇게 const로 선언한 변수를 '상수(constant)'라고 부르고 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다.

const myBirthday = '06.05.1991';

myBirthday = '12.16.2022'; // error, can't reassign the constant!

변수값이 절대 변경되지 않을 것이라 확신하면, 값이 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 const를 사용해 변수를 선언하도록 하자.

대문자 상수

기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습이며 이런 상수는 대문자와 밑줄로 구성된 이름으로 명명하기도 한다.

예시) 16진수 컬러코드에 대한 상수

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었습니다.
let color = COLOR_ORANGE;
alert(color); // #FF7F00

바람직한 변수명

변수명은 간결하고, 명확해야 합니다. 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 한다.

아래는 참고하기 좋은 규칙

• userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용하세요.
• 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피하세요.
• 최대한 서술적이고 간결하게 명명해 주세요. data와 value는 나쁜 이름의 예시입니다. 이런 이름은 아무것도 설명해주지 않습니다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용합시다.
• 자신만의 규칙이나 소속된 팀의 규칙을 따르세요. 만약 사이트 방문객을 'user’라고 부르기로 했다면, 이와 관련된 변수를 currentVisitor나 newManInTown이 아닌 currentUser나 newUser라는 이름으로 지어야 합니다.

 

 

 

참고 사이트 : https://ko.javascript.info/