JavaScript - 객체, 배열, Truthy와 Falsy, 단락 평가

icems0428 2025. 1. 13. 17:47

객체 1

// 1. 객체 생성
let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴 (대부분 사용)

// 2. 객체 프로퍼티 (객체 속성)
let person = {
  name: "박진주",
  age: 23,
  hobby: "요가",
  extra: {},
  10: 20,
  "like cat": true,
};

// 3. 객체 프로퍼티를 다루는 방법
// 3.1 특정 프로퍼티에 접근 (점 표기법, 괄호 표기법)
let name = person.name;
/// 없는 프로퍼티는 undefined

let age = person["age"];
console.log(age);

let property = "hobby";
let hobby = person[property];
console.log(hobby);
/// 프로퍼티 동적으로 변화 -> 괄호

// 3.2 새로운 프로퍼티를 추가하는 방법
person.job = "student";
person["favoriteFood"] = "마라탕";

// 3.3 프로퍼티를 수정하는 방법
person.job = "teacher";
person["favoriteFood"] = "케이크";

// 3.4 프로퍼티를 삭제하는 방법
delete person.job;
delete person["favoriteFood"];

// 3.5 프로퍼티의 존재 유무를 확인하는 방법 (in 연산자)
let result1 = "name" in person;
console.log(result1);

객체는 주로 객체 리터럴, 즉 { } 를 이용해 생성한다. 객체 프로퍼티(속성)에 접근하는 방법에는 점 표기법과 괄호 표기법이 있다. 괄호 표기법에서는 프로퍼티 이름 양 옆에 쌍따옴표를 붙여줘야 한다. 그렇기에 객체에서 접근할 프로퍼티가 동적으로 변화한다면 괄호 표기법, 그렇지 않다면 점 표기법을 사용하는 것이 좋다.

프로퍼티를 삭제할 때에는 delete, 프로퍼티의 존재 유무를 확인할 때에는 boolean 값을 반환하는 in 연산자를 사용한다.

객체 2

// 1. 상수 객체
const animal = {
  type: "고양이",
  name: "나비",
  color: "black",
};

animal.age = 2;
animal.name = "까망이";
delete animal.color;

// 2. 메서드
// -> 값이 함수인 프로퍼티를 말함

const person = {
  name: "박진주",
  // 메서드 선언
  sayHi() {
    console.log("안녕");
  },
};
person.sayHi();
person["sayHi"]();

상수 객체란 말그대로 상수로 선언된 객체이다. 그래서 const animal { }로 선언한 상수 객체를 animal = 21처럼 객체가 아닌 것으로 바꾸려 하면 오류가 난다. 하지만 그 외의 객체 프로퍼티는 추가, 수정, 삽입이 가능하니 헷갈리지 말자.

메서드란 값이 함수인 프로퍼티를 말한다. 매서드 역시 " 키 : 값 " 형태로 저장해주는데( ex. sayHi: ()=>{console.log("안녕")} ), 메서드 선언으로 마치 함수를 선언하듯 쉽게 만들 수가 있다.

배열

// 1. 배열 생성
let arrA = new Array(); // 배열 생성자
let arrB = []; // 배열 리터럴 (대부분 사용)

let arrC = [1, 2, 3, true, "hi", null, undefined, () => {}, {}, []];

// 2. 배열 요소 접근
let item1 = arrC[0];

arrC[0] = "hi";
console.log(arrC);

배열 리터럴은 대괄호 [ ]를 이용하여 생성한다. 배열의 값으로는 null, undefined, 객체, 함수, 배열 모두가 올 수 있다. 배열 요소의 접근은 인덱스로 하며, 배열의 인덱스는 0부터 시작한다.

Truthy와 Falsy

// 1. Falsy한 값
let f1 = undefined;
let f2 = null;
let f3 = 0;
let f4 = -0;
let f5 = NaN;
let f6 = "";
let f7 = 0n;
/// 조건문에서 false

// 2. Truthy한 값
// -> 7가지 Falsy한 값들 제외한 나머지 모든 값
let t1 = "hello";
let t2 = 123;
let t3 = [];
let t4 = {};
let t5 = () => {};

// 3. 활용 사례

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

let person;
printName(person);

자바스크립트의 모든 값은 Truthy이거나 Falsy이다. Truthy란 참 같은 값으로, 조건문에서 참이 되고 Falsy는 그 반대이다. 인수를 받았을 때 해당 값을 제대로 받아왔는지 조건문으로 확인할 수 있다.

단락 평가

// 단락 평가 활용 사례

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

printName();
printName({ name: "박진주" });

단락 평가란 논리 연산에서 첫 번째 피연산자로 연산 결과를 확정할 수 있을 시 두 번째 피연산자에 접근하지 않고 바로 값을 반환하는 것을 말한다. 객체를 인수로 제대로 받아왔는지 확인할 때, 이를 이용해서 조건문을 이용하는 것보다 더 간지나게 코딩할 수가 있다.

T || T => 앞의 Truthy한 값 반환
T && T => 뒤의 Truthy한 값 반환

그러므로 person 매개변수 자리에 아무것도 넘겨주지 않으면 name이 false가 되어 "person의 값이 없음"이 출력,

객체와 name 프로퍼티를 제대로 넘겨주면 name이 true가 되어 name의 값 "박진주"를 출력하게 된다. (이때 "person의 값이 없음"은 Truthy한 값.)