[JavaScript] 자바스크립트 개념 정리

JavaScript

모질라 재단의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다.

기본 단어

*

Parameter(매개변수): 함수 혹은 메서드를 선언(declare)할 때 정의되는 변수

*

Argument(인자, 인수): 함수또는 메서드를 호출(call)할 때 함수의 매개변수로 전달하는 값

*

Literal(리터럴): 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 => 쉽게 생각해서 값 자리에 들어가는 단일의 무언가라고 생각하면 된다
ex) 100,10.5, true, [1,2,3], function(){}

*

Expression(표현식): 값으로 평가될 수 있는 문
ex) 50+50

*

Statement(문): 프로그램을 구성하는 기본 단위이자 최소 실행 단위
ex) var add = 1+3;

*

Scope(스코프): 식별자가 유효한 범위, 실행 컨텍스트의 렉시컬 환경
전역 스코프/지역 스코프

*

Runtime(런타임): 프로그래밍 언어가 구동되는 환경

*

Property(프로퍼티): (객체 내부의) 속성 => 키:값 쌍으로 이루어져있음

*

Method(메서드): 객체에 저장된 값이 함수일 때 메서드라 함

*

Instance(인스턴스): 현재 생성된 객체를 의미
ex) Info(name,age) 생성자 함수를 통해 객체를 만들었다면, const Jamong = new Info('jamong',23);의 Jamong을 가리킨다.

*

Binding(바인딩): 식별자와 값을 연결하는 과정을 의미

*

Lexical Environment(렉시컬 환경): 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조
=> 실행 컨텍스트를 구성하는 컴포넌트

*

Closure(클로저): 함수가 선언된 렉시컬 환경
특징: 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다.

*

Hoisting(호이스팅): 모든 선언이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징.
(모든 선언: var, let, const, function(){...} 등)

---

데이터 타입

크게 원시 타입과 객체 타입으로 나눠짐

원시 타입

메모리에 실제 값이 전달됨
값을 변경하려면 새로운 메모리 주소를 사용해야 함

*

숫자 타입

*

문자열 타입

*

불리언 타입

*

undefined 타입
값이 할당되있지 않은(초기화되지 않은) 변수

*

null 타입
값이 없다는 것을 의도적으로 명시할 때 사용

*

심벌 타입
변경 불가능한 원시 타입의 값 => 중복이 불가능해 유일무이한 키 등을 만들기 위해 사용

객체 타입

메모리에 참조 값이 저장됨
객체는 변경 가능한 값이기 때문에 같은 메모리 주소에서 내용 변경 가능

객체, 함수, 배열 등 원시 타입이 아닌 모든 값은 여기에 속함

---

함수

• 함수 선언문

function add(x,y){
  return x+y;
}

• 함수 표현식

var add = function(x,y){
  return x+y;
}

• 화살표 함수

var add = (x,y) => x+y;

• 즉시 실행 함수

(function(){
  ...
}())

---

var, let, const

변수 생성 과정

1. 선언 단계
2. 초기화 단계
3. 할당 단계

함수 레벨 스코프

var는 선언과 동시에 초기화가 이루어진다.
런타임 이전에 호이스팅 발생.(undefined)

• var
  변수 중복 선언 가능

블록 레벨 스코프

let과 const는 선언 단계와 초기화 단계가 분리되어 진행된다.
런타임 이전에 호이스팅 발생. but 호이스팅이 발생하지 않는 것처럼 동작함.

• let
  변수 중복 선언 불가능
• const
  변수 중복 선언 불가능/ 재할당 불가능

---

var, let, const의 차이점 (출처)

1. var는 함수 레벨 스코프이고 let, const는 블럭 레벨 스코프입니다.

2. var로 선언한 변수는 선언 전에 사용해도 에러가 나지 않지만 let, const는 에러가 발생합니다.

3. var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나지 않지만 let, const는 이미 존재하는 변수와 같은 이름의 변수를 또 선언하면 에러가 납니다.

4. var, let은 변수 선언시 초기 값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 합니다.

5. var, let은 값을 다시 할당할 수 있지만 const는 한번 할당한 값은 변경할 수 없습니다(단, 객체 안에 프로퍼티가 변경되는 것까지 막지는 못합니다).

---

객체

const counter = {
  num:1,
  increase(){
    this.num++
  }
}

num:1과 같이 키:값의 쌍을 프로퍼티라고 한다.
incrase(){...}부분은 메서드라고 한다.

생성자 함수로 객체 생성

function Info(name,age){
  this.name = name;
  this.age = age;
}
const jamong = new Info('jamong',23); // {name: 'jamong', age: 23}

일급 객체

일급 객체의 조건

• 런타임에 생성 가능
• 변수나 자료구조에 저장 가능
• 함수의 매개변수에 전달 가능
• 함수의 반환값으로 사용 가능

=> 따라서 함수는 일급 객체이다.

argument 객체

함수가 호출되면 인수 정보를 argument 객체를 통해 확인할 수 있다.

객체에서의 this

지금 동작하고 있는 코드를 가지고 있는 객체를 의미.

function Info(name,age){
  this.name = name;
  this.age = age;
}

this.name은 지금 동작하고 있는 객체의 name을 의미

---

프로퍼티 어트리뷰트

property attribute는 내부슬롯입니다. 따라서 이 값들에는 직접 접근 할 수 없습니다.

• [[Value]]
• [[Writable]]
• [[Eunumerable]]
• [[Configuable]]

---

프로토타입

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다.

*

객체를 상속받기 위해 프로토타입의 방식을 사용한다.

*

모든 객체는 하나의 프로토타입을 가진다.

*

프로토타입 기반 언어:
든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가지는 언어

상속과 프로토타입

function Info(name,age){
  this.name = name;
  this.age = age;
}
Info.prototype.getData = function(){
  return `name: {this.name}, age: {this.age}`;
}
const jamong = Info('jamong', 23);
const apple = Info('apple', 31);

console.log(jamong.getData()); // "name: jamong, age: 23" 
console.log(apple.getData()); // "name: apple, age: 31" 

Info.prototype 객체를 사용해 getArea 메서드를 각 인스턴스가 서로 공유하도록 만들었다.
이를 통해 공통된 기능을 중복 생성하지 않게 방지한다.

이러한 과정을 Info 생성자가 생성한 인스턴스들이 모두 Info.prototype에 있는 모든 프로퍼티와 메서드를 상속받는다고 한다.

자세한 정보:  https://iamsjy17.github.io/javascript/2019/06/10/js33_17_prototype.html

프로토타입 체인

특정 객체의 프로퍼티나 메소드에 접근했는데 해당 프로퍼티가 존재하지 않는다면 [[Prototype]] 내부 슬롯의 참조를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것

• 단방향 연결 리스트로 구성되어 있음.

---

this

this 바인딩은 일반 함수 호출, 메서드 호출, 생성자 함수 호출, apply/call/bind 메서드에 의한 호출 4가지에 의해 달라진다.

this가 필요한 이유
메서드가 자신이 속한 객체의 프로퍼티를 참조하기 위해선, 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야함.
=> 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수

this가 가리키는 값은 함수 호출 방식에 의해 동적으로 결정된다.

일반 함수 호출 & 기본 상태

기본적으로 this에는 전역 객체가 바인딩됨.

console.log(this); // => window

일반 함수에서도 this에는 전역 객체가 바인딩된다.

function Info(name){
  console.log(this); // => window
  return name;
}

메서드 호출

메서드 내부의 this는 메서드를 호출한 객체를 가리킨다. (여기서는 Info 객체)

const Info = {
  name: 'Jamong';
  getName(){
    console.log(this); // => {name: 'Jamong', getName: f}
  }
}

생성자 함수

생성자 함수 내부에서의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.

function Info(name,age){
  this.name = name;
  this.age = age;
  console.log(this); // Info {name: 'jamong',age: 23}
}
const jamong = new Info('jamong',23);

화살표 함수

화살표 함수는 스스로의 this와 argument를 가지지 않는다.
따라서, 화살표 함수 내부에서의 this는 함수가 정의된 스코프에 존재하는 this를 가리킨다.

let country = {
  name: 'korea',
  cities: ["Seoul", "Busan", "Namyangju"],

  showList() {
    this.cities.forEach(
      city => console.log(this.name + ': ' + city)
    );
  }
};

country.showList();

*

this.cirites.forEach()에서의 this는 메서드 내부의 this이므로, 메서드를 호출한 객체를 가리킨다.(country)

*

city => console.log(this.name ...)에서의 this는 화살표 함수 내부의 this로, 화살표 함수는 스스로의 this를 가지지 않아 메서드 내부의 this로 판별된다.(country)

즉, 화살표 함수 내부의 this는 바로 바깥쪽 스코프의 this와 동일한 객체를 가리킨다.

 

실행 컨텍스트

실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 단순하게 코드의 실행 환경이라고 생각할 수 있다.

실행 컨텍스트 스택에 현재 실행중인 컨텍스트가 생성되고 삭제되며, 각 소스코드는 소스코드 평가 과정과 소스코드 실행 과정을 거친다.

실행 컨텍스트에는 해당 컨텍스트의 렉시컬 환경이 바인딩되며, 렉시컬 환경은 환경 레코드를 통해 변수와 함수 등이 저장된다.

 

 

참고: https://velog.io/@wkahd01/JS-실행-컨텍스트와-클로저