JavaScript 문법(1)

JavaScript

• JavaScript는 웹 브라우저 내에서 실행되어 웹 페이지를 동적으로 만들고 사용자와 상호작용을 가능하게 하는 프로그래밍 언어
• 즉, 브라우저를 컨트롤 하는 언어
• 클라이언트 측 언어로만 사용되었으나, node.js의 등장 서버 측 애플리케이션 개발이 가능해졌다.

 

 

 

 

Node.js

Node.js — Run JavaScript Everywhere

• Node.js는 Chrome V8 JavaScript 엔진 위에 구축된, 서버 측에서 실행되는 JavaScript 환경
• 전통적으로 JavaScript는 브라우저 내에서만 실행이 가능했지만, node.js의 등장으로 브라우저 밖에서도 실행이 가능해졌으며, 서버 사이드 언어로도 사용이 가능해졌다.
• Express.js, NestJS가 Node의 Backend framework이다.

 

 

 

 

TypeScript

• 타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다.
• 정적 타입 검사를 포함한 추가적인 기능을 제공하여 코드의 오류를 쉽게 찾고, 디버깅을 빠르게 도와준다.

 

 

 

---

 

 

 

 

Typing

• 변수, 표현식, 함수 등의 데이터 타입을 결정하고 관리하는 방식이다
• 동적 타이핑(Dynamic Typing)
  • 변수의 타입이 런타임에 결정된다.
  • 변수에 다양한 타입의 값이 할당될 수 있으며, 프로그램 실행 중에 타입이 변경될 수 있다.
  • python, 앞으로 배울 JavaScript가 동적 타이핑을 사용한다.
  • 장점
    • 프로그램의 유연성이 높아진다. 같은 변수에 다양한 타입의 값을 할당할 수 있다.
    • 코드의 양이 줄어들어 개발 속도가 빨라질 수 있다.
    • 타입 시스템에 대한 사전 지식이 적은 경우에도 접근하기 쉽다.

num = 1
print(type(num)) # <class 'int'>

num = 1.1
print(type(num)) # <class 'float'>

 

• 정적 타이핑(Static Typing)
  • 변수의 타입이 컴파일 시간에 결정된다.
  • 변수에 할당할 수 있는 값의 타입이 프로그램이 실행되기 전에 정해지며, 한번 선언된 변수의 타입은 변경할 수 없다.
  • C++, Java, Swift, TypeScript가 정적 타이핑을 사용한다.
  • 장점
    • 타입 오류를 프로그램 실행 전에 발견할 수 있다.
    • 컴파일러 최적화가 용이하여, 실행 성능이 향상될 수 있다.
    • 코드의 가독성과 유지보수성이 높아진다.

public class Main {
    public static void main(String[] args) {
        int num = 1; 
        System.out.println(num); 

        // num = 1.1; // 오류: incompatible types: possible lossy conversion from double to int

        double anotherNum = 1.1;
        System.out.println(anotherNum);
    }
}

 

 

 

 

---

 

 

 

 

컴파일

• 컴파일(Compilation)은 고급 프로그래밍 언어로 작성된 소스 코드를 컴퓨터가 직접 실행할 수 있는 저급 언어로 변환하는 과정이다.
  • 고급 프로그래밍 언어 : 인간이 이해하기 쉬운 언어. 우리가 접하는 프로그래밍 언어 대부분.
  • 저급 언어 : 컴퓨터가 이해하기 쉬운 언어. 기계어.
• 컴파일 과정은 일반적으로 소스 코드의 문법을 체크하고, 오류를 수정한 후 실행 가능한 파일을 생성하는 여러 단계로 구성된다.

 

 

인터프리터

• 고급 프로그래밍 언어로 작성된 소스 코드를 직접 실행하는 프로그램 또는 환경을 말합니다.
• 인터프리터(Interpreter) 언어는 소스 코드를 한 줄씩 읽으면서 바로 실행한다.
• Python, JavaScript등이 인터프리터 언어이다.

 

 

 

ES6

• ECMAScript 6 (ES6)는 JavaScript 언어의 표준을 위한 주요 업데이트이며, JavaScript는 ES6 이전과 이후로 나뉠 정도로 많은 새로운 기능과 개선 사항을 도입하여, 보다 강력하고 효율적인 코드 작성을 가능하게 했다

 

 

 

---

 

 

 

JavaScript 문법

사용법

• 브라우저 개발자도구의 console칸
• *.js 파일 생성 후 실행(node 설치 시)

 

세미콜론

• 세미콜론을 사용하여 statement의 끝을 나타낸다.
• 생략하여도 (대체로) 무방하다.

 

출력

• 변수 등을 확인할 때는 다음 함수를 활용한다.

console.log()

 

 

변수 선언

• python과 달리 JavaScript는 변수를 사용함에 있어 선언을 해줘야 한다.
• var
  • 초기에 JavaScript에서 변수를 선언할 때 사용했다.
  • 현재에는 아래의 let, const로 대체되어 많이 쓰이지는 않는다.
• let
  • 재선언할 수 없으며, 재할당은 가능하다
  • 블록 스코프(block-scoped) 변수를 선언한다.
• const
  • 재선언, 재할당이 불가능하다. .
  • 재선언이 불가능하므로 선언 시에 초기화해야 한다.
• 재선언 : 이미 선언된 변수를 같은 이름으로 다시 선언하는 것
• 재할당 : 이미 선언된 변수에 새로운 값을 할당하는 것

	재할당	재선언	스코프
				var	O	O	함수
let	O	X	블록
const	X	X	블록

 

 

데이터 타입

• 원시타입
  • 그 자체로 하나의 값으로 취급되며, 다른 객체나 함수와 달리 불변성(immutable)을 가진다
  • Number, String, Boolean, Undefined, Null 등이 있다.

• 참조 타입
  • 원시타입을 제외한 타입이며, 다양한 값을 포함하거나 변경할 수 있는 구조를 가진다.
  • Object, Array, Function 등이 있다.

 

 

• number : 숫자
  • NaN : Not-a-Number. 숫자 연산을 수행했지만, 그 결과가 유효한 숫자가 아닐 때 반환된다.
    • Python처럼 오류가 나지 않고 NaN이란 결과값이 나온다.

console.log('a' / 3) // NaN

 

 

 

• string : 문자열
  • 템플릿 리터럴(Template Literals)
    • 문자열 내에 변수를 포함시키는 방식이다.
    • ‘(따옴표) 대신 `(backtic)을 사용하며, 변수를 ${ }로 감싸서 사용한다.

// js
const name = 'Alex'
const greeting = `Hello, ${name}`

console.log(greeting)

name = "Alex"
greeting = f"Hello, {name}"

 

 

 

• undefined vs null
  • 둘 다 값이 없음을 나타낸다.
  • 단, undefined는 값이 할당되지 않았거나 태초부터 존재하지 않는 경우에 사용하며
  • null의 경우 값이 없음을 의도적으로 표현할 때 사용한다.
• Boolean
  • Python에서의 True, False대신 true, false를 사용한다.
  • truthy / falsy
    • Python에서는 빈 배열 [ ] 은 False 값을 가지지만, JavaScript에서는 true값을 가진다.
    • JavaScript에서 객체는 모두 true이다.

 

 

 

연산자

• == vs ===
  • python에서는 값이 같다를 ==로 표현하였지만, JavaScript에서는 ===를 활용한다.
  • == : 동등 연산자
    • 자동으로 타입 변환을 시킨다.
    • "5" == 5 가 True이다.
    • 파이썬에서는 존재하지 않는다
  • === : 일치 연산자
    • 값 및 타입이 일치하는지 확인한다.
    • "5" == 5 가 False이다.