Javascript 프로그래밍 기초 문법

태리·2022년 9월 23일
0

프로그래밍에서 가장 중요한 것

입력 - 연산 - 출력

Check point

사용자에게 콘솔이나 UI를 통해 입력받은 데이터를 잘 처리하고 연산해서 알맞게 다시 사용자에게 출력해주는 것이 가장 중요하다. 이런 연산을 통해서 CPU를 효율적으로 사용할 수 있도록 CPU에 최적화된 로직을 작성하는 것도 중요하고 메모리를 최소화해서 사용하는 것도 중요한 포인트이다.

데이터 타입

원시 타입(primitive type)

더이상 작은 단위로 나눠질 수 없는 타입

변경 불가능한 값(immmutable value)

  • String

    • 문자열
  • Number

    • 숫자
  • Boolean

    • True / False
  • undefined

    • 값이 할당되지 않음
  • null

    • 값이 할당되어 있으나 비어있음

      `typeof null` 이 객체인 이유
       자바스크립트의 typeof 키워드에서 `null` 에 대한 예외처리가 되어있지 않은 버그가 있었지만
       typeof를 사용하는 모든 웹 사이트에 영향을 끼칠수 있기 때문에 수정되지 않고 있다고 한다.
       따라서 `typeof null`은 객체이다. 
  • NaN

    • Not a Number의 줄임말로 말 그대로 숫자이지만 숫자가 아닌 값이다.
    • 대부분의 경우 숫자가 아닌 값을 숫자로 변환하는 경우 NaN으로 반환된다.
      헷갈리기에 콘솔에 찍어봤다.

      첫번째 칸은 NaN끼리는 값이 같지 않음을 의미한다.
      두번째 칸은 NaN은 숫자형의 NaN이다(?)
      세번째 칸은 값이 NaN인지를 판별할 때 쓰인다.

      헷갈린다면, 콘솔에 isNaN(값)을 입력해 판별하는 게 가장 현명한 방법인 것 같다.

객체(Object)

원시 타입 이외의 모든 값

변경 가능한 값(mutable value)

primitive 데이터들을 여러개 묶어서 한 단위로 관리할 수 있게 해준다.

  • { key1: value, key2: value } 의 형태로 표현되며 value에는 모든 자료형의 이 들어간다.

    • key를 통해 객체에 있는 value(값)을 얻을 수가 있다.

      • obj.key
      • obj['key']
    • 예시

      const person = {
      	name: '김정은',
      	age: 30
      }
       person.name;
      // Print: '김정은'
      
       person['name'];
      // Print: '김정은'

      위와 같은 식으로 객체 안의 value값을 얻어낼 수 있다.

      const person = {
          name: '김정은',
          age: 30,
         'raising dog': '코코',
      }

      하지만 변수에 여백이나 (-)기호 등 옳지 않는 식별자가 들어갔을 경우 person['raising dog']으로만 표현해야 한다.

  • Array (배열)

    • [value, value2, value3] 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있습니다.
    • 다른 언어에서는 이와 같은 자료형을 List(리스트)로 부르기도 하지만 JS에서의 공식 명칭은 Array입니다.
    • 배열에는 Index라고 하는 개념이 존재하며, value에 접근 가능하게 해주는 식별자입니다.
      • 비유하자면 책의 목차(Index)에 있는 페이지 수와 같으며, 목차를 보고 해당 페이지를 펼치면 원하는 내용(value)을 볼 수 있는것과 같습니다.

      • Index의 최소 값은 0입니다.

        const names = ['강승현', '홍길동', '김아무개'];
        
        names[0];
        // Print: '강승현'
        
        names[2];
        // Print: '김아무개'
        
        names[3];
        // Print: undefined
  • Function (함수)

    • 인수(Argument)와 매개변수(Parameter)

      🔆 argument = 전달인자 = 값 = 인수

      plusNumber(1,2);
      
      // 전달인자 1, 2

      함수가 호출될 때 값을 전달한다고 해서 전달인자라고도 부른다.
      매개변수와 달리 전달인자는 고정되어 있지 않고, 호출할 때마다 수시로 변하기 때문에 변수가 아닌 값(Value)이다.
      인수라고도 한다.

      🔆 parameter = 매개변수 = 변수 = 인자

      function plusNumber(a,b) {
        return a+b;
      }
      
      // 매개변수 a, b 

      함수가 호출되면서 건네준 argument의 값이 담기는 함수 내부에 있는 변수이다. 이 곳에 인자가 담긴다.
      들어오는 인자가 매개체 역할을 한다고 해서 매개변수라고도 한다.

    • 화살표 함수(Arrow Function)

      const sum = function(a, b) {
            return a + b;
       };
      sum (1, 2)

      a와 b라는 파라미터에 전달인자인 1과 2를 명령문 a + b에 대입해 그 값을 반환해라

      const sum = (a, b) => {
            return a + b;
       };

      function 대신 =>로 변경

      const sum = (a, b) => a + b;

      { }와 return 생략

      const hello = a => {
      			      return a;
      };
      hello('hi'); // hi

      파라미터가 하나인 경우 ( ) 생략 가능



변수

자바스크립트만의 특징

  • 동적타입

    자바스크립트는 느슨한 타입(loosely typed)동적 언어(dynamic)이다.
    모든 타입(자료형)의 값으로 할당, 재할당이 가능하다
  • 자동 형변환

    자바스크립트는 자동 형변환 기능을 가졌는데 가볍게 보면 매우 편리한 기능이지만 알고보면 버그를 만들기 매우 쉽기 때문에 주의해야 할 필요가 있다.
    예를 들어 위와 같이 좌측 값은 숫자고 우측 값은 문자열이라 값이 다르지만 이때 숫자형이 문자열로 변환이 되는 자동 형변환이 일어나서 '10' === '10'와 같은 의미가 된다.

    이러한 기능 때문에 자바스크립트에선 == 는 지양하고 ===를 쓸 수 있도록 하자.



이로 인한 단점과 보완책

  • 단점

    타입을 명시하지 않고 런타임시 변수의 타입이 결정되기 때문에 에러가 난 채로 코드를 배포하고 서버에 문제가 생긴다.

  • 보완책

    타입스크립트


    언어는 크게 정적 타입과 동적 타입 언어로 구분할 수 있다.
    타입 스크립트는 자바스크립트에 타입을 부여한 정적 타입 언어이다.

    이런 정적 타입 언어는 런타임 이전에 타입이 올바른지에 대한 검사를 시행하며, 동적 타입 언어는 런타임 시에 프로그램의 타입이 올바른지에 대한 검사를 실행하기 때문에 래퍼런스 오류를 유발하는 코드가 존재한다면 정적 언어는 컴파일하는 과정에서 오류를 출력하는 반면 동적  언어는 해당 구문이 실행되는 시점에서 오류를 출력한다. 그렇기 때문에 정적 타입 언어인 타입스크립트가 동적 타입 언어인 자바스크립트의 대안책이 될수 있다.
profile
UXUI 디자이너 취준생입니다

0개의 댓글