📜JavaScript

JavaScript 찍먹하기 - (1) 변수, 자료형, 연산자 등

코딩베이비 2023. 4. 24. 22:26

변수

let name = "KSH";
let age = 20;
let temp = 36.5;
let isChecked = false;

let a = "Good", b = "Bad";
  • 문자(열)는 “”나 ‘’ 로 감싸져 있어야 함
  • JavaScript의 예약어는 변수명으로 사용 불가 변수명 숫자로 시작 불가 대소문자 구별 🙆‍♂️
  • 세미콜론 안붙어도 작동 하긴 함
  • 변수에 저장된 값 변경 가능

상수

const PI = 3.141592;
  • 변하지 않는, 재할당될 수 없는 값

자료형

  • JavaScript의 변수는 자료형과 관계없이 모든 데이터가 될 수 있다
    ⇒ 자료의 타입은 존재하지만, 변수에 저장되는 값의 타입은 바뀔 수 있음(동적 타입)
let m = "Message";

let n = 123;
let bigN = 9007199254740992n;
let f = 123.456;

let checked = true;

let couple = null;
let couple = undefined;

1. 문자형

  1. “Hello World!”
  2. ‘Hello World!’
  3. `Hello World!`

Backtick(``)에 감싼 문자열에 표현식을 ${…}에 넣으면(String Literal),

let name = "Kim";
alert(`My name is ${name}`)

// => My name is Kim

이렇게 문자열 중간에 표현식 삽입 가능!

 

2. 숫자형

  • 정수
  • 부동소수점 숫자(floating point number)
  • BigInt
    • -2^53-1 ~ 2^53-1 (9,007,199,254,740,991) 벗어난 숫자
    • 숫자 끝에 n을 붙이면 BigInt로 저장 가능
    • 길이 제한 x
  • Infinity
    • 1 / 0 ⇒ Infinity
    • 문자열 / 2 ⇒ NaN
  • 2, 8, 16진수

3. 불린형

  • true & false 저장 가능

4.null & undefined

  • null
    • 존재하지 않는, 비어있는, 알 수 없는 값
      ex) let age = null;
  • undefined
    • 값이 할당되지 않은 상태
      ex) let age;

typeof 연산자

typeof undefined // undefined
typeof 0 // number
typeof 100000000n // bigint
typeof true // boolean
typeof "Hello" // string
typeof Math // object
typeof alert // function
typeof null // object
  • typeof X, typeof(X) 둘 다 가능
  • null 은 object가 아니지만 언어자체 오류로 인해 object로 표시
  • alert 는 function형 이지만, function형은 사실 따로 없음

형변환

// boolean -> string
let a = true;
a = String(a);

// string -> number
let a = "10" / "2";
let b = Number("100");
let c = Number("이것도 바꿔 보시지!123"); // NaN

// string/number -> boolean
let a = Boolean(3); // true
let b = Boolean("Hello"); // true
let c = Boolean("     "); // true
let d = Boolean("") // false
  • 숫자형으로 변환 시 적용되는 규칙
    • undefined ⇒ NaN
    • null ⇒ 0
    • true / false ⇒ 1 / 0
    • string ⇒ 양쪽 공백 제거 후 문자열이 있으면 NaN, 있으면 0
  • 불린형으로 변환 시 적용되는 규칙
    • 0, null, undefined, NaN, “” ⇒ false
    • 나머지는 true

연산자

기본연산자

  • +, -, *, /, %, **
  • 피연산자(operand)
    • 연산을 수행하는 대상 (1 + 2 ⇒ 1과 2가 피연산자)
    • =인수(argument)
  • 단항(unary)연산자
    • 피연산자를 하나만 받는 연산자
    
let x = 1;
x = -x;
// (-)가 대표적인 단항 연산자(연산자의 부호를 바꿈)

let y = 1;
y = +y;
// 아무일도 일어나지 않음

let z = +true; // 1
let zz = +""; // 0
// (+)는 Number() 역할 가능
  • 이항(binary)연산자
let x = 1, y = 2; x - y 
// 여기서 (-)는 빼기 역할

//+로 문자열 연결 가능
let s = "Hello" + "World" // HelloWorld 
let a = '1' + 2 // 12 
let b = 5 + 5 + '1' // 11
  • 할당연산자

let a = 1 + 2 + (b = 1 + 2); // 6

let x, y, z; 
x = y = z = 1 + 1; // x = 2, y = 2, z = 2

//복합 할당 연산자
let a += 1; // a = a + 1
  • 증가/감소 연산자
    • 변수에만 사용가능
    let cnt = 1;
cnt++; // 후위형, 다음 줄부터 적용
--cnt; // 전위형, 해당 줄에 바로 적용

let a = counter++; // a = 1
let b = ++a; // b = 2
  • 비트연산자
    • AND (&)
    • OR (|)
    • XOR (^)
    • NOT (~)
    • LEFT SHIFT (<<)
    • RIGHT SHIFT (>>)
    • ZERO-FILL SHIFT (<<<, >>>)

비교연산자

    • <, >, ≥, ≤, ==, ≠, ===
      ⇒ 결과에 따라 true / false 반환
    • 문자열 비교
      • 문자열의 첫글자부터 순서대로 비교
      • 유니코드에서 소문자가 대문자보다 더 큰 인덱스를 가짐
      • "Z" > "A" // true
        "Hello" > "Hell" // true
        "z" > "Z" // true
    • 다른 타입 간의 비교
"2" > 1 // true, 문자형을 숫자형으로 바꾼 후 비교
true == 1 // true, 불린형을 숫자형으로 바꾼 후 비교
let a = 0;
let b = "0";
Boolean(a); // false
Boolean(b); // true
a == b // true
// 숫자 0은 false,이고 문자 0은 값이 있기 때문에 true // "0"과 0 비교-> 문자형이 숫자형으로 바뀌기 때문에 true
    • strict equality operator(===)
      • 0 == false => true
      • 0 === false => false
      • 자료형도 함께 비교해주기 때문에 ==와는 결과가 다름
    • null & undefined 비교
null == undefined // true
null === undefined /// false

null == 0 // false
null > 0 // false
null >= 0 // true
  • == 연산자는 undefined와 비교하는 경우를 제외하면 형변환이 일어나지 않음
  • >, ≥에서는 null이 0으로 형변환됨
undefined > 0 // false
undefined == 0 // false
  • <, > 에서 undefined는 NaN으로 변환
  • undefined는 null 이외의 값과는 같을 수 없음

논리연산자

  • &&, ||, !
    • OR 연산자를 여러개 체이닝 했을 때, 피연산자 중 true가 없다면 마지막 피연산자 반환 피연산자가 true라면 피연산자 반환 후 바로 종료
    • AND 연산자 여러개 체이닝 했을 때, 첫번째 피연산자가 false라면 피연산자 반환 후 바로 종료
    • AND가 OR 보다 우선순위 높음
let first = "";
let last = "";
let nick = "";

console.log(first || last || nick || "temp"); // temp 출력

 

참고

https://ko.javascript.info/

 

모던 JavaScript 튜토리얼

 

ko.javascript.info