자바스크립트의 타입

1️⃣ 원시 타입

undefined는 초기화 되지 않은 변수의 값

🔍typeof➡변수의 타입이 뭔지 알려줌

null을 typeof로 출력해보면 null이 아닌 object가 나옴( 진짜 객체❌ )

✅ 불변성⭕➡값 자체를 바꿀 수 ❌ 바꾸려면 새 값을 새로 할당해야함

🔍 예시 1 - string

let msg = 'hello';
msg[0] = 'H';       // ❌ 안 바뀜!
console.log(msg);   // 'hello' 그대로임

문자 하나만 바꾸려 해도 원본 문자열은 그대로❗
👇 바꾸려면 아예 새로운 문자열을 만들어야함

msg = 'Hello'; // ✅ 이렇게 새로 할당해야 함

🔍 예시 2: number

let age = 20;
age + 1;            // 계산만 했을 뿐
console.log(age);   // 20 (그대로임)

age = age + 1;      // ✅ 새 값을 다시 넣어줘야 바뀜
console.log(age);   // 21

🎯 핵심 요약

원시 타입➡불변성을 갖고 있음🤩
수정하려면❓➡새로운 값을 만들어 다시 할당해야함❗

🔥원시타입👉고정된 크기로 'Call Stack' 메모리에 저장
실제 데이터가 변수에 할당

⚡원시타입은 콜스택 안에 바로 값들이 저장됨

2️⃣ 참조 타입

💁‍♀️ 직접 명시하지 않아도 되는 걸 '동적 타입' 이라고 함
↔ '정적 타입' static ( 자바, 타입스크립트, C++ 등등 )

🔥참조 타입👉데이터 크기가 정해지지 않고 Call Stack 메모리에 저장
데이터 값이 heap에 저장되며 변수에 heap 메모리 주소 값이 할당

⚡참조타입은 값이 힙에 저장되는데 힙에 유니크한 주소가 콜스택에 저장됨


🔄 타입 변환

String ➡ Number
Number ➡ String
Boolean ➡ Number

🙌 다른 타입을 '문자열로' 형변환하기

숫자를 문자열로 강제 형변환

불리언을 문자열로 강제 형변환

날짜 & 시간 Date 객체를 String()으로 감싸서 문자형으로 바꾸는 이유
👉 사람이 읽을 수 있는 날짜 형태로 보기 쉽게 만들기 위함

배열을 문자열로 형변환하기

이번엔 toString으로 숫자를 문자열로 형변환하기

불리언을 문자열로 형변환하기

🤓 String & toString의 차이점

🙋‍♀️ 두 가지 방법 다 숫자를 문자열로 바꿔줌

1️⃣ String(5) 👉 "5"

  • 숫자➡문자열로 바꿔주는 함수
  • 그냥 5를 감싸주기만 하면 끝
  • 무조건 안전⛑ ( null, undefined도 문자열로 바꿔줌✔ )
String(5);          // "5"
String(null);       // "null"
String(undefined);  // "undefined"

2️⃣ (5).toString() 👉 "5"

  • 숫자에 .toString() 이라는 명령어를 붙이는 방식
  • 숫자 바로 뒤에 .을 쓰려면 괄호로 감싸줘야함 → (5).toString()
  • null이나 undefined는 에러 나니까 조심💥

🙌 다른 타입을 '숫자로' 형변환하기

문자열을 숫자로 형변환하기

parseInt로 문자열을 숫자로 형변환하니까 소수점 뒷부분이 날라가버림

parseFloat로 하면 소숫점 까지 살릴 수 있음😎

✍ Number, parseInt, parseFloat 차이점

Number("123.45");       // 123.45
parseInt("123.45abc");  // 123
parseFloat("123.45abc");// 123.45
parseInt("abc123");     // NaN

👏자바스크립트 자체에 의해 자동으로 변환되게 하기

문자열 ➕ 숫자 하면 숫자가 아닌 문자열로 자동으로 형변환⭕


👩‍🏫 산술 연산자 및 Math 객체

// 숫자 두 개
let a = 10;
let b = 3;

// 더하기
console.log(a + b);  // 13

// 빼기
console.log(a - b);  // 7

// 곱하기
console.log(a * b);  // 30

// 나누기 (몫)
console.log(a / b);  // 3.333...

// 나머지
console.log(a % b);  // 1

💁‍♀️ 많이 사용하는 것들만 사용해보자

let num = -7.8;

// 절댓값
console.log(Math.abs(num));       // → 7.8 (음수를 양수로 바꿔줌)

// 올림
console.log(Math.ceil(num));      // → -7 (소수점 올림: -7.8 → -7)

// 내림
console.log(Math.floor(num));     // → -8 (소수점 내림: -7.8 → -8)

// 반올림
console.log(Math.round(num));     // → -8 (소수점 반올림: -7.8 → -8)

// 소수점 제거 (버림)
console.log(Math.trunc(num));     // → -7 (소수점 버림: 그냥 소수점 잘라냄)

// 제곱
console.log(Math.pow(2, 3));      // → 8 (2의 3제곱: 2 * 2 * 2)

// 제곱근
console.log(Math.sqrt(16));       // → 4 (16의 제곱근)

// 최댓값
console.log(Math.max(1, 5, 10));  // → 10 (가장 큰 수)

// 최솟값
console.log(Math.min(1, 5, 10));  // → 1 (가장 작은 수)

// 랜덤 숫자
console.log(Math.random());       // → 0 이상 1 미만의 랜덤한 소수 (ex. 0.72435...)

🎰 이렇게 +1을 해주면 1~5까지 랜덤한 숫자를 출력해줌

profile
안녕하세요! 퍼블리싱 & 프론트엔드 개발 공부 블로그 입니다!

0개의 댓글