[Javascript] variable

Javascript ES6 variable declaration

Javascript ES6 이후로 let과 const 두가지 변수 선언 키워드가 생겼습니다.

이해하기 쉽게 var, let, const를 이용한 변수선언을 예제로 설명하겠습니다.

---

1. Variable Declaration

1-1. var

var c = 'c1'
var c = 'c2'
console.log(a)

위와 같이 c 라는 변수를 선언했을때 아무런 오류 없이 console에는 c2 가 찍힙니다.

1-2. let

let c = 'c1'
let c = 'c2'
console.log(a)

하지만 let으로 변수를 선언하게 된다면 에러가 나게됩니다.

이처럼 let은 중복선언을 허용하지 않습니다. const도 마찬가지로 중복선언을 허용하지 않습니다.

---

2. Scope

var는 function-scope,

let 과 const는 block-scope 입니다.

2-1. var

var a = "1"
console.log(a)

if (true) {
	var a = "2"
	console.log(a)
}

console.log(a)

위의 결과는 1, 2, 2 가 console에 찍힙니다. 하지만 let의 경우에는

2-2. let

let a = "1"
console.log(a)

if (true) {
	let a = "2"
	console.log(a)
}

console.log(a)

위의 결과는 1, 2, 1이 나오게 됩니다. let은 block-scope 이기때문에 

if문 안에서의 a는 if문 안에서만 유효합니다.

const도 let과 마찬가지 입니다. block안에서만 유효하는 변수 선언 keyword 입니다.

---

3. Difference (let vs const)

그렇다면 let과 const의 차이점은 무엇일까요????

3-1. let

let a = 1
a = 2
console.log(a)

let 으로 선언한 변수의 값을 변경하게 된다면 console에는 2가 나옵니다.

3-2. const

const a = 1
a = 3
console.log(a)

const의 값을 변경하게 된다면 다음과 같은 오류를 볼 수 있습니다.

let과 const는 block-scope 라는 점에서 비슷하지만 mutable과 immutable의 차이입니다.

let은 일반적인 변수를 선언할 때, const는 상수를 선언할 때 사용합니다. 

let과 const를 사용하여 javascript의 변수를 선언한다면 scope로 인한 실수를 미리 방지할 수 있습니다.

---

4. Template String

전통적인 문자열 더하기는 +를 사용하여 문자열과 변수를 이어붙이는 방식을 사용합니다.

console.log(name + ", " + company+ ", " + department)

하지만 + 를 사용하지 않고 $ { } 를 사용하여 문자열에 변수를 넣을 수 있습니다.

console.log(`${name}, ${company}, ${department}`)

---

5. Default Parameter

ES6부터 Default Parameter가 추가되었습니다.

function user(name="Yongyi", age=28) {
	console.log(`${name}은 ${age}살 입니다.`)
}

---

6. Arrow Function

ES6부터 Arrow Function이 추가되었습니다.

function keyword를 사용하지 않고 function을 만들 수 있으며

return을 사용하지 않고 결과값을 반환할 수 있는 기능입니다.

var sum = (a, b) => a+b
console.log(sum(1, 3))
// result = 4