34+DAY_멋사 프론트엔드 부트캠프 14기_TIL

What I Learned Today

오늘은 객체, 조건문, 객체 비교에 대해 배웠다.

JS에는 객체가 존재한다.

• 객체 : 키(key) - 값(value) 쌍을 표현하는 데이터
  • 중괄호 안에 key-value 쌍을 작성하여 객체를 생성할 수 있다.

// -------------------------------
// 객체 타입(Object Types, 복잡)
// -------------------------------
Object - {}
Function - () => {}
Array - []

// -------------------------------
// JavaScript 객체(Object)
// -------------------------------

// 객체 정의
// 객체 리터럴을 사용해 객체 정의 (쉬운 방법)
const 커피 = {
    용량: "600ml",
    브랜드: "스타벅스",
    이름: "아메리가노",
};

console.log(커피);

// 객체 생성자 (Constructor)를 사용해 객체 생성
const 커피 = new Object();

커피.이름 = "아메리카노";
커피.브랜드 = "스타벅스";
커피.용량 = "600ml";

console.log(커피);

 

객체의 속성 값을 쓰고 수정하고 삭제할 수도 있다

함수도 객체라서 함수에도 속성 값을 수정하고 삭제할 수 있다.

// -------------------------------
// 함수의 타입은?
// JavaScript 함수는 객체이다.
// 객체는 값이다 -> 함수는 객체다 -> 함수는 값이다.
// -------------------------------

function likeLion() {
    console.log("우리는 멋사 14기!");
}

// 속성 값 쓰기
likeLion.order = 14;

console.log(likeLion.order);

// 속성 값 삭제
delete likeLion.order;

console.log(likeLion.order);

function likeLion() {
    console.log("우리는 멋사 14기!"); //우리는 멋사 14기!
}

// 속성 값 쓰기
likeLion.order = 14;

console.log(likeLion.order); // 14

// 속성 값 삭제
delete likeLion.order;

console.log(likeLion.order); // undefined

 

객체의 메서드는 함수를 값으로 포함하는 속성을 말한다.

const macBookAir = {
    칩: "Apple M2",
    메모리: "16GB",
    일련번호: "12345678",
    macOS: "Sequoia 15.5",
};

// 여기가 메서드 부분
// getMemory는 macBookAir 객체의 메서드이다.

macBookAir.getMemory = function () {
    return macBookAir.메모리;
};

// macBookAir.getMemory() -> 메서드 호출
console.log(macBookAir.getMemory()); // 16GB

 

JS 역시 조건문을 사용할 수 있다.

// -----------------------------------
// 조건문 - if ... else
// -----------------------------------

// 프로그래밍 조건문

// 참 같은 값(truethy)으로 평가
// 거짓 같은 값(falsey)으로 평가 (false, 0, "", null, undefined)

// false라면 else가 실행, true라면 if가 실행된다.
let isLightColorRed = false; 

if (isLightColorRed) {
    console.log("건너면 안돼.");
} else {
    console.log("건너");
}

 

다양한 연산자도 있다.

// 크기 비교 연산자
<, <=, >, >=

// 동등 비교 연산자(느슨한 비교, 타입 변환O)
==

// 완전 동일 비교 연산자(엄격한 비교, 타입 변환X)
===

// 다름 비교 연산자
!= // 느슨한 비교
!== // 엄격한 비교

// 느슨한, 엄격한 비교의 차이

//느슨한 비교는 타입을 변환하여 문자만 같으면 서로 같다고 한다.
'24' == 24 → true

// 엄격한 비교는 타입이 변환되지 않기 때문에 string과 number 타입은 다르다.
'24' === 24 → false

 

객체도 비교가 가능하다. 하지만 일반적인 상황이랑은 다르다.

const 김도현 = { isHavingFun: true }
const 남도현 = { isHavingFun: true }

console.log(김도현 == 남도현); // false
console.log(김도현 === 남도현); // false

이는 객체라서 이런 결과가 나온다.

서로 내용은 같지만 고유 식별자(객체 참조)가 다르기 때문에 객체 참조를 비교해야 한다.

const 김도현 = { isHavingFun: true }
const 남도현 = 김도현

console.log(김도현 == 남도현); // true
console.log(김도현 === 남도현); // true

이번에는 true가 나온다. 그 이유는 김도현의 고유 식별자를 남도현에게 복사했기 때문에 둘은 같은 객체 참조를 가진다.

이때 남도현의 속성을 바꾸면 김도현의 속성도 같이 바뀐다.

 

The Problem I Faced

동등 비교 연산자는 타입을 자동으로 변환한다면 <, ≤, >, ≥ 기호도 자동으로 변환해 주는지 궁금했다.

 

What I Tried to Do

직접 코드를 짜고 확인을 해보았다.

 

How I Solved It

놀랍게도 해준다.. 

나만 알기 아까워 회고 팀원들에게도 알려줬다.

So

 

Aha Moments

원래 서버를 하나 열고 개발자도구 콘솔에서 결과를 확인해야 했는데

quokka.js라는 vscode 익스텐션을 설치하니 결과가 에디터에 바로바로 나와서 좋았다.