Hongik University
Mechanical System
Design Engineering,
Computer Engineering

Updated:

truthy&falsy

　자바스크립트는 불리언 자료형의 참(true)이나 거짓(false)이 아닌 값도 상황에 따라 참, 거짓으로 평가하는 특징이 있다. 이런 특징을 ‘truthy & falsy’라고 한다.

truthy&falsy한 값

　자바스크립트에서 어떤 값을 ‘거짓’으로 판별하고(falsy), 참으로 평가하는지(truthy) 살펴본다.
　falsy한 값이란 불리언 자료형의 거짓(false)은 아니지만 거짓과 같은 의미로 쓰이며, 조건식에서 거짓(false)으로 평가한다. falsy한 값으로는 undefined, null, 0, -0, NaN, “”, 0n, 7가지가 있다.
　truthy한 값은 불리언 자료형의 참(true)은 아니지만 참과 같은 의미로 쓰이며, 조건식에서 참(true)으로 평가한다. falsy한 값을 제외하면 모든 값은 truthy한 값이다.

truthy&falsy 응용하기

　truthy 또는 falsy한 값은 조건식을 간결하게 만든다.
　’값이 비었다’는 의미는 특정 변수의 값이 undefinde나 null일 때 쓰이는 표현이다. undefined나 null 값 모두 falsy하기 때문에 조건문에서 특정 변수에 값이 있는지 없는지 확인할 때 사용한다.

let varA;

if (varA) {
  console.log("값이 있음");
} else {
  console.log("값이 없음"); // 값이 없음
}

　변수 varA는 선언만 하고 값을 할당하지 않았으므로 undefined 값이다. 빈 문자열을 제외한 모든 문자열은 truthy한 값이다. 조건문에서 문자열이 공백인지 아닌지 확인하는 용도로 자주 사용한다.

const str = "";

if(str) {
  console.log("공백 아님");
} else {
  console.log("공백임");  // 공백임
}

단락 평가

　true||false와 같은 비교식은 첫 번째 피연산자의 값이 true이므로 두 번째 피연산자의 값이 무엇이든 연산 결과는 true이다. 또한 false && true와 같은 식은 첫 번째 피연산자의 값이 false이므로 두 번째 피연산자가 무엇이든 연산 결과는 false이다.
　이렇듯 논리 연산에서 첫 번째 피연산자의 값만으로 해당 식의 결과가 확실할 때, 두 번째 값은 평가하지 않는 것을 ‘단락 평가(Short-Circuit Evaluation)’라고 한다. 단락 평가에는 AND와 OR 논리 연산자의 특징을 이용하는 두 가지 방식이 있다.

AND 단락 평가

　AND를 의미하는 && 연산자는 피연산자의 값이 하나라도 거짓이면 거짓을 반환한다. 따라서 왼쪽에 위치한 첫 번째 피연산자 값이 false면, 단락 평가가 이루어지므로 두 번째 피연산자는 계산하지 않는다.

OR 단락 평가

　OR 연산을 의미하는 || 연산자는 피연산지의 값이 하나라도 참이면 참을 반환한다. 따라서 왼쪽에 위치한 첫 번째 피연산자의 값이 true면, 단락 평가가 이루어져 두 번째 피연산자 값은 계산하지 않는다.

객체 자료형 자세히 살펴보기

배열과 함수가 객체인 이유

　자바스크립트의 원시 자료형을 제외한 모든 자료형은 객체 자료형이다. 따라서 논리적으로 배열과 함수 역시 객체 자료형이다.
　배열은 인덱스로 연속적인 값을 저장하는 데 특화된 자료형이다. 자바스크립트의 배열은 객체 자료형에 몇 가지 기능을 추가헤 다른 언어의 배열처럼 동작하는 특수한 객체라고 할 수 있다.
　자바스크립트의 함수 또한 객체이다. 그리고 함수는 값으로 취급된다. 이러한 특징 떄문에 함수를 값으로 저장하는 함수 표현식이 가능하고, 다른 함수에 인수로 전달할 수 있다.

객체와 참조

　객체 자료형은 값의 크기가 유동적으로 변하기 때문에 자바스크립트는 참조(Reference)라는 기능을 이용한다. 참조란 실제로 값을 저장하는 것이 아니라 값을 저장한 곳의 주소만 저장하는 방식이다.

원시 자료형과 객체 자료형의 저장 방식 비교
　원시 자료형은 값을 변수에 저장할 때 값 그래로 저장한다. 반면 객체 자료형 즉, 참조 자료형은 값의 주솟값을 저장한다.

참조에 의한 비교
　객체를 비교할 때는 값이 아닌 참조값으로 비교한다. 이를 ‘참조에 의한 비교’라고 한다.

반복문 응용하기

배열과 반복문

　배열은 순서대로 데이터를 저장하는 특징이 있다. 배열과 반복문을 결합해 사용하는 방법에는 여러 형태가 있다.

인덱스를 이용한 순회
　배열에는 데이터의 저장 순서를 의미하는 인덱스가 있다. 인덱스를 0부터 1씩 증가하며 차례대로 데이터에 접근하면 배열의 모든 요소에 접근할 수 있다.

for…of 문을 이용한 순회
　for 문의 특수한 형태인 for…of 문은 배열을 더 간결하게 순회한다. for…of 문은 for 문과 달리 of 뒤의 배열에서 요소를 하나씩 순서대로 꺼내 변수에 저장한다.

객체와 반복문

　반복문을 이용해 객체에 저장된 프로퍼티를 순회하는 방법을 알아보자.

Object.keys를 이용한 순회
　객체 메서드인 Object.keys는 객체 프로퍼티의 key를 배열로 반환한다.

Object.values를 이용한 value 순회
　프로퍼티의 value만 배열로 반환하는 Object.value 메서드가 있다.

for…in 문을 이용한 순회
　배열을 순회할 때의 for…of 문처럼, 객체를 순환할 때는 for…in 문을 사용한다. for…in 문으로 객체를 순회하면, for 문과 Object.keys 메거드보다 더 간결한 코드를 작성할 수 있다.

구조 분해 할당

　구조 분해 할당(Destructuring Assignment)은 말뜻 그대로 구조를 분해해 할당하는 문법이다. 배열이나 객체에서 요소를 해체해 개별 변수에 그 값을 담을 때 사용한다.

  • 배열의 구조 분해 할당
  • 객체의 구조 분해 할달
  • 함수의 매개변수가 객체일 때 구조 분해 할당하기

스프레드 연산자와 rest 매개변수

스프레드 연산자

　스프레드(Spread) 연산자는 ‘…‘기호로 표기하는데, 전개 연산자라고도 부른다. 스프레드 연산자를 이용하면 배열, 문자열, 객체 등과 같이 반복이 가능한 객체의 값을 개별 요소로 분리할 수 있다.

rest 매개변수

　rest 매개변수는 나머지 매개변수라고 하며, 스프레드 연산자처럼 기호 ‘…‘으로 표기한다. 스프레드 연산자는 배열이나 객체처럼 반복 가능한 값을 개별 요소로 분리하지만, rest 매개변수는 반대로 개별 요소를 배열로 묶는다.

배열과 메서드

　자바스크립트는 배열을 쉽게 다룰 수 있도록 여러 매서드를 제공한다. 이런 메서드를 ‘배열 메서드’라고 한다.

Date 객체와 날짜

　자바스크립트에는 시간을 표현하는 Date 객체가 있다. Date는 배열이나 함수처럼 특수한 목적을 수행하기 위해 기능이 추가된 객체이다. Date 객체는 날짜와 시간을 저장하며 이와 관련한 유용한 메서드도 함께 제공한다.
　Date 객체를 활용하면 특정 게시물의 생성 시간을 저장하거나 오늘의 날짜를 출력하거나 타이머를 만드는 등 시간과 관련된 기능을 쉽게 구현할 수 있다.

비동기 처리

　비동기 처리를 이용하면 오래 걸리는 작업이 종료될 때까지 기다리지 않고 다음 작업을 수행하는 등 유연한 프로그래밍이 가능하다.

동기와 비동기

　순차적으로 코드를 실행하는 것을 동기(Synchronous)라고 한다. 동기는 앞의 작업을 완료해야 다음 작업을 실행할 수 있다. 자바스크립트는 기본적으로 동기적으로 동작한다.
　특정 작업을 다른 작업과 관계없이 독립적으로 동작하게 만드는 것을 비동기(Asynchronous)라고 한다.

콜백 함수로 비동기 처리하기

　콜백 함수를 이용하면 비동기 작업의 결괏값을 사용할 수 있다.

프로미스 객체를 이용해 비동기 처리하기

　프로미스(Promise)는 비동기 처리를 목적으로 제공되는 자바스크립트 내장 객체이다. 프로미스는 Date 객체처럼 특수한 목적을 위해 다양한 기능을 추가한 객체이다. 프로미스를 이용하면 콜백 함수를 이용한 비동기 처리보다 더 쉽게 비동기 작업을 수행할 수 있다.
　프로미스는 비동기 작업을 진행 단계에 따라 3가지 상태로 나누어 관리한다.

  • 대기(Pending) 상태: 작업을 아직 완료하지 않음
  • 성공(Fulfilled) 상태: 작업을 성공적으로 완료함
  • 실패(Rejected) 상태: 작업이 모종의 이유로 실패함

　프로미스 객체는 다음과 같이 만든다.

const promise = new Promise(실행함수);

　프로미스 객체를 만들 때 인수로 실행 함수(Executor)를 전달한다. 실행 함수란 비동기 작업을 수행하는 함수이다. 이 함수는 프로미스 객체를 생성함과 동시에 실행되면 2개의 매개변수를 제공받는다.
　실행 함수가 제공받는 2개의 매개변수는 다음과 같다.

  • resolve: 비동기 작업의 상태를 성공으로 바꾸는 함수
  • reject: 비동기 작업의 상태를 실패로 바꾸는 함수

댓글남기기

참고