[JS] ES 6+ 문법을 정리해보아요.

목차

1. let과 const 
2. Ternary Operator (삼항 연산자)
3. nullish coalescing 연산자 + Logical OR 연산자 ( nullish, falsy )
   
4. Template Literals (템플릿 리터럴)
   
5. Symbol(심볼)

• Spread Operator, Destructuring assignment ( 타 게시글 )
• 참고 자료

 

---

1. let과 const

ES6 이후 최신 자바스크립트 에서는 변수 선언을 위한 예약어로 let과 const를 사용하며 var 예약어는 사용하지 않도록 권장되고 있다.

이때, const는 선언 시, 값을 반드시 할당하여 초기화를 해줘야한다. ( 선언만 하고 할당하지 않을 시, syntax 에러 발생)

(추가적으로 변수를 선언할 때 초기 값을 할당하는 것이 좋은 프로그래밍 습관!!)

 

var와 let, const와 가장 큰 차이점은 스코프의 범위이다.

var는 함수 영역의 스코프를 가지며, let과 const는 블록 영역의 스코프를 가진다.

 

블록 스코프는 let 과 const가 선언 된 블록 안에서만 해당 변수와 상수가 유효하다는 뜻이다.

물론 최상위 레벨에 속해 있을 경우, 해당 파일의 전역 스코프를 가지지만,

if, while, for문 등의 바디에 선언하면, 해당 바디 내 블록 영역에서만 let, const가 유효하다. 

	스코프	선언	재할당	재선언	비고
var	함수 영역	가능	가능	가능	호이스팅 발생, 사용 지양
let	블록 영역	가능	가능	불가능	값이 바뀌는 변수
const	블록 영역	가능, 할당	불가능	불가능	변하지 않는 상수 변수, 선언 시 할당 필수

Var 예약어와 호이스팅에 대한 참고 글 : https://icea.tistory.com/29

[JavaScript] Var 예약어 - 호이스팅과 재선언 및 재할당

 

 

추가적으로 var에서 발생하는 문제 중 하나인 호이스팅은 let과 const에서는 발생하지 않는다.

var

testHoisting1 = () => {
  var a = 10;
  console.log(`var a : ${a}`);
  console.log(`선언 b : ${b}`);
  var b = 20;
};
testHoisting1()

var의 경우, 선언하지 않고 출력했을 때, 정상적으로 출력되고 undefined로 지정.

let

testHoisting2 = () => {
  let a = 10;
  console.log(`let a : ${a}`);
  console.log(`선언 b : ${b}`);
  let b = 20;
};
testHoisting2()

 

let의 경우, 선언하지 않고 출력했을 때, ReferenceError발생

const

testHoisting3 = () => {
  const a = 10;
  console.log(`const a : ${a}`);
  console.log(`선언 b : ${b}`);
  const b = 30;			// 에디터에서는 빨간 줄 뜸.
};
testHoisting3()

let과 마찬가지로 const의 경우, 선언하지 않고 출력했을 때, ReferenceError발생

 

위처럼 초기화 전에 사용하는 var, let, const 를 참고하여

var에서는 undefined로 에러가 발생하지 않지만,

let과 const에서는 참조에러를 발생시켜준다.

---

 

2. Ternary Operator (삼항 연산자) 

 

const test = 5;

if (test === 2) {
  console.log("2입니다.");
} else {
  console.log("2가 아닙니다.");
}
// [출력]
// 2가 아닙니다.

test가 2라면, "2입니다." 반환 , 2가 아니라면, "2가 아닙니다." 반환 하는 로직에 있어

하나의 조건에 대해 참/거짓을 판단할 경우에는 위와 같이 삼항 연산자를 사용할 수 있다.

 

삼항 연산자는 조건 ? A : B  을 통해 해당 조건이 참이라면, A를 실행하고, 거짓이라면 B를 실행한다.

const test = 5;
const result = test === 2 ? "2입니다." : "2가 아닙니다.";
console.log(result);

// [출력]
// 2가 아닙니다.

 

위 코드 예제에서는

조건 : test === 2 

A : "2입니다."

B : "2가 아닙니다." 이며, 

조건이 거짓이기 때문에 B가 실행되어 2가 아닙니다. 라는 문자열이 출력되는 것을 확인할 수 있다.

 

 

---

 

3. nullish coalescing 연산자, Logical OR 연산자 ( nullish, falsy ) 

nullish 값 :  null, undefined
falsy 값  : 0, -0, '', false, NaN, null, undefined 

nullish coalescing operator (??) 는 nullish 만 판단 -> 0 , 빈문자열 등은 true로 반환한다.
Logical or 연산자(|| 연산자)는 falsy 값 들을 false로 판단한다.

 

nullish coalescing 연산자

const msgOfNull = null;
const msgOfUndefined = undefined;
const msgOfEmptyString = "";
const msgOfZero = 0;

console.log("\n", "nullish coalescing 연산자 ");
console.log(" - null :", msgOfNull ?? "nullish");
console.log(" - Undefined : ", msgOfUndefined ?? "nullish");
console.log(" - EmptyString : ", msgOfEmptyString ?? "nullish");
console.log(" - Zero : ", msgOfZero ?? "nullish");
console.log(" - String : ", "문자열" ?? "nullish");

// [출력]
// nullish coalescing 연산자 
//  - null : nullish
//  - Undefined :  nullish
//  - EmptyString :  
// - Zero :  0
// - String :  문자열

nullish 값

nullish coalescing 연산자 (??) 는 연산자 기준으로 왼쪽의 값이 null , undefined 일 때만 ?? 연산자 오른쪽 코드가 실행된다.

 

const msgOfNull = null;
const msgOfUndefined = undefined;
const msgOfEmptyString = "";
const msgOfZero = 0;

console.log("\n", "Logical OR 연산자 ");
console.log(" - null :", msgOfNull || "falsy");
console.log(" - Undefined : ", msgOfUndefined || "falsy");
console.log(" - EmptyString : ", msgOfEmptyString || "falsy");
console.log(" - Zero : ", msgOfZero || "falsy");
console.log(" - String : ", "문자열" || "falsy");

// [출력]
// Logical OR 연산자 
//  - null : falsy
// - Undefined :  falsy
// - EmptyString :  falsy
// - Zero :  falsy
// - String :  문자열

falsy 값

이와 다르게 Logical OR 연산자 (||)는 연산자 기준으로 왼쪽의 값이 null , undefined를 포함하여 빈 문자열, 0 등 falsy한 값일 때 || 오른쪽 코드가 실행된다.

 

nullish한 값들이 falsy한 값들에 속한다 (subset개념)

 

 

---

 

4. Template Literals (템플릿 리터럴) 

const msgHi = "안녕하세요.";
const msgBye = "안녕히가세요.";

console.log("문자열 조합");
console.log("만날 때는 " + msgHi + " 헤어질 때는 " + msgBye);

console.log("템플릿 리터럴");
console.log(`만날 때는 ${msgHi} 헤어질 때는 ${msgBye}`);

// [출력]
// 문자열 조합
// 만날 때는 안녕하세요. 헤어질 때는 안녕히가세요.
// 템플릿 리터럴
// 만날 때는 안녕하세요. 헤어질 때는 안녕히가세요.

문자열 조합으로 문자열과 변수를 합칠 때는, 띄어쓰기 등 어색하게 고려할 점이 많지만,
템플릿 리터럴 사용 시, 하나의 문장 안에 변수를 ${} 를 통해 삽입할 수 있다.
개발의 편의성 뿐만 아니라 가독성도 높아진다.

 

 

---

 

5. Symbol (심볼)

- 심볼은 문자열이 아닌 프로퍼티 이름으로 ES6에 추가 됐다.

- 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다.

 

let abcd = "문자열 ABCD";
let symAbcd = Symbol("심볼 ABCD");

console.log(typeof abcd);
console.log(typeof symAbcd);

// -----
//[출력]
// string
// symbol

string 타입 / symbol 타입

let abcd = "문자열 ABCD";
let symAbcd = Symbol("심볼 ABCD");

let testObj = {};
testObj[abcd] = "abcd_string";
testObj[symAbcd] = "abcd_symbol";
console.log(testObj);

//[출력]
//{
//	문자열 ABCD: 'abcd_string',
//	Symbol(심볼 ABCD): 'abcd_symbol'
// }

문자열 값을 가진 abcd 변수를 객체 프로퍼티로 지정한 값과 다르게심볼 값을 가진 symAbcd 변수를 객체 프로퍼티에 저장하면, 프로퍼티 이름이 Symbol(값) 으로 추가 된다.

 

testObj["문자열 ABCD"] = "change!";
testObj["심볼 ABCD"] = "change!";
console.log(testObj);

//[출력]
//{
//	문자열 ABCD: 'change!',
// 	심볼 ABCD: 'change!',
//	Symbol(심볼 ABCD): 'abcd_symbol'
//}

위처럼 일반적으로 객체 값을 변경했을 때, 문자열 ABCD는 값이 변경 되었지만,심볼 ABCD는 symbol() 함수에 담긴 프로퍼티와 별개로 저장이 된다.

 

 

- Symbol()을 호출해 심볼 값을 얻었다면, 객체의 기존 프로퍼티를 같은 이름을 덮어 쓸 염려 없이 그 값을 프로퍼티 이름으로 추가할 수 있다.

- 심볼 프로퍼티 이름을 사용하고 그 심볼을 공유하지 않는다면, 프로그램의 다른 모듈에서 실수로 해당 프로퍼티를 덮어 쓸 일이 없다. ( 유일한 프로퍼티 값이 된다.)

- 심볼 값을 가져올 때는 Symbol() 함수를 호출하며, 절대 같은 값을 반환하지 않는다.

- Symbol()함수는 인자로 문자열을 받고, 고유한 심벌 값을 반환한다.

  다시 말해서, 같은 인자로 호출하더라도 Symbol() 함수는 다른 값을 반환한다.

 

let symAbcd = Symbol("심볼 ABCD");
let symAbcd2 = Symbol("심볼 ABCD");

console.log(symAbcd);
console.log(symAbcd2);
console.log(symAbcd === symAbcd2);

//[출력]
// Symbol(심볼 ABCD)  
// Symbol(심볼 ABCD)
// false

 

 

- 문자열 인자를 전달하면, 그 문자열은 심벌의 toString() 메서드 결과에 포함된다.- 하지만 같은 문자열을 전달해 Symbol()을 다시 호출하더라도 그 결과는 완전히 다른 값이 된다.

 

let symAbcd = Symbol("심볼 ABCD");
let symAbcd2 = Symbol("심볼 ABCD");

console.log(symAbcd.toString());
console.log(symAbcd2.toString());
console.log(symAbcd.toString() === symAbcd2.toString());

//[출력]
// Symbol(심볼 ABCD)  
// Symbol(심볼 ABCD)
// true

참고적으로, 이때 toStirng() 메서드를 사용해서 심벌 값을 문자열로 반환할 수 있다.

 

 

---

 

- Spread Operator, Destructuring assignment ( 타 게시글 )

객체 사용을 기반으로 전개연산자 및 구조 분해 할당 사용방법에 대해 글을 작성했습니다.해당 글의 5번 ★ 객체 복사 (참조 끊기) 및 분해 ★ (feat. Spread Operator,  Destructuring assignment)을 참고해주세요.

 

https://icea.tistory.com/42

[JS] 데이터를 다루는 객체 사용 방법 (feat. 전개연산자 (ES6), Trouble Shooting)

 

 

---

 

- 참고

-  [서적] 자바스크립트 완벽가이드 - 데이비드 플래너건

-  [영상] 드림코딩 : https://www.youtube.com/@dream-coding

-  [Site] 포이마 웹 : https://poiemaweb.com/