[TIL] JS - 변수, 타입, 함수

Today I Learned

변수 (Variable)

• 프로그래밍이란 컴퓨터에게 우리가 원하는 방식으로 데이터를 처리하도록 명령하는 것

• 변수란 일종의 데이터 저장소로 변수명 식별자(identifier) 를 통해 데이터를 사용할 수 있다.

• 변수를 사용하기 위해서 먼저 변수가 선언(declaration)되어야 한다. 선언은 단 한번만 할 수 있다.

  • // 변수 선언
    let name;

  • 변수를 선언하기 위해서 var, let 또는 const 키워드를 사용할 수 있다.

  • var : ES6이전에 변수를 선언하기 위해 사용된 키워드

  • let : 재할당이 필요한 변수를 선언할 때 사용

  • const : 재할당이 불가능한 변수를 선언할 때 사용

• 할당 연산자 =를 사용해 선언된 변수에 데이터를 할당(assignment)할 수 있다.

  • // 변수 할당
    name = 'Alex';
    
    // 변수 선언 + 할당
    let name = 'Alex';

• 식별자 규칙

  • 식별자에는 오직 알파벳 문자, 숫자, $, _만 들어갈 수 있다.
  • 식별자의 첫 글자에는 숫자가 올 수 없다.
  • 식별자의 대소문자는 구별된다. (name과 Name은 서로 다른 식별자)
  • 식별자에 공백을 사용할 수 없으며 camelCase가 흔히 사용된다.
  • 예약어는 사용될 수 없다. (예: function, class, var 등)

• 표현식(expression)이란 값(value)로 평가될 수 있는 문(statement)을 말하며, 값은 표현식을 평가한 결과물을 말한다.

  • let num = 1 + 2; 
    // 변수 num에는 표현식 1 + 2가 평가된 값 3이 할당된다.

타입 (Type)

• JS에서 사용되는 값은 모두 특정 자료형에 속한다.

• 각각의 타입마다 사용할 수 있는 속성과 메소드가 다르다.

  • '123'.length; // 3
    123.length; // error

• 원시 자료형 (Primitive Data Type) : 하나의 고정된 저장 공간을 가짐

  • Number : Integer, Float 등의 숫자를 나타낼 때 사용.
  • Bigint : 길이 제약 없이 정수를 나타낼 때 사용.
  • String : 문자열. '', ""로 묶어서 표현.
  • Boolean : true/false
  • Undefined : 값이 할당되지 않은 상태를 나타냄.
  • Null : 존재하지 않는, 비어 있는 값을 나타냄.
  • Symbol : 객체의 고유 식별자를 만들 때 사용됨.

• 참조 자료형 (Reference Data Type) : 원시 자료형이 아닌 다른 모든 자료형. heap에 값을 저장하고 변수에는 저장소 주소가 저장됨.

  • Array
  • Object
  • Function

• typeof를 사용하여 특정 값의 타입을 확인할 수 있다.

  • typeof(123); // "number"
    typeof(NaN); // "number" NaN도 number 타입에 속한다.
    typeof('123'); // "string"
    typeof([1, 2, 3]); // "object" 배열은 객체 타입으로 처리된다.

• 자료형 변환

  • Number('123'); // 문자열 '123'을 숫자 123으로 변환
    String(123); // 숫자 123을 문자열 '123'으로 변환
    Boolean(1); // 숫자 1을 불린 true로 변환

• ===연산자는 값의 타입까지 고려하지만 ==은 그렇지 않다.

  • 123 == '123'; // true
    123 === '123'; //false

함수 (Function)

• 함수란 하나의 특정한 기능을 수행하기 위한 코드의 집합을 말한다.

• 함수는 항상 출력값을 반환한다. (return값이 지정되지 않을 경우 undefined가 반환됨)

• 함수 선언(function declaration)

  • function funcName(parameter) {
      // function body
    }

• 함수 호출(function call/invocation)

  • 선언된 함수를 실제로 호출하는 것

  • // 함수 greet 선언
    function greet(name) {
      console.log('Hello, ' + name);
    }
    // name은 매개변수(parameter)이다.
    
    // 함수 greet 호출
    greet('Alex'); // 'Hello, Alex'
    // 'Alex'는 전달인자(argument)이다.

• 함수 표현식(function expression)

  • const funcName = function (parameter) {
      // function body
    }

  • 함수 선언식과 달리 함수 표현식은 호이스팅의 영향을 받지 않는다. 따라서 함수 호출이 함수 선언보다 먼저 이루어질 경우 에러가 발생한다.

• 화살표 함수(arrow function)

  • const funcNmae = (parameter) => {
      // function body
    }

  • 화살표 함수는 this를 가지지 않으며 화살표 함수 안에서 this를 사용할 경우 외부 스코프의 this를 가져오게 된다.