JavaScript 모던한 코딩

2023-09-18

문제점 😅

모던 JavaScript 튜토리얼를 읽어보고 몇가지 알아둬야 할 자바스크립트 코딩 방법을 정리해본다.

해결책 😏

잘모르거나 헷갈리던 부분 정리해본다.

문자열 따옴표 방식

문자열 따옴표 방식에는 3가지가 있다.

큰 따옴표: “My Home”
작은 따옴표: ‘My Home’
역 따옴표¹: ｀My Home｀

자바스크립트에서는 큰 따옴표와 작은 따옴표는 차이가 없지만, 역 따옴표는 ${value}를 사용하여 변수나 표현식을 문자열 중간에 넣어 손쉽게 사용 가능하다.

// test 1: 변수
let today = "9월 18일";

console.log("오늘은 "+today+" 입니다."); // 오늘은 9월 18일 입니다.
console.log(`오늘은 ${today} 입니다.`); // 오늘은 9월 18일 입니다.

// test 2: 표현식
let num1 = 10;
let num2 = 20;

console.log(num1+" + "+num2+" = "+(num1 + num2)); // 10 + 20 = 30
console.log(`${num1} + ${num2} = ${num1 + num2}`); // 10 + 20 = 30

Boolean 조건식의 문자열

자바스크립트에서 조건식의 문자열은 비어있지 않다면 언제나 true다. 조건식 비교시 형변환은 필수다. 이것 때문에 예전에 개고생했다.

console.log(Boolean("0")); // true
console.log(Boolean("false")); // true
console.log(Boolean(" ")); // 공백이 있는 문자열도 비어있지 않은 문자열. 따라서 true
console.log(Boolean(1)); // true

console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(0)); // false

// 조건식 비교시 형변환 필수.
console.log(Boolean("100 < 1") ); // true
console.log(Boolean(Number('100') < Number('1'))); // false

연산자

거듭제곱은 **연산자를 사용하면 되겠다.

console.log(`2^2 = ${2 ** 2}`); // 2^2 = 4
console.log(`2^3 = ${2 ** 3}`); // 2^3 = 8

동등 연산자(==)가 아닌, 일치 연산자(===)를 사용하면 형 변환 없이 값을 비교할 수 있다. 일치 연산자는 자료형의 동등 여부까지 검사한다.

alert( 0 == false ); // true
alert( 0 === false ); // false, 피연산자의 형이 다르기 때문.

nullish 병합 연산자는 ??를 사용한다. a ?? b의 뜻은 다음과 같다.

a가 null도 아니고 undefined도 아니면 a
그 외의 경우는 b

let height = null;
let width = null;

let area = (height ?? 100) * (width ?? 50); // 괄호를 추가!

alert(area); // 5000

// ??'와 '||'의 차이
let height = 0;

alert(height || 100); // 조건식에서 0은 false이므로 true인 100
alert(height ?? 100); // 값을 생성(할당)했으므로 0

화살표 함수

함수 표현식과 함수 선언문을 보면 다음과 같다.

// 함수 선언문: 스크립트 어디에 있느냐에 상관없이 어디에서든 사용 가능.
function sum(a, b) {
  return a + b;
}

// 함수 표현식: 실행 흐름이 함수에 도달했을 때부터 사용 가능.
let sum = function(a, b) {
  return a + b;
};

함수 표현식은 다음과 같이 화살표 함수로 좀 더 쉽게 작성이 가능하다.

// 함수 표현식: 실행 흐름이 함수에 도달했을 때부터 사용 가능.
let sum = function(a, b) {
  return a + b;
};

let sum = (a, b) => a + b; // 상기 함수 표현식과 동일.
console.log(sum(1, 2)); // 3

본문이 여러줄인 경우 다음과 같이 중괄호를 사용하여 작성한다.

let sum = (a, b) => {
  let result = a + b;
  return result ; // 중괄호 사용 시, return 사용하여 결과 반환.
}

console.log(sum(1, 2)); // 3

마무리 😎

화살표 함수 표현식은 눈에 익지 않아서 직관적으로 보이지 않는다. 익숙해지도록 자주 사용하자.

참고문헌 📝

https://ko.javascript.info/first-steps

백틱(backtick)이라고도 하며, 키보드의 물결표시(~)와 함께있는 `를 의미한다. ↩