[ES6] 기본 문법 (1)

1. 파일 생성 및 플러그인 설치

VScode로 파일을 생성하고 js 확장자로 작업하고자 하는 디렉토리에 저장한다.

파일 생성

코드의 실행을 편리하게 하기 위해 Code Runner 플러그인을 설치해준다.

Code Runner

 

 

 

2. 변수

1) var

Javascript에서는 데이터 타입과는 상관없이 var만을 사용하면 되었다. 하지만 ES6으로 들어오면서 let과 const가 등장했다.

var hello = 'world'; // 글로벌 변수

function test() {
    var hello = 'korea';  // 로컬 변수
    console.log(hello);
}

test();

console.log(hello);


----------------------
korea
world
----------------------

var hello = 'world'; // 글로벌 변수

if(true) {
    var hello = 'korea';  // 로컬 변수
    console.log(hello);
}

console.log(hello);


----------------------
korea
korea
----------------------

2) let

var의 경우에는 변수가 선언될 때마다 값이 변경이 된다. 하지만 let은 변수를 선언한 블록(scope)에서만 유효하게 동작을 한다. 따라서 var 보다는 let을 더 권장한다.

let hello = 'world';

function test() {
    let hello = 'korea';
    console.log(hello);
}

test();

console.log(hello);


----------------------
korea
world
----------------------

3) const

const는 변하지 않는 값으로 상수 변수를 선언할 때 사용한다. const로 변수를 선언하고 해당 변수의 값을 변경을 하려고 한다면 오류가 발생한다. let과 동일하게 선언한 블록(scope)에서만 유효하게 동작한다.

const num = 5;

num = 6;

console.log(num);

단, 객체나 배열의 요소 수정은 가능하다.

// 객체
const drinks = {};
drinks.coffee = 'latte';
drinks.lemon = 'ade';

console.log(drinks);

// 배열
const arr = [ 1, 2, 3, 4, 5 ];
arr[0] = 100;
arr[4] = 200;

console.log(arr);


----------------------
{ coffee: 'latte', lemon: 'ade' }
[ 100, 2, 3, 4, 200 ]
----------------------

4) String Literal

// 예전 방식
const val01 = 'Hello';
const val02 = 'world';
const val03 = val01 + ' ' + val02 + '?';

console.log(val03);

// String Literal
const litVal = `${val01} ${val02}?` ;

console.log(litVal);