[Javascript] Javascript의 특징

Javascript의 정의

• Web기술의 기반이 되는 언어로, html문서의 컨텐츠를 동적으로 변경할 수 있게 해주는 언어
• 버튼 클릭, 내용 입력, 알림창 출력 등등..

 

 

자바스크립트 엔진

• 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터. 주로 웹 브라우저에서 사용됨(크롬의 V8, 엣지의 Chakra 등)

❓자바스크립트 엔진의 구조

• 메모리 힙
  • 메모리 할당이 일어나는 곳
  • 객체, 배열, 함수 등 참조타입의 데이터가 저장됨
  • 참조타입의 데이터가 저장된 주소값은 콜스택의 변수 식별자의 값으로 각각 저장됨 -> 함수 실행 시 주소값을 통해 어떤 참조타입인지 찾아감
• 콜 스택
  • 코드를 한 줄씩 읽으면서 수행할 작업들을 쌓아나가며, 메모리 힙에서 작업 수행에 필요한 것들을 찾아내서 작업을 수행
  • 선입후출(Last In First Out)구조
  • 콜 스택에서 함수는 전역함수 -> 지역함수 순으로 쌓인다. 특정 함수의 실행이 끝나면 해당 함수를 콜 스택에서 제거

 

 

Javascript언어의 특징

 

1. 인터프리터 언어

• 기본적으로 인터프리터 언어 이지만, V8엔진의 경우에는 JIT(Just-in-Time)컴파일러를 이용하여 성능을 최적화 함.
• ❓인터프리터 vs 컴파일러 

  컴파일러 언어	인터프리터 언어
  코드 실행 전, 컴파일 타임에 코드 전체를 한 번에 기계어로 변환 후 실행파일을 만듬	코드가 실행 단계인 런타임에서 한 줄씩 기계어로 변환하여 실행
  컴파일 단계와 실행 단계가 분리 되어있음	인터프리팅과 실행이 분리 되어있지 않고 한 줄씩 실행
  컴파일 작업은 한 번만 수행	코드를 실행할 때마다 인터프리팅 과정도 수행됨
  실행 시에는 최적화된 실행파일을 사용하므로 코드 실행속도가 빠름	코드 실행 시에 인터프리팅 과정도 수행되므로 코드 실행 속도가 느림

 

2. 동적 프로토타입 기반 객체 지향 언어

• [프로토타입 이해하기]블로그
  

• 자바 스크립트에는 Java언어처럼 Class 개념이 없음(ES6부터 생긴 Class라는 문법은 존재함). 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어

 

3. 동적 타입 언어

let num = 1;
const word = 'A';

• 변수를 선언할 때 타입을 지정해주지 않음.
• Typescript : Javascript에 타입을 부여하여 컴파일 단계의 오류를 포착할 수 있게 해줌. 코드의 가독성 증가 및 디버깅 용이

 

4. 함수가 일급 객체

• Javascript에서 함수는 객체이며, 함수에 함수를 인수로 넘길 수 있음.
• ❓일급객체란
  • 변수에 할당(assignment)할 수 있음
  • 다른 함수를 인자(argument)로 전달 받을 수 있음
  • 다른 함수의 결과로 반환(return)받을 수 있음

// 1. calculate라는 변수에 "함수"를 할당

const calculate = function (num) {
  return num + 2;
};

console.log(calculate(2));  // 4

// 2. 다른 함수를 인자로 전달 받기

function calculate(num) {
  return num + 2;
}

function newCalculate(func, num) {
  return func(num) + 2;
}

console.log(newCalculate(calculate, 2)); // 6

// 3. 다른 함수의 결과로 반환

const add = (num1) => {
  return (num2) => {
    console.log(num1 + num2);
  };
};

add(2)(3);  //5
// 처음에는 이해가 잘 안됬는데
// "add(2)"를 통해 add라는 함수의 내부에 접근하고
// "add(2)"가 "num2라는 매개변수가 필요한 함수를 반환"하므로, 
// "add(2)"자체가 새로운 함수식이 되어 "add(2)(3)"이 "newAdd(3)"처럼 쓰였다고 보면 됨.