JavaScript 기본

🍂 변수

  • var는 사용 X
  • 상황에 따라 let이나 const를 사용하는 것이 좋다.

    • let

  • 값의 재할당이 가능하다.
    • let a = 12;
    console.log(a); // 12
    

    a = 999;
    console.log(a); // 999

    const

  • 값의 재할당 불가
    • const a = 12;
    console.log(a); // 12
    

    a = 999; // TypeError: Assignment to constant variable.
    console.log(a);

    변수의 호이스팅(hoisting)

  • 호이스팅이란 변수나 함수의 선언을 최상단으로 끌어올리는 것이다.
  • 따라서 아래 코드에서 a가 선언되기 전에 a를 호출하여도 에러가 아닌 undefined를 출력한다.
  • 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.
    • console.log(a); // undefined
    

    var a; // 변수 선언
    a = 99; // 값의 할당
    

    console.log(a); // 99
  • 변수 선언과 값의 할당을 하나의 문장으로 축약하여 표현하더라도 자바스크립트 엔진은 이를 2개의 문으로 나누어 각각 실행하므로 결과에는 변함이 없다.
    • console.log(a); // undefined
    

    var a = 99; // 변수 선언과 값의 할당
    

    console.log(a); // 99

    let과 const의 호이스팅(hoisting)

  • let과 const 변수도 호이스팅이 안되는 것은 아니다.
  • 그러나 let과 const 변수의 경우 var 변수와 다르게 변수의 선언 단계와 초기화 단계 사이에 일시적 사각 지대(Temporal Dead Zone)가 존재한다.
  • 이런 방법으로 초기화되지 않은 값을 호출하는 것을 막는다.

    • 예약어 (Reserved Word)

  • 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어
  • 그 외 예약어들

    • var의 문제점

  • 중간에 같은 이름의 변수를 다시 선언해도 기존의 변수에 덮어 씌운다.
    • var name = "장경은";
    var name = "경은";
    

    console.log(name);
    // 경은
  • let이나 const는 위와 같이 사용하면 “already been declared”라고 에러를 띄워준다.

    • 🐚 자료형

    String

  • 문자형 데이터이다.
  • 백틱(`) 안에서는 ${}를 이용하여 그 안에 변수명이 인식되도록 사용할 수 있다.
    • let myName = "Kyung-eun";
    let hello = `Hello, ${myName}`;
    

    console.log(hello);
    // Hello, Kyung-eun

    Number

  • 숫자형 데이터이다.
  • BigInt는 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체이다.
  • 뒤에 n이 붙어서 리턴된다.
    • let num1 = 123;
    let num2 = 0.1;
    let bigNum = BigInt(9007199254740991);
    

    console.log(num1 * num2); // 12.3
    console.log(bigNum); // 9007199254740991n

    Boolean

  • 참, 거짓 데이터이다.
    • let bool1 = true;
    

    if (bool1) {
      console.log(bool1); // true
    }

    Undefined

  • 값이 할당되지 않은 상태를 표기 (C언어에서의 쓰레기값)
    • let undef;
    let arr = [1, 2, 3];
    

    console.log(undef); // undefined
    console.log(arr[3]); // undefined

    Null

  • 어떤 값이 의도적으로 비어 있음을 의미할 때 사용
    • let empty = null;
    

    console.log(empty); // null

    Array

  • 여러 데이터를 순차적으로 저장하는 자료형 (배열)
    • let data = [1, "Apple", false, null, undefined];
    let arr = new Array(5);
    

    console.log(data[0], data[1], data[2], data[3], data[4]);
    // 1 'Apple' false null undefined
    console.log(arr);
    // [ <5 empty items> ]
    console.log(arr[0]);
    // undefined

    Object

  • 객체는 키(key)와 값(value)으로 구성된 프로퍼티(property)의 집합이다.
  • 객체를 배열에 담아서 쓸 수도 있다.
    • let student = {
      name: "장경은",
      age: 27,
      hobby: ["basketball", "music"]
    }
    

    console.log(student);
    // { name: '장경은', age: 27, hobby: [ 'basketball', 'music' ] }
    console.log(student.name);
    // '장경은'
    console.log(student['name']);
    // '장경은'

    typeof

  • 자료형을 알려준다.
    • let num = 1;
    let str = "장경은";
    let bool = true;
    let undef = undefined;
    let nul = null;
    let arr = [1, 2, 3];
    let obj = {
      num: 1,
      str: "String"
    }
    

    console.log(typeof num);
    // number
    console.log(typeof str);
    // string
    console.log(typeof(bool)); // 괄호로도 사용 가능. 띄어쓰기 주의
    // boolean
    console.log(typeof undef);
    // undefined
    console.log(typeof(nul)); 
    // object
    console.log(typeof(arr));
    // object
    console.log(typeof obj);
    // object
    console.log(typeof "장경은");
    // string (변수명으로 사용하지 않아도 가능)

    형변환

    String(), Number(), Boolean()

    // 문자 데이터로 변환
    let num = 123;
    num = String(num);
    console.log(typeof num); // string
    

    // 숫자 데이터로 변환
    num = Number(num);
    console.log(typeof num); // number
    console.log(Number("abcdefg")); // NaN
    

    // Boolean 타입으로 변환 
    console.log(Boolean(1)); // true
    console.log(Boolean(2)); // true
    console.log(Boolean(-1)); // true
    console.log(Boolean(0)); // false
    

    console.log(Boolean("장경은")); // true
    console.log(Boolean("0")); // true
    console.log(Boolean("")); // false
    console.log(Boolean(" ")); // true
    

    console.log(Boolean(null)); // false
    console.log(Boolean(undefined)); // false
    console.log(Boolean(NaN)); // false

    parseInt()와 Number()의 차이

  • parseInt는 정수로 만들어 출력한다.
    • let test = '10.12345';
    parseInt(test); // 10
    Number(test); // 10.12345
    parseFloat(test); // 10.12345
  • parseInt는 문자열이 뒤에 붙어있어도 숫자를 뽑아낸다.
    • let test = '2020년도';
    parseInt(test); // 2020
    Number(test); // NaN
  • 그러나 문자로 시작하면 NaN가 나온다.
    • let test = '제1회';
    parseInt(test); // NaN
    Number(test); // NaN

    💫 연산자

    기본 연산자

  • 사칙연산: +, -, *, /
  • %: 나머지 연산자
  • **: 거듭 제곱
  • 증가, 감소 연산자
  • 연산자 줄여서 쓰기

    • 비교 연산자

  • 비교연산자(==) 대신 일치연산자(===) 사용을 생활화!
  • 비교연산자 종류
  • 논리연산자 종류

    • 🌷 조건문

    If문

    if (true) {
      console.log("true 입니다.");
    } else {
      console.log("어차피 출력 안됨");
    }

    Switch문

    let gender = "F";
    

    switch (gender) {
      case 'F':
        console.log("여성입니다.");
        break;
      case "M":
        console.log("남성입니다.");
        break;
      default:
        console.log("외계인입니다.");
        break;
    }
  • Switch문은 잘 사용하지 않았는데 나중에 Redux에서 Switch문을 쓸 일이 있다고 한다.

    • 🔮 반복문

    For문

    for (let i = 0; i < 10; i++) {
      console.log(`인사🙇‍♂️ ${i}번째`);
    }

    While문

    let i = 1;
    

    while (i <= 10) {
      console.log(`인사🙇‍♂️ ${i}번째`);
      i++;
    }

    Do While문

  • 조건에 관계없이 최소 1번은 실행된다.
    • let k = 1;
    do {
      console.log(`인사🙇‍♂️ ${k}번째`);
      k++;
    } while (k <= 10);

    break

  • 멈추고 해당 반복문을 빠져나온다.
    • let j = 1;
    while (true) {
      if (j === 11) {
        break;
      }
      console.log(`인사🙇‍♂️ ${j}번째`);
      j++;
    }

    countinue

  • if 안에 continue를 사용하면 if문이 작동할 때만 해당 인덱스의 실행을 스킵한다. (멈추지 않고 계속 진행)
    • for (let i = 1; i <= 5; i++) {
      if (i === 3) {
        continue;
      }
      console.log(i);
    }
    

    // 1
    // 2
    // 4
    // 5

    🐝 함수

  • 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
    • function sayHello(name) {
    	console.log(`안녕하세요 ${name}님!`);
    }