이번 포스트는 [변수선언, 기본출력, 기본 규칙]에 관한 내용입니다.

1️⃣ 변수 선언 방식

• JavaScript에서는 var, let, const를 이용하여 변수를 선언할 수 있습니다.
• 동적 type이므로 자유롭게 변수를 선언할 수 있습니다. (타입이 명확하지 않아 오히려 단점이될 수도 있습니다. 대신에 이를 보완한 언어인 ‘TypeScript’를 사용하기도 합니다.)

(1) var

• var로 선언할 경우 변수명이 중복선언 되더라도 컴파일오류없이 실행됩니다. 이는 실수할 가능성이 큽니다. ES6 이후, 이를 보완한 선언 방식인 let과 const가 추가 되었습니다.

var fruit = "apple";
console.log(fruit);

var fruit = "orange";
console.log(fruit);

(2) let

• let과 const로 중복 선언을 하면 컴파일오류가 일어납니다.

let fruit = "apple";
console.log(fruit);

fruit = "strawberry";

let fruit = "orange";  // 컴파일 오류
console.log(fruit);

(3) const

• const는 추가적으로 선언된 이후에 수정을 하지 못하게 해줍니다.
• const는 선언과 동시에 값을 지정해 주어야하며 아무값도 지정하지 않을 경우에도 컴파일 오류가 일어납니다.

/* case1 */
const fruit = "apple";

fruit = "strawberry"  // 컴파일 오류

/* case2 */
const fruit;  // 컴파일 오류

• const 변수명은 ‘대문자’로 사용하는 것이 좋습니다.(상수임을 쉽게 알 수 있습니다.)

/* 비추천 방법 */
const pi = 3.14;

/* 추천 방법 */
const PI = 3.14;

2️⃣ 기본 출력(console.log)

(1) 숫자출력

• 숫자뿐만아니라 연산 되어 출력이 가능합니다.

console.log(3);
console.log(3 + 3);
console.log(5 - 3);
console.log(3 * 2**2);  // **은 거듭제곱으로 '*'연산자보다 우선순위
console.log(7 / 2);
console.log(7 % 2);

(2) 문자열출력

• 문자를 ''(작은따옴표), ""(큰따옴표), ``(백틱)으로 감싸서 출력할 수 있습니다.

  console.log('apple');
  console.log("apple");
  console.log(`apple`);  // 백틱(backtick)
  

• 작은 따옴표, 큰 따옴표는 \기호를 이용하여 출력할 수 있습니다. 그보다 ``(백틱)을 이용하는 편이 햇갈리지 않고 편리합니다.

console.log('"큰따옴표"');  // ''를 이용하면 ""출력가능
console.log("'작은따옴표'");  // ""를 이용하면 ''출력가능
console.log('\'작은따옴표\'"큰따옴표"');
console.log("'작은따옴표'\"큰따옴표\"");
console.log(`'작은따옴표'"큰따옴표"`);  //``(백틱)을 이용하면 신경x

(3) 숫자 + 문자열출력

• JavaScript는 정적변수를 사용하지 않는 언어입니다. 그렇다보니 숫자와 문자열을 구분없이 동시에 출력이 가능합니다.

console.log("문자열" + 3);
console.log(typeof ("문자열" + 3));

console.log(4 + 3);
console.log(typeof (4 + 3));

console.log("4" + 3);
console.log(typeof ("4" + 3));

console.log(Number("4") + 3);
console.log(typeof (Number("4") + 3));

console.log(String(4) + 3);
console.log(typeof (String(4) + 3));

(4) 변수 출력

• 변수를 문자열과 출력하는 방법은 여러가지가 있지만 ``(백틱)을 이용하면 ${}를 사용하여 변수를 편리하게 삽입할 수 있습니다.

let fruit = "apple";

/* 방법 1 */
console.log("영어로 " + fruit + "은 한국어로 사과입니다.");

/* 방법 2 */
console.log(`영어로 ${fruit}은 한국어로 사과입니다.`);

3️⃣ 기본 규칙

(1) 코드 구분

• 코드 사이에 줄바꿈을 한다면 구분문자를 넣어줄 필요가 없지만 한줄에 여러코드를 입력할 때는 ‘세미콜론(;)’을 넣어 코드를 구분해 주어야 합니다.
• 사용하는 환경에 따라 알맞은 방법을 사용하면 됩니다. 하지만 각 코드마다 ;(세미콜론)을 사용하는 편이 가독성이나 실수를 줄이는면에서 좋을 것 같습니다.

/* 방법 1 */
console.log(3)
console.log(4)

/* 방법 2 */
console.log(3); console.log(4)
console.log(3) console.log(4)  // 컴파일 오류

/* 방법 3 */
console.log(3);
console.log(4);

(2) 작명 규칙

• 첫글자로 ‘문자(a ~ b, A ~ Z)’, ‘밑줄문자(_)’, ‘달러 기호($)’만 사용이 가능합니다.
• ‘대문자’와 ‘소문자’를 구별합니다.
• ‘예약어’를 사용하면 안 됩니다.

let Apple;
let apple;
let _apple;
let $df;
let 112ad;  // 컴파일 오류
let if;  // 컴파일 오류
let for;  // 컴파일 오류

• 띄어쓰기를 변수에 사용할 수 없습니다. 그 대신에 파이썬(Python)이나 C언어등등에서는 _(밑줄)을 사용했습니다.
• 하지만 자바스크립트(JavaScript)에서는 중간중간 ‘대문자’를 사용해서 구분하는데 그 모양이 낙타(camel)의 혹처럼 생겨서 ‘camelCase’방식이라고 합니다.

/* 비추천 방식 */
let my_phone_number;

/* 추천 방식 */
let myPhoneNumber;

(3) 그밖의 규칙(스타일 가이드, 코딩 컨벤션)

1. Airbnb - JavaScript Style Guide
2. 구글 - JavaScript Style Guide
3. w3schools.com - JavaScript Style Guide
4. StandardJS - JavaScript Style Guide
5. Idiomatic.JS - JavaScript Style Guide

< 자바스크립트[JavaScript] 기초문법 포스트 목차 >

>> 자바스크립트 기초문법1 [변수선언, 기본출력, 기본 규칙]
2.  자바스크립트 기초문법2 [자료형, 연산자, 함수선언, 반복문, 조건문]
3.  자바스크립트 기초문법3 [객체(objact)]
4.  자바스크립트 기초문법4 [배열(array)]
5.  자바스크립트 기초문법5 [(지수,n진법)표기법, 숫자형 메소드, Math객체]