[Javascript] 1. What is JS?

시작에 앞서...

데이터 분석만 주로 해왔던 나는 분석 원툴로 취업시장에 도전하고 있었다.
그동안 컨셉을 컴퓨터 조금 아는 데이터 분석가로 밀고 왔지만 이제는 분석 결과를 개발 단계에 직접 적용할 수 있는 분석가 컨셉을 갖추어야 할 필요성을 느꼈다.
지난 4개월 간 자연어 처리 전문가 과정 중 프로젝트를 진행할 때 번역 모델을 배포해야 했었다.
당시 BE, FE라고는 전혀 알지 못했었기에(지금도 마찬가지...) 급한 불부터 끄자는 마음으로 flask와 gunicorn으로 매우매우 간단한 서버와 배포 환경을 만들었었다.
이 과정에서 서버를 만들고 뿌리는게 생각보다 재미있었다.
이에 앞으로 백엔드 소양까지 갖춘 분석가로의 방향을 새로 다져보고자 한다.
물론 분석 쪽도 포기하진 않을 것이다!
Javascript는 사실상 처음 보기 때문에 이 언어만의 특징(?)과 동작 원리들을 위주로 정리하고자 한다한

Javascript란?

• HTML, CSS와 함께 Web을 구성하는 요소 중 하나
• 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
• Interpreter 언어
• 멀티 패러다임 프로그래밍 언어 : 명령형, 함수형, 프로토타입 기반 OOP 지원

변수 선언

1. 특징

• Hoisting : 변수 선언문이 코드 선두로 끌어 올려진 것 처럼 동작
  • 변수 선언은 런타임 이전에 실행 -> 변수 선언은 소스코드 위치와 무관하게 다른 코드보다 먼저 실행
  • 단, 값의 할당은 런타임에 실행됨

  console.log(temp); // 흐름 상 temp가 선언되지 않았지만 Hosting에 의해 temp는 undefined로 정의
  var temp = 80;
  var temp;
  console.log(temp) // 80 출력

2. 식별자 네이밍 규칙

• 문자, 숫자, _, $ 포함 가능
• 숫자로 시작 불가
• 예약어 사용 불가
• Convention
  • 변수, 함수 이름 : camelCase
  • 생성자, 클래스 이름 : PascalCase

종류

1. var

• 중복 선언 가능
• function level scope : 함수 외부의 code block은 global variable로 처리
• Hoisting을 명시적으로(?) 확인 가능
• JS engine에 의해 선언과 초기화가 한 번에 진행 -> undefined로 초기화
• ES6를 사용한다면 var는 사용 제한

  // function level scope 예시
  // var로 선언되었기 때문에 런타임 이전에 선언 및 undefined로 초기화
  var i = 0
  for (var i = 0; i < 10; i++) {
  		  console.log(i);
  }
  console.log(i); // 10

2. let

• 중복 선언 불가, 재할당 가능

• block level scope : 제어문, 함수 몸체 등 code block은 local variable로 처능

• Hoisting이 발생하지 않는 것 같지만 발생함화

• 선언과 초기화가 분리되어 진행 -> 선언 단계가 먼저 실행되지만 초기화는 선언문에 도달했을 때 실행

• 초기화 이전에 접근 시 ReferrenceError 발생

• 일시적 사각지대(Temporal Dead Zone) : 스코프 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간

  // scope, 중복 선언 예시
  let example = 0;
  {
    let example = 1;
    let newExample = 3;
  }
  let example = 321; // Syntax error, 중복 선언
  console.log(example); // 0
  console.log(newExample); // ReferenceError, block level scope

  // TDZ 예시
  // Runtime 이전에 선언 실행, variable initialize X
  // 변수 hello의 TDZ 시작
  
  console.log(hello); // ReferenceErro화
  
  // 변수 hello의 TDZ 끝
  let hello;  // 초기화
  console.log(hello); // undefined
  
  hello = 3; // 할당
  console.log(hello);

3. const

• 중복 선언 불가
• 선언과 동시에 초기화해야 함
• let으로 선언한 변수와 유사한 특징을 가짐 (Hoisting, Block level scope 등능
• 재할당 불가능
• 대문자와 언더스코어로 이루어진 명명규칙이 일반적 (SNAKE_CASE)