[2025 1학기 React.js 스터디] 이서준 #1주차

나는 마치 인간 화력 발전기야

변수 & 상수

🚨 var

var x = 1;

• 사용 x
  • 초창기에 사용
  • 여러 문제점들을 가지고 있어 오류의 원인으로 작용
  • let과 const로 대체

let darkModeOn = true;
const PI = 3.1415926535

• let : 변수 - 넣은 데이터를 바꿀 수 있다.
• const : 상수 - 넣은 데이터를 바꿀 수 없다.

darkModeOn = "안녕하세요";
console.log(darkModeOn); // 오류가 나지 않는다.

앞에 let, const가 없으면 새로운 값을 저장한다고 생각하면 되는데,

자바나 C(자료형을 고정해야 하는 언어)에서는 데이터 자료형이 다르기 때문에 다른 타입은 저장을 하지 못한다.

그러나 JS나 파이썬 같은 경우는 데이터의 종류에 있어 엄격하지 않아 어떤 데이터든 담을 수 있다.

let c = 1;
let c = 2; // 오류

• 같은 이름의 변수를 다시 만들 수 없다.
  • 특수한 케이스로 브라우저 콘솔에서 따로따로 실행할 때는 가능하다.
  • ㄴ DevTools 콘솔에서 각 입력은 독립적인 실행 컨텍스트에서 실행된다.

기본 자료형들과 연산자

자료형 - 숫자, 참/거짓/ 복합 …

JS는 동적 자료형 - 변수/상수 등 데이터가 들어갈 곳에 자료형 제한이 없다.

typeof 연산자

• 해당 데이터의 자료형을 반환

a = true;
console.log(typeof a); // boolean
not_a = !a;
not_not_a = !!a;
console.log(not_a); // false
console.log(not_not_a); // true

number : 숫자

• C나 자바 같은 언어들과 달리 정수/실수, 용량 구분 없다.
• 사칙연산 가능

console.log(typeof 2); // number

string : 문자열

• ‘ / “ 따옴표 구분 없음
• 비(非) 알파벳 문자 및 이모지 표현 가능

console.log("너구리 🦝🦝🦝");

undefined / null

JS에서 없음을 나타내는 값들이다. 의미는 비슷하지만, 각 사용되는 목적과 장소가 다르다.

• undefined: 변수에 무엇이 들었는지 명시되지 않았다.
  • 전 어떤 값이 들어있는 지 몰러유

let foo;
console.log(foo); // undefined
const obj = {};
console.log(obj.prop); // undefined

• null: 비어있다고 지정함
  • 이건 없는거야.. - 이거 없다고?

x = null;
typeof null // 'object'
// 검증하려면
x === null; // true
typeof undefined // 'undefined'

개발자의 입장에서 ‘없음’을 저장하려면

프로그래머의 입장에서 명시적으로 부재를 나타내고 싶다면 항상 null을 사용하는 것이 좋다.

다만 객체를 사용할 때 어떤 속성의 부재를 null을 통해서 나타내는 쪽보다는, 그냥 그 속성을 정의하지 않는 방식이 간편하므로 더 널리 사용된다.

// 이렇게 하는 경우는 많지 않습니다.
{
  name: '이서준',
  address: null
}

// 그냥 이렇게 하는 경우가 많습니다.
{
  name: '이서준'
}

// 어쨌든 이렇게 하지는 말아주세요.
{
  name: '이서준',
  address: undefined
}

비교 연산자

• boolean 을 반환
• == : 자료형에 관계없이 같은(값으로 치환될 수 있는 것 까지 포함) 값임
• === : 자료형도 값도 같음
• <, ≤, >, ≥ : 비교

string < or > 연산 - 오류가 안 난 다 ?!?

JS에서 문자열에 <, >, ≤, ≥ 같은 비교 연산자를 사용하면 비교 연산이 수행된다.

ASCII 코드 값을 기준으로 비교하게 된다.

console.log("apple" < "banana"); // true ("a"가 "b"보다 앞)
console.log("cat" > "car");      // true ("t"가 "r"보다 뒤)
console.log("Zebra" > "apple");  // false ("Z"의 유니코드 값이 "a"보다 작음)
console.log("Hello" < "hello");  // true ("H"의 유니코드 값이 "h"보다 작음)

console.log("100" < "2");  // true ("1"이 "2"보다 작아서)
console.log("25" > "100"); // true ("2"가 "1"보다 크니까)
console.log("abc" < "123"); // false ("a"의 유니코드 값이 "1"보다 큼)

console.log("10" < "2");   // true ("1"의 유니코드 값이 "2"보다 작기 때문)
console.log("10" < 2);     // false ("10"이 숫자로 변환되어 10 < 2 비교)
console.log("10" > 2);     // true ("10"이 숫자로 변환되어 10 > 2 비교)

• 대문자가 소문자보다 유니코드 값이 작다!
• 오류는 발생하지 않지만, 예상치 못한 결과가 나올 수 있으니 조심하자

객체와 배열

원시 자료형 이외의 모든 데이터는 객체

프로퍼티 추가 & 수정

const person1 = {
  name: '김철수',
  age: 25,
  married: false
};
// ****추가
person1.job = 'programmer';
person1['bloodtype'] = '0';

console.log(person1);
// 객체에 job과 bloodtype이 추가됨

// **수정**
person1.age++; // 26
person1['job'] = 'PM';

console.log(person1);
// job과 age가 수정됨

const인데 왜 값을 수정할 수 있는가?

• 해당 상수 그 자체가 아닌, 내부 데이터는 변경 가능
• const person1 선언 자체는 person1 변수가 새로운 객체를 가리키지 못하도록 제한
  • 객체 자체의 재할당만 막는거임
• 하지만 객체의 내부(프로퍼티)는 변경 가능
• 즉, 객체의 메모리 주소는 고정되지만, 객체 내부 데이터는 수정할 수 있다.

객체의 속성 추가/수정까지 막으려면 Object.freeze() 또는 Object.seal()을 사용 - 배열도 동일

• Object.freeze( ) ⇒ 완전한 불변 ( 수정 / 삭제 모두 불가능 )
• Object.seal( ) ⇒ 속성 수정 가능 but 추가 / 삭제 불가

Object.seal(person1);
person1.age = 20; // age 20으로 변경
person1.nickname = "너구리"; // 무시됨 ( 새로운 속성 추가 불가 )

Object.freeze(person1);
person1.age = 20; // 무시됨 ( 새로운 속성 수정 불가 )

switch문 - JS에서도 fallthrough가 될까?

fallthrough - case에서 break를 생략하면 다음 case로 계속 실행됨

• fallthrough는 JS에서도 가능하며, case에 break가 없을 떄 발생한다.
• 원하지 않는 fallthrough를 방지하려면 break 사용
• 의도적으로 활용도 가능 ( 특정 등급 이상 모두 출력 등 )