[220127] 상수와 리터럴의 차이, 객체리터럴, 템플릿리터럴

목록

1.   상수와 리터럴의 차이

2.  객체 리터럴

3.  템플릿 리터럴

 

---

 

리터럴이 뭐냐고 물어본다면 엄.. 몰라요? 근데 쓰긴 썼었던거 같은데?하는것도 한두번이지,

자꾸 찾기도 귀찮아서 수업을 들을때마다 은은하게 지나가며 들었던 리터럴에 대해 찾아보았다.

 

 

말 그대로 제공하는 변수가 아니라 고정값

검색할때 언제나 먼저 찾게되는 MDN이 리터럴에 대해 설명한 글이다.

고정값은 상수가 아닌가? 상수랑은 뭐가 다른걸까?

 

 

상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.

'상수의 값'을 재할당할 수 없다는 것과 상수에는 숫자뿐만이 아니라 객체도 넣을 수 있다는 것에 집중해야한다.

 

 

 

---

 

 

상수 :  배열과 변수의 차이

const b = {}
b.box1 = 10
console.log(b.box1)

b.box1 = 20
console.log(b.box1)

const a = 10
a = 20

다음 코드와 렌더링 값을 보자. 모두 const로 상수 선언을 했고, 값을 한번씩 바꾼 코드다.

하지만 객체 b의 속성은 값을 수정할 수 있었던 것에 비해, 변수 a는 값을 재할당이 불가능하다고 에러가 떴다.

왜 그럴까.

 

 

 

 

우리는 여기서 자바스크립트의 메모리 구조인 콜스택과 힙을 생각해야 한다.

https://hancoco.tistory.com/74

[220105] 자바스크립트의 구조 : 콜스택과 메모리힙, 스택과 힙이란?

자세한 설명은 위 블로그 글에 가면 확인이 가능하다.

 

 

 

 

배열의 메모리 할당 흐름

let arr = [1,2,3]

배열 arr을 자바스크립트에서 실행했을때 할당되는 메모리의 흐름이다.

여기서 우리는 배열명인 arr이 콜스택에 저장되는 값과 [1,2,3]이 저장되는 메모리힙의 주소가 다른것을 확인할 수가 있다.

메모리힙은 늘어나거나 줄어들 수 있게 가변적이므로 push()로 값을 추가해도 주소가 변하지 않는다.

즉, 객체나 배열을 상수를 const로 선언해도 속성이나 값을 변경할 수 있는 이유다.

 

 

 

---

 

 

리터럴 : 데이터 그 자체

 

이게 뭔소리냐 하겠지만 일단 코드를 보자.

let a = 1 //리터럴 표기법

a는 변수이며, 1은 리터럴이다.

1은 1이란 숫자 그 자체로 쓰이지, 1이 변수가 되어서 그 안에 무언가를 넣을 수 없다.

 

let 11 = '13' //이게 안된다는 소리

이렇게 1과 같게 데이터가 변하지 않게 설계를 한 값이 있다.

string과 같은 값들은 자바스크립트가 먼저 선점한 변수로, 다른 값을 덮어씌우거나 변경할 수가 없다.

이런 불변값들을 객체리터럴 혹은 리터럴이라고 한다.

• 배열
• bool
• 부동소수점
• 숫자
• 객체
• 정규표현식
• 문자열

자바스크립트에서 있는 리터럴은 다음과 같다.

 

 

---

 

 

객체리터럴 종류 중에는 객체리터럴이 있다.

.......?

이게 무슨 상자 안에 상자 안에 상자같은 말이냐고 하겠지만 mdn이 그렇게 말했다...

객체지향언어로 만들어진 자바스크립트므로, 객체 간에 연결이 있다는 말을 이렇게 한 것 같다.

어쨌든 기존에 객체를 선언하던 방법이 ES6부터는 조금 더 간단하게 단축화가 되어서 적는게 이렇게 길어졌다.

(나도 이렇게 길어질 줄 몰랐음.)

 

 

 

객체 리터럴을 좀더 간단히 쓰기

//객체 리터럴
let a=10
let b=20
let c=30

// 이 형태를 단축화
let obj={
    name : a,
    age : b,
    height : c,
}

// ES6부터 단축화가 가능해짐
let obj2 = {
    a:a,
    b:b,
    c:c,
}

 

 

느낌상 구조분해할당과 비슷한 느낌이 든다.

사용하려는 속성과 속성값이 같을 경우, 객체 내에서 속성:속성으로 선언해주면 사용이 가능하다.

더 좋은 사실은, 변수명을 딱히 새로 짓지않고 속성 그대로 사용할경우 생략이 가능한 것이다.

let obj2 = {
    a,
    b,
    c,
}

출력도 잘 나온다. 속성 key값과 속성 value값이 그대로 들어가있다.

 

 

---

 

템플릿 리터럴 : string을 +(연결연산자)를 사용하지 않고 간편하게!

let a = '사'
let b = '과'
let ab = '안녕하세요'+a+''+b+' 입니다'
console.log(ab)

//템플릿 리터럴
console.log(`안녕하세요 ${a}a${b} 입니다`)

마지막으로 템플릿 리터럴을 알아보자. 정말정말정말 많이 쓰이는 리터럴이니까 꼭 알아두기.

문자열을 연결할때 ''와 +를 번갈아 쓰지 않아도 $()로 선언하면 너무나 간단하게 쓸 수 있다.

단, ${}을 사용할때는 ''이 아닌 백틱(``)을 사용해야 활성화된다. 잊지말자.