변수 선언문과 연산자

변수와 상수

변수명

1. 변수명은 문자, 숫자, $, _가 가능하다.
2. 첫 글자는 문자가 될 수 없다.

1. camelCase를 일반적으로 사용한다.
2. 환경변수를 상수로 지정할 때에 SCREAMING_SNAKE_CASE를 사용한다.
3. kebab-case는 파일명, 특히 url에 쓰일 파일명에 지정한다.

let

//let은 할당, 선언, 재선언 가능
let age; //선언
age = 25 //할당
let user = 'John'; //선언과 할당
user = 'David'; //재할당

//아래와 같이 let, const 키워드를 한번만 사용할 수 있으나 코딩 컨벤션상 추천하지 않음.
let user = 'John', age = 25, message = 'Hello';
let user = 'John', 
    age = 25, 
    message = 'Hello';

const

//const는 선언과 할당이 동시에 이루어지며, 재선언은 불가능하다.
const user = 'John'; //선언과 할당

//환경변수로 쓰이는 상수는 SCREAMING_SNAKE_CASE를 사용한다.
const WHITE_COLOR_CODE = '#FFFFFF';

var와 함수 선언문의 Hoisting

//선언되지 않은 변수는 ReferenceError을 내뱉는다.
console.log(message) //ReferenceError: message is not defined

//let, const는 선언문 이전에 접근을 금지한다. 이를 Temporal Dead Zone이라 한다.

console.log(user) //ReferenceError: Cannot access 'user' before initialization
let user = 'John'

//var는 접근이 가능하다. 이를 Hoisting이라 부른다.
console.log(age) //undefined
var age = 25 

Hoisting은 '평가 단계'와 '실행 단계'로 나누어진 자바스크립트의 실행 컨텍스트에 기인한다.
평가 단계에서 var 키워드와 함수 선언문이 먼저 평가되고 선언된다.
특히 '함수 선언문'은 접근이 가능할 뿐 아니라 실행까지 가능하므로 Hoisting을 방지하고 싶다면 '함수 표현식' 혹은 '화살표 함수'를 식별자에 할당하는 방식이 권장된다.

//함수 선언문
hoistedFunc() // 'Hello World!'

function hoistedFunc(){
  console.log('Hello World!');
}

//함수 표현식
funcExpression() //ReferenceError: Cannot access 'funcExpression' before initialization

const funcExpression = function() {
  console.log('Hello World!');
}

//아래는 기명 함수 표현식(Named Function Expression)이다. 함수 선언문과 동일한 형태이지만 식별자에 할당되는 함수 표현식임에 주목하자.
namedExpression() //ReferenceError: Cannot access 'funcExpression' before initialization
Expression() //ReferenceError: Expression is not defined

const namedExpression = function Expression() {
  console.log('Hello World!');
} 

연산자

대입 연산자, 산술 연산자

let value = 1; // 변수 선언
value = 2; // 대입 연산자
value = 2 + 1; //산술연산자 +, -, *, -

//증감 연산자는 코딩컨벤션에서 권장하지 않음. 산술 연산자로 대체 요망
let a = 1
let b = 1
console.log(++a); //2
console.log(b++); //1

논리 연산자와 단축 평가

//논리 연산자 !(NOT), &&(AND), ||(OR)
const truthy = []
const falsy = 0

console.log(!truthy) //false
/*
 * 논리 연산자의 단축평가에서 
 * &&는 가장 처음 false인 값을 만나면 반환하며,
 * false인 값이 엾으면 마지막 값을 반환한다.
 * ||은 가장 처음 true인 값을 만나면 반환하며,
 * true인 값이 없으면 마지막 값을 반환한다.
 * !!를 통해 truthy, falsy한 값들을 boolean 값으로 변환할 수 있다.
 */
console.log(truthy && falsy) // 0
console.log(!!(truthy && falsy)) // false

console.log(truthy || falsy) // []
console.log(!!(truthy || falsy)) // true

//논리 연산자는 NOT, AND, OR 순으로 연산이 이루어진다.
const value = !((true && false) || (true && false) || true);
console.log(value) // true

비교 연산자

'===' : 두 값이 같은지를 나타낸다. '=='와의 차이점은 강제 형변환이 일어나지 않는다. 원시 자료형(primitive)은 값을 비교하며, 범 객체(object, array)는 인스턴스의 참조값을 비교한다.

'<', '>=', '>', '<='

const a = 10;
const b = 15;
const c = 15;

console.log(a < b); // true
console.log(b > a); // true
console.log(b >= c); // true
console.log(a <= c); // true
console.log(b < c); // false


const array1 = [15]
const array2 = array1 //array1의 얕은 복사
const array3 = [15] // array1과 동일한 원시 값을 갖는 다른 배열

console.log(array1 === array2) // true
console.log(array1 === array3) // false
console.log(array1[0] === array3[0]) // true