방방이네 블로그

자바스크립트의 Truthy와 Falsy 완벽 정리!

안녕하세요, 자바스크립트 공부 중인 여러분! 오늘은 자바스크립트에서 조건문이나 논리 연산에서 자주 등장하는 Truthy와 Falsy 개념을 쉽고 재미있게 알아보려고 합니다. “이게 참인가 거짓인가?“라는 질문에 대한 자바스크립트만의 독특한 사고방식을 이해하는 시간이 될 거예요. 😄

Truthy와 Falsy란 무엇인가요?

간단히 말해, Truthy는 자바스크립트에서 true처럼 동작하는 값이고, Falsy는 false처럼 동작하는 값입니다. 특히 조건문에서 값이 Truthy인지 Falsy인지에 따라 실행 흐름이 달라지기 때문에, 이를 제대로 이해하는 것은 필수입니다.

자바스크립트의 Falsy 값들 🛑

Falsy 값은 조건문에서 “거짓”으로 평가되는 값들입니다. 사실, 자바스크립트의 Falsy 값은 딱 7개뿐이에요.

• false

• 0 (숫자 0)

• -0 (음수 0)

• 0n (BigInt 0)

• "" (빈 문자열)

• null

• undefined

• NaN

이 값들은 조건문에서 자동으로 false처럼 동작합니다.

예제 코드:

if (!0) {

  console.log("Falsy: 숫자 0은 false로 평가됩니다!");

}

if (!"") {

  console.log("Falsy: 빈 문자열도 false입니다!");

}

자바스크립트의 Truthy 값들 ✅

Falsy가 아닌 나머지는 전부 Truthy 값입니다. 숫자든, 문자열이든, 배열이든, 심지어 비어 있는 배열([])이나 객체({})도 모두 Truthy로 평가됩니다.

• "hello" (문자열)

• 42 (0 이외의 숫자)

• Infinity, -Infinity

• [] (빈 배열)

• {} (빈 객체)

• function () {} (함수)

• true

예제 코드:

if ("Hello, world!") {

  console.log("Truthy: 문자열은 true로 평가됩니다!");

}

if ([]) {

  console.log("Truthy: 빈 배열도 true입니다!");

}

if ({}) {

  console.log("Truthy: 빈 객체 역시 true입니다!");

}

Truthy와 Falsy, 어디에 쓰이나요? 🔧

이제 실제로 어떻게 활용할 수 있는지 알아볼까요? 자바스크립트에서 Truthy와 Falsy를 알면 더 짧고 간결한 코드를 작성할 수 있습니다.

1) 기본값 설정 (논리 연산자 ||)

Falsy 값을 대신할 기본값을 설정할 때 유용합니다.

let userName = "";

let displayName = userName || "기본 사용자";

console.log(displayName); // 출력: "기본 사용자"

2) 조건부 실행 (논리 연산자 &&)

Truthy 값만 실행하고 싶을 때 사용합니다.

let user = { name: "Alice" };

user && console.log(user.name); // 출력: "Alice"

3) 삼항 연산자

조건에 따라 다른 값을 반환합니다.

let age = 0;

let status = age ? "성인" : "미성년자";

console.log(status); // 출력: "미성년자"

Truthy와 Falsy를 사용할 때 주의할 점 ⚠️

1. 빈 배열과 객체는 Truthy

자바스크립트에서는 비어 있어도 []와 {}는 Truthy로 평가됩니다. 이를 모르면 조건문에서 의도치 않은 결과를 얻을 수 있어요.

2. 문자열 “0”과 숫자 0의 차이

숫자 0은 Falsy지만, 문자열 "0"은 Truthy입니다.

if ("0") {

  console.log("Truthy: 문자열 '0'은 true입니다!");

}

if (0) {

  console.log("Falsy: 숫자 0은 false입니다!");

}

정리 📝

자바스크립트에서 Truthy와 Falsy는 언뜻 단순해 보이지만, 이 개념을 제대로 이해하면 조건문이나 논리 연산자를 훨씬 더 똑똑하게 활용할 수 있습니다.

• Falsy 값: false, 0, -0, 0n, "", null, undefined, NaN

• Truthy 값: Falsy가 아닌 모든 값!

• 활용 사례: 기본값 설정(||), 조건부 실행(&&), 삼항 연산자 등.

ECMAScript(ECMA Script)은 JavaScript의 표준화된 스펙을 의미합니다. 이는 프로그래밍 언어를 정의한 **ECMA 국제 표준(European Computer Manufacturers Association)**의 공식 이름으로, ECMA-262라는 기술 문서에 규격이 정의되어 있습니다. JavaScript와 ECMAScript는 밀접한 관계가 있지만, ECMAScript는 언어의 핵심 문법과 동작을 정의한 표준이고, JavaScript는 이를 기반으로 브라우저 등 다양한 환경에서 동작하도록 구현된 구체적인 언어입니다.

ECMAScript의 주요 특징

1. 표준화된 사양: 모든 구현체가 공통으로 따라야 하는 언어 규칙과 동작을 정의합니다.

2. 브라우저 간 호환성: 웹 브라우저에서 JavaScript가 일관되게 동작하도록 하는 데 중요한 역할을 합니다.

3. 확장성과 개선: ECMAScript는 버전별로 새로운 기능과 문법을 추가하며 언어를 발전시킵니다.

ECMAScript와 JavaScript의 관계

• ECMAScript는 언어의 핵심(문법, 데이터 타입, 연산자, 함수 등)을 정의한 표준입니다.

• JavaScript는 ECMAScript에 브라우저 환경에 특화된 추가 기능(DOM 조작, 이벤트 처리 등)을 더한 구현체입니다.

• JavaScript 외에도 ECMAScript를 기반으로 한 언어에는 TypeScript, ActionScript 등이 있습니다.

ECMAScript의 주요 버전

1. ES3 (1999): 초창기 표준으로 JavaScript의 기본 동작을 정의.

2. ES5 (2009): Strict 모드, JSON 지원 등 추가.

3. ES6 (2015): 가장 중요한 업데이트로, 클래스, 모듈, 화살표 함수, 템플릿 리터럴, let/const 추가.

4. ES7 (2016): 지수 연산자(**), Array.prototype.includes 추가.

5. ES8 (2017): Async/Await, Object.entries/Object.values.

6. ES9 (2018): Rest/Spread 연산자 개선.

7. ES10 (2019): Flat/flatMap, Optional Catch Binding.

8. ES2020 이후: Nullish Coalescing(??), Optional Chaining(?.), Top-level Await 등.

왜 중요한가?

ECMAScript는 웹 개발의 핵심 언어인 JavaScript의 뼈대를 이루고 있기 때문에, 웹 브라우저에서의 프로그래밍뿐만 아니라 Node.js, React, Vue 등의 최신 JavaScript 기반 기술에도 영향을 줍니다. 개발자들은 ECMAScript의 새 버전을 따라가면서 더 나은 문법과 기능을 활용해 코드를 작성할 수 있습니다.

typeof 연산자  Javascript 에서 typoof 연산자 뒤에 값에 값에 따라  여러유형의 데이터 타임을 반환
.  typeof 'His so isthings 문자열  T있다 do 》
numbers 숫자 저서와 티수가 집단  
typeof 10057 > 'number 승자 1
  type of 123) 》 'objects 객체 - 배열도 객체  
typeof frame: Sin' age:30} 3> 'object' 객체
typeof Unclefinted > undefined' undefined  
typecf null 》 'Object' 객체 - 넘은 것이다.  

함수를 정의하는 기본적인방법은

function funcName () {
	...
}

이렇게 작성한다

이것을 더간결하게 줄일수있으며

익명함수를 만들땐

function () {
   ...
}

이름을 생략할수있으며

화살표함수

()=>{
 ...
}

화살표 함수로 더욱더 줄일수도있습니다.

또한 화살표함수를 다룰때에는 구문을 단축 할 수도 있습니다.

1. 하나의 파라미터 일때에는 소괄호()가 생략됩니다

name => {
    console.log(name)
}

이렇게 파라미터가 하나일경우에는 소괄호를 생략할수있습니다

파라미터가 0개 거나 2개이상일경우에는 반드시 소괄호를 () 작성해줍니다

() =>{
     console.log("hello world")
}

(name,age) => {
		console.log(name , age)
}

2. 반환문 외에 어떠한 로직이없을경우 중괄호{}와 return 키워드를 생략할수있습니다

name => console.log(name)

number => number * 5

이런식으로 작성이 가능합니다.

3. 객체를 반환하는경우에는 반드시 소괄호로 감싸야합니다

함수를 만들때에는 자바스크립트에서 제공하는 객체를 만드는 방식의 중괄호{}만 사용할경우 객체로인식하는것이아닌 함수 본문 래퍼로 인식합니다 그렇기 때문에 반드시 객체를 소괄호()로 감싸야 이것이 객체라는것을 알려줄수있습니다

//잘못된방법
number => {age :number}

//올바른방법
number => ({age :number})

import는 불러오기

export는 내보내기입니다

자바스크립트코드를 만들때에는 실질적으로 하나의 파일에다가 모든 코드를 입력할순없으니 코드를 분리하여 관리하기 편하게하며 유지,보수에 장점을 추가할수도있습니다.

같은 폴더에 app.js utill.js 두개의 파일이 있다고 한다면

app.js

import { Hi } from './utill.js'

console.log(Hi)

utill.js

export let Hi = "Hello world"

이렇게 사용할수있습니다

또한 export default 라는 방법으로 내보내기가 가능한데

이것은 파일마다 단 하나의 defatult값을 적용할수있습니다.

utill.js

export default "Hello world"

이렇게 default로 만들게되면 값을 곧바로 전달할수있습니다 해당모듈을 import하게되면 기본적으로 입력한 값이 실행 됩니다 .

또한 export default 로 내보내기를 하게되면 import 하는 방법도 바뀌게 되는데요

중괄호를 제외하여 사용할 이름을 정한다음 경로를 지정해줍니다

import useingName from './utill.js'

console.log(usingName)

default로 설정되어있기때문에 해당파일을import하게 되면 해당값을 불러옵니다.

마치 변수를 설정하듯 내가 원하는 이름으로 지정해주면됩니다

Array.from() MDN의 설명입니다

정적 메서드는 반복 가능하거나 배열 과 유사한 객체 에서 **Array.from()**얕은 복사된 새 인스턴스를 만듭니다 .Array

Array.from() 의 첫번째 파라미터는 배열의 길이를 나타 냅니다.

문자열은 배열과 유사한형태의 객체이므로

Array.from("안녕하세요")

[ '안', '녕', '하', '세', '요' ]

이렇게 글자하나하나를 가진 리스트로 반환해준다

또한 임의의 숫자 리스트를 만들기위해서는 from()메소드에 두번째파라미터는 콜백함수를 사용할수있습니다.

Array.from() 메소드의 콜백 함수는 세 개의 인자를 받습니다:

1. 현재 생성되는 요소의 값
2. 현재 생성되는 요소의 인덱스
3. 생성되는 배열 자체

길이 10개짜리 배열을 만들고싶다면

Array.from({length:10})

[ undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined ]

from()메소드에 첫번째 파라미터은 배열과 유사한객체를 전달할떄 속성값을 length로 지정해두면 해당길이의 배열을 만듭니다

하지만 이코드는 길이는 10개인 리스트이지만 값이없기때문에 길이가 10개이나 값이 undefined 인 배열10개가 만들어집니다.

Array.from({length:10},(_,i)=>i+1)

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Array.from()의 콜백함수의 파라미터는 위의 설명처럼

1. 현재 생성되는 요소의 값 : undefined
2. 현재 생성되는 요소의 인덱스 : 0부터 길이만큼시작

첫번째 파라미터를 “_” 언더바로 표시하게되면 사용하지않겠다는 자바스크릡트의 관례적인표현입니다.

요소의값을 사용하지않고 인덱스값에 +1 을 해주므로써

[1,2,3,4,5,6,7,8,9,10] 과같은 배열을 만들수있습니다.

 fetch와  axios 차이

debounce 함수는 콜백 함수(cb), 타이머 참조(timerRef), 그리고 시간(time)을 인자로 받아서 콜백 함수를 일정한 시간이 지난 후에 실행하도록 도와주는 함수입니다. 이 함수는 일반적으로 사용자 인터페이스에서 이벤트 핸들러에 적용되어, 이벤트가 연속적으로 발생할 때 불필요한 작업의 반복을 방지하거나 처리를 지연시킬 때 사용됩니다.

여기에서 debounce 함수의 동작을 단계별로 설명하겠습니다:

debounce 함수는 세 개의 인자를 받습니다:

const debounce = (cb, timerRef, time) => {
  if (timerRef.current) clearTimeout(timerRef.current);
  timerRef.current = setTimeout(() => {
    cb();
  }, time);
};

1. cb: 실행할 콜백 함수.
2. timerRef: 타이머를 저장하기 위한 객체 또는 참조.
3. time: 지연 시간(밀리초) - 콜백 함수를 실행하기 전에 기다려야 하는 시간.

함수는 먼저 timerRef.current가 이미 설정되어 있는지 확인합니다. timerRef.current는 이전에 설정된 타이머 ID를 저장하는 역할을 합니다. 만약 이미 타이머가 실행 중이라면, clearTimeout 함수를 사용하여 해당 타이머를 취소합니다. 이렇게 함으로써, 이전에 예약된 콜백 함수의 실행을 중지시키고 새로운 타이머를 설정할 수 있습니다.

그 다음, setTimeout 함수를 사용하여 cb 함수를 time 밀리초 후에 실행합니다. 이것이 즉, debounce 함수를 호출하면 cb 함수가 지연 후에 실행됩니다.

timerRef.current는 이 새로 설정된 타이머의 ID를 저장하므로, 나중에 이 타이머를 취소하거나 업데이트할 때 사용할 수 있습니다.

이 debounce 함수를 사용하면, 이벤트 핸들러 내에서 연속적인 이벤트 호출을 제한하고, 이벤트가 발생한 후 특정 시간 동안 추가 호출을 방지할 수 있습니다. 이것은 예를 들어 검색 창에서 실시간 검색 결과를 표시할 때와 같이 불필요한 렌더링 또는 서버 요청을 방지하고 성능을 향상시키는 데 도움이 됩니다.