리액트 스터디 : JavaScript 응용 - 1 (Truthy & Falsy, 삼항 연산자, 단락회로 평가, 조건문 업그레이드, 비 구조화 할당, Spread 연산자)

Truthy & Falsy

Truthy : 참 같은 값

Falsy : 거짓 같은 값

let a = "";

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE");
}

// FALSE

let a = "string";

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE);
}

// TRUE

let a = [];

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE);
}

// TRUE

let  a = undefined;

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE);
}

// FALSE

let a = {};

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE);
}

// TRUE

let a = 42;

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE);
}

// TRUE

let a = "false";

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE);
}

// TRUE

let a = Infinity;

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE);
}

// TRUE

True가 아니어도 참으로 평가하는 값을 Truthy라고 한다.
False가 아니어도 거짓으로 평가하는 값을 Falsy라고 한다.

let a = null;

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE);
}

// FALSE

let a;

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE);
}

// FALSE

let a = 0;

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE);
}

// FALSE

let a = NaN;

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE);
}

// FALSE

let a = "";

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE);
}

// FALSE

TypeError : Cannot read properties of undefined (reading 'name')

null과 undefined는 조건식에서 false로 판단되는 falsy한 성격을 갖고 있다.null을 넣든 undefined를 넣든 falsy가 되어 true가 된다는 것이다.

const getName = (person) => {
  if (!person) {
    // false NOT => true
    return "객체가 아닙니다.";
  }
};

let person;
const name = getName(person);
console.log(name);

삼항 연산자

let a = 3;

if (a >= 0){
  console.log("양수");
} else {
  console.log("음수");
}

let a = 3;

a >= 0 ? console.log("양수") : console.log("음수");

조건식 ? 참일 때 수행할 식 : 거짓일 때 수행할 식;

let a = [];

if (a.length === 0){
  console.log("빈 배열");
} else {
  console.log("안 빈 배열");
}

let a = [];

a.length === 0 ? console.log("빈 배열") : console.log("안 빈 배열");

let a = [1, 23];

const arrayStatus = a.length === 0 ? "빈 배열" : "안 빈 배열";
console.log(arrayStatus);

let a;

const result = a ? true : false;
console.log(result);

// false

let a = [];

const result = a ? true : false;
console.log(result);

// true

let score = 100;

score >= 90
  ? console.log("A+")
  : score >= 50
  ? console.log("B+")
  : console.log("F");

if (score >= 90) {
  console.log("A+");
} else if (score >= 50) {
  console.log("B+");
} else {
  console.log("F");
}

단락회로 평가

console.log(true && true);

console.log(true || false);

console.log(!true);

단락회로 평가 : 왼쪽에서 오른쪽으로 연산하게 되는 연산자의 순서를 이용하는 문법이다.

console.log(false && true);

&& 연산자는 둘 다 true 값을 가져야 하는데 첫 번째 연산자가 false 값을 갖기 때문에 다음 피연산자의 값을 확인할 필요가 없다.

피연산자 중 뒤에 위치한 피연산자를 볼 필요 없이 그냥 연산을 끝내는 것을 단락 회로 평가라고 한다.

console.log(true || false);

|| 연산자의 경우 값이 true가 되는 경우 뒤의 피연산자는 확인할 필요가 없다.

이렇게 보면 값이 참인지 거짓인지를 빨리 평가하는 기능이라고만 생각할 수 있는데, 지금까지는 논리 연산자의 피연산자가 true 또는 false였다. 그런데 여기에서 truthy나 falsy를 사용하면 단락회로 평가를 조금 더 멋있게 활용할 수 있다.

const getName = (person) {
  if (!person) {
    return "객체가 아닙니다.";
  }
  return person.name;
}

let person;
const name = getName(person);
console.log(name);

단락회로 평가를 통해서 훨씬 더 단축할 수 있다.

const getName = (person) => {
  return person && person.name;
};

let person;
const name = getName(person);
console.log(name);

// undefined

&& 논리 연산자의 피연산자로 true나 false를 준 것이 아니라 truthy, falsy를 줬다. person이라는 parameter는 undefined한 값을 받기 때문에, && 연산에서 앞의 피연산자가 false가 되기 때문에, 뒤에 있는 값을 고려할 필요가 없다. 그렇기 때문에 뒤에 있는 피연산자 person.name에는 아예 접근하지 않고, 첫 번째 값이 falsy하다면 그 값을 바로 리턴한다. 이렇게 단락회로 평가를 응용해서 사용할 수 있다. 그런데 이렇게 되면 person 자체가 반환되기 때문에 출력이 undefined로 되고, person이 null이었다면 null로 출력되나. falsy인 값이 반환될 때 "객체가 아닙니다."라는 값을 반환할 수 있도록 해보겠다.

name이 빈 문자열이 아니기 때문에 truthy하고, 따라서 다음 피연산자를 확인할 필요가 없다. 따라서 name 값을 반환한다.

조건문 업그레이드

매개변수로 key를 전달하면 key에 해당하는 value 값을 받아오게 된다.

비구조화 할당

비구조화 할당 : 구조 분해 할당

이렇게 대괄호를 이용해서 배열의 값을 순서대로 할당받아 사용할 수 있는 방법을 배열의 비구조화 할당이라고 표현한다. 더 디테일하게 이야기하면, 배열의 기본 변수 비구조화 할당이라고 할 수 있다.

이런 방법을 배열의 선언 자체에서 분리한다고 하여 배열의 선언 분리 비구조화 할당이라고 부른다. 명칭까지 외울 필요는 없지만, 이런 식으로 배열을 비구조화하여 할당할 수 있는 여러 가지 방법이 있다고 알아두면 되겠다.

배열의 비구조화 할당은 이렇게 순서대로 배열의 요소를 쉽게 할당할 수 있는 방법이다.

마지막 four라는 변수는 할당되지 못하기 때문에 undefined라는 값을 가지게 된다. 그런데 변수에 이렇게 undefined라는 값이 할당되면 안 되는 상황이 존재할 수 있다. 이럴 때에는 기본 값을 설정해줄 수 있는데, 기본 값을 설정하면, 할당받지 못하는 경우에 기본 값을 지정해줄 수가 있다.

배열의 비구조화 할당을 이용하면, 두 개 변수의 값을 서로 바꾸는 swap이라는 것에도 활용할 수 있다.

오른쪽에 배열 하나를 만들었다. b와 a를 가진 배열은 만들었다. b가 앞에 왔고 a가 뒤에 왔다. 이 배열을 비구조화 할당으로 a와 b를 0번 인덱스, 1번 인덱스에 할당하는 것이다. a에는 0번 인덱스인 b의 값이 할당되고, b에는 1번 인덱스인 a의 값이 할당되어 결론적으로는 swap이 일어난 것을 확인할 수 있겠다.

객체의 비구조화 할당

object의 key 값을 기준으로, one이라는 키를 갖는 값을 one이라는 변수에 저장하고, two라는 키를 갖는 property의 값을 two에 저장하고, three라는 키를 갖는 peroperty의 value의 값을 three에 저장해서, 잘 출력하는 것을 볼 수 있다.

객체의 비구조화 할당은 이렇게 배열의 인덱스를 이용하는 것이 아니라, 키 값을 기준으로 할당한다.

순서가 아니라 key 값을 기준으로 비구조화 할당이 이루어지기 때문에, 순서가 달라져도 상관없다.

객체의 비구조화 할당에서는 객체의 property의 key 값을 통해 접근해야 하기 때문에, 변수명이 key 값으로 강제되는 부분이 있었다. 이것을 극복할 수 있는 방법이 존재한다.

name이라는 key 값을 기준으로 value를 myName이라는 변수로 할당해주겠다고 봐주면 되겠다.

객체 비구조화 할당 또한 배열처럼 기본 값을 설정할 수 있다.

Spread 연산자

... : 스프레드 연산자 : 펼치는 연산자 : 객체의 값을 새로운 객체에 펼쳐주는 역할을 하는 연산자이다.

스프레드 연산자는 객체의 property를 펼치는 것 말고도 배열도 사용할 수도 있다.

스프레드 연산자를 사용하면 객체의 property를 펼치는 것처럼 배열의 원소를 순서대로 펼칠 수 있다.

concat과 다르게 중간에 값을 유연하게 넣을 수 있기 때문에 유용하게 활용될 수 있다.

 

해당 게시글은 인프런 - <한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지> 강의 내용을 기반으로 작성되었음을 알립니다.