[Javascript] 알면 유용한 자바스크립트(템플릿 리터럴, NULL 병합 할당 연산자, optional chaining)

1. 템플릿 리터럴(Template literals)

ES6버전부터 도입된 템플릿 문자열

 

ES6이전에는 줄바꿈을 이용할 때는  \n같은 줄바꿈을 넣어줘야했고,  여러 변수들을 연결할 때는 +를 통해서 하나하나 연결해줘야 했다.

 

템플릿 리터럴을 사용하지 않은 예시

let tag	= "";

tag += "<NavDropdown title="Dropdown" id="nav-dropdown">"
 tag += "<NavDropdown.Item eventKey="4.1">home</NavDropdown.Item>"
 tag += "<NavDropdown.Item eventKey="4.2">cart</NavDropdown.Item>"
tag += "</NavDropdown>"

let name="사과";
let text = "안녕하세요\n "+name+"입니다.";
/*
안녕하세요
사과입니다.
*/

 

템플릿 리터럴을 사용한 예시

백틱(`)문자를 사용

let tag = `
<NavDropdown title="Dropdown" id="nav-dropdown">
    <NavDropdown.Item eventKey="4.1">home</NavDropdown.Item>
    <NavDropdown.Item eventKey="4.2">cart</NavDropdown.Item>
  </NavDropdown>
`;

let name="사과"
let text = `
안녕하세요
${name}입니다.
`
/*
안녕하세요
사과입니다.
*/

 

 

2. NULL 병합 할당 연산자(Nullish coalescing operator)

값이 없다면 짧은 문법을 통해서 확정되어 있는 변수를 설정 할 수 있게 합니다.

NULL 혹은 undefined 인경우 오른쪽 값을 반환하는 연산자입니다.

 

null 병합 할당 연산자 사용하지 않을 때

let num = {min : 100};
//max 선언하지 않음.

if(num.min === null || num.min === undefined)
    num.min = 20;

if(num.max === null || num.max === undefined)
    num.max = 20;

console.log(num);
/*{min: 100, max: 200}*/

null 병합 할당 연산자 사용할 때

let num = {min : 100};
//max 선언하지 않음.
num.min ??= 20;
num.max ??= 200;
console.log(num);
/*{min: 100, max: 200}*/

응용법

/* DB에 없는 데이터를 가져와서 <?=$data?>값이 존재하지 않을때*/
let data = '<?=$data?>';
console.log(data ?? '데이터 없음');

 

 

 

3. optional chaining

optional chaining의 ?.는 왼쪽이 null 혹은 undefined인 경우 그 이후로 넘어가지 않고 undefined를 남깁니다.

이걸 사용하는 이유는 자바스크립트에서 error가 발생하면 error가 발생하는 코드 이후로는 실행이 중단됩니다.

 

let product = {
    product_code : 'AAAA1',
    price		 : 10000,
    //add	:	{add1 : 'A-1'}
};

console.log(product.add.add1);

그럼 실제 서비스를 하는 사이트라면 문제가 생길 수 있기 때문에 이를 방지하고자 optional chaining을 사용합니다.

하지만 너무 많은 곳에서 사용한다면 에러를 찾기 어렵다는 단점이 있기때문에 꼭 필요한 경우에만 사용할 것을 권장합니다. 에러를 해결하는 것이 아닌 단순하게 숨기는 역할을 함.

let product = {
    product_code : 'AAAA1',
    price		 : 10000,
    //add	:	{add1 : 'A-1'}
};

console.log(product.add?.add1);
// undefined 출력

 

HTML 조작을 할 경우에도 사용할 수 있습니다.

console.log(document.querySelector("#test")?.value);
/*test id를 가진 엘리먼트가 존재하지 않을때 optional chaining을 사용하면 에러가 나타나지 않음 */