[JavaScript] JavaScript 기본 개념

Javascript 정의

• 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
• 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어

Javascript 탄생 배경

• 1995년 넷스케이프 커뮤니케이션즈에서 브랜던 아이크가 웹 페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 개발을 위해 도입한 언어
• 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동하면서 웹 애플리케이션 개발에서 프론트엔드 영역이 주목받게 되었다.
• V8 엔진을 사용하면서 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자 경험(UX)을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착

Javascript 특징

• 가비지 콜렉터를 내장하고 있는 매니지드 언어이다.
• 자바스크립트는 객체지향 프로그래밍과 함수형 프로그래밍의 방식을 같이 사용한다.
• 정적 타입 언어이다

•  

GC(가비지 콜렉터)

• 메모리 할당을 추적하여 누구도 참조하지 않는 메모리 영역일 경우를 판단해서 회수하는 것
• 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되고 있지 않는 메모리를 해제하고 메모리 누수를 방지한다.

마크 앤 스위프(Mark-and-sweep) 알고리즘 = GC 알고리즘

1. 가비지 콜렉터는 참조되는 전역변수 루트를 획득하여 그들을 체크한다.
2. 그런 다음 루트와 그 자식들을(자식의 자식 계속 타고 검사) 검사해서 활성상태 여부를 체크한다.
3. 마지막으로 가비지 컬렉터는 활성으로 표시되지 않은 모든 메모리를 OS에 반환한다.

프로그래밍의 방식

객체지향 프로그래밍 (Object-Oriented Programming, OOP):

• 개체(Object)들을 소프트웨어 모델링의 기본 단위로 개발하는 방식
• 코드 재사용과 유지보수에 용이하다.
• 예) 자바(Java), 파이썬(Python), C++ 등

함수형 프로그래밍 (Functional Programming, FP):

• 함수를 객체로 취급하여 함수 조합을 통해 프로그램을 개발하는 방식
• 코드가 간결하고 테스트 및 디버깅이 용이하다.
• 함수평 프로그래밍은 상태 변경을 피하고 불변성을 유지하기 때문에 병렬 처리가 쉽다.
• 예) 자바스크립트(JavaScript), 하스켈(Haskell), 스칼라(Scala) 등

객체지향과 함수형 프로그래밍은 서로 상충되는 것이 아니라 보완적인 개념으로 많은 언어와 프레임워크에서 이 두 가지를 조합하여 사용중이다.

정적타입, 동적타입

정적타입언어

• 변수 선언 시점에 변수의 타입이 결정되고 변수의 타입을 변경할 수 없다.
• 변수 선언에 맞는 타입만 할당할 수 있다.
• 컴파일 시점에 타입 체크를 실행하여, 오류시 프로그램 시 실행을 막아, 일관성을 강제하여 안정적인 코드 구현을 할 수 있다.

동적타입언어

• 변수 할당 시점에 변수의 타입이 결정되고 재할당에 의해 타입을 변경할 수 있다.
• 변수 값을 추적하기 어렵고 신뢰성이 떨어질 수 있다.

프로그래밍 방식

• 함수 표현식과 함수 선언식이 있다.
• 함수 선언식보다는 함수 표현식을 지향하는 추

함수 선언식 - Function Declarations

일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다.

function 함수명() {
  구현 로직
}
Js
Copy

// 예시function funcDeclarations() {
  return 'A function declaration';
}
funcDeclarations();// 'A function declaration'Js
Copy

함수 표현식 - Function Expressions

유연한 자바스크립트 언어의 특징을 활용한 선언 방식

var 함수명 = function () {
  구현 로직
};
Js
Copy

// 예시var funcExpression = function () {
    return 'A function expression';
}
funcExpression();// 'A function expression'Js
Copy

함수 선언식과 표현식의 차이점

1. 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
2. 함수선언식은 코드를 구현한 위치와 관계없이 호이스팅에 영향을 받아 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려짐.
3. 함수 표현식은 호이스팅에 영향을 받지 않기 때문에 먼저 호출 할 경우 에러가 난다.

Hoisting(호이스팅)

• 변수 선언 중 스코프의 선두로 끌어 올려진듯 스코프 단위로 참조할 수 있는 것처럼 동작하는 특징
• 자바스크립트 엔진은 소스코드 평가과정에서 모든 선언문을 찾아내 먼저 실행하기 때문에 위치하는지와 상관없이 어디서든지 변수를 참조할 수 있게 된다.
• 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.

자바스크립트 해석기 실행 전

// 1번 코드 
logMessage();
sumNumbers();

function logMessage() {
  return 'worked';
}

var sumNumbers = function () {
  return 10 + 20;
};
Js
Copy

// 2 번 코드
function logMessage() {
  return 'worked';
}

var sumNumbers;

logMessage();// 'worked'sumNumbers();// Uncaught TypeError: sumNumbers is not a function

sumNumbers = function () {
  return 10 + 20;
};
Js
Copy

자바스크립트 해석기 실행 후

• sumNumbers 에서 var 도 호이스팅이 적용되어 위치가 상단으로 끌어올려졌다.
• 하지만, 실제 sumNumbers 에 할당될 function 로직은 호출된 이후에 선언되므로, sumNumbers 는 함수로 인식하지 않고 변수로 인식한다.

var sumNumbers;
logMessage();
sumNumbers();
Js
Copy

실행 컨텍스트

클로저

메모리 할당 방식

이벤트루프

this

이벤트 버블링 & 캡처링

모듈 시스템(ESM, CJS)

일반적인 네이밍 컨벤션

• 변수, 함수이름 ⇒ 카멜케이스
• 생성자 함수, 클래스 이름 ⇒ 파스칼 케이스(앞에 대문자)

데이터 선언 키워드

• var
  • 변수 선언
• let
  • 변수 선언
• const
  • 상수 선언

변수명 작성 규

변수 작성 규칙

1. 영문 대/소문자, 숫자, _ 또는 $만을 사용할 수 있음.
2. 변수명의 첫 글자로 숫자 사용 불가
3. 자바스크립트 예약어 사용 불가
4. 공백 사용 불가
5. 변수명은 대소문자를 구분
6. 가급적 변수명 작성 시 소문자로
7. 가급적 상수명 작성 시 대문자로