javascript 특징

Truthy와 Falsy

Falsy과 Truthy은 true, false가 아닌데 조건문에서 true, false로 평가되는 값들을 의미합니다.

// Falsy과 Truthy은 true, false가 아닌데 조건문에서 true, false로 평가되는 값들
// Falsy들 값
let f1 = undefined;
let f2 = null;
let f3 = 0;
let f4 = -0;
let f5 = NaN;
let f6 = "";
let f7 = 0n; // n은 BigInteger의 값을 의미

// Truthy들 값
// 위에 7가지 Falsy 한 값들 제외한 나머지 모든 값
let t1 = "hello";
let t2 = 123;
let t3 = []; // 배열
let t4 = {}; // 객체
let t5 = () => {}; // 화살표 함수

// 활용 사례
function printName(person) {
  if (!person) {
    console.log("person의 값이 없음");
    return;
  }
  console.log(person.name);
}

let person = { name: "peel" };
printName(person);

 

 

단락 평가

JavaScript에서는 연산식의 결과가 이미 확정된 경우 불필요한 나머지 연산을 실행하지 않는 최적화 기법을 사용합니다. 이를 단락 평가(Short-circuit Evaluation)라고 부릅니다. 이러한 기법은 주로 논리 연산자 && (AND)와 || (OR)에서 활용되는데 이때 true나 false 값뿐만 아니라 자바스크립트 특징인 Falsy 값과 Truthy도 true나 fasle처럼 작동합니다.

 

A && B (AND) 연산자

• false && ??이라면 첫 번째 피연산자가 false이므로 전체 결과는 무조건 false가 됩니다. 이 경우 뒷부분은 평가되지 않습니다.

C || D (OR) 연산자

• OR 연산자도 마찬가지로 초기의 연산 결과가 확정되었다면 나머지 연산은 실행되지 않습니다.

function returnFalse() {
  console.log("false 함수");
  return false;
}

function returnTrue() {
  console.log("true 함수");
  return true;
}

console.log(returnFalse() && returnTrue());
console.log(returnTrue() || returnFalse());

function returnFalsy() {
  console.log("falsy 실행");
  return 0;
}

function returnTruthy() {
  console.log("truthy 실행");
  return 10;
}

console.log(returnTruthy() || returnFalsy);

// 활용
function printName(person) {
  const name = person && person.name;
  console.log(name || "person의 값이 없음"); // (persion && persion.name) || "persion의 값이 없음"
}

printName();
printName({ name: "peel" });

 

 

구조분해할당

• 배열의 구조 분해 할당: 인덱스를 하나씩 지정하는게 아니라 배열을 통해 순서대로 변수에 지정 가능
• 객체의 구조 분해 할당: 객체 프로퍼티(속성)의 변수를 직접 지정하는게 아니라 프로퍼티 이름이 매칭의 기준이 됩니다.
• 함수의 구조 분해 할당: 함수의 매개변수를 배열, 객체 구조 분해 할당을 이용해서 사용할 수 있습니다.

// 배열의 구조 분해 할당
let arr = [1, 2, 3, 4];
let num1 = arr[0];
let num2 = arr[1];
let num3 = arr[2];
let num4 = arr[3];

let [one, two, three, four] = arr; // 인덱스를 하나씩 지정하는게 아니라 배열을 통해 순서대로 변수에 지정 가능
let [one, two, three] = arr;
let [one, two, three, four, five] = arr;
let [one, two, three, four, five = 5] = arr;

// 객체의 구조 분해 할당
let person = {
  name: "peelJun",
  age: 22,
  weight: 50,
};

let name = person.name;
let age = person.age;

let {
  name: myAge, // 변수 이름 변경
  age,
  weight,
  hobby, // 변수 추가
} = person;

// 객체 구조 분해 할당을 이용해서 함수의 매개변수 받는 방법
const func = ({ name, age, weight, puls }) => {
  console.log(name, age, weight, puls);
};

func(person);