JS 개념 사전

자몽·2021년 12월 31일
JavaScript
5

JavaScript

목록 보기
21/25
post-thumbnail

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(){...} 등)

  • Higher order 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(){
  ...
}())

순수 함수

어떤 외부 상태에 의존하지 않고, 변경하지도 않는 함수를 순수 함수라 한다.
=> 부수 효과를 최소화해 불변성을 지행하며, 안정성을 높일 수 있다.

함수에서의 this

// 내용 추가 예정

var, let, const

변수 생성 과정

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

함수 레벨 스코프

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

  • var
    변수 중복 선언 가능

블록 레벨 스코프

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

  • 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을 의미

프로퍼티 어트리뷰트

// 내용 추가 예정

프로토타입

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

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

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

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

메서드

const Info = (function(){
  function Info(name){ // 생성자
    this.name = name;
  }
  Info.prototype.print(){ // 프로토타입 메서드
    console.log(`name: ${this.name}`);
  }
  Info.printInfo(){ // 정적 메서드
    console.log('printInfo()');
  }
  return Info;
}());

상속과 프로토타입

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-실행-컨텍스트와-클로저

클래스

함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이다.

클래스를 통해 객체를 더욱 자유롭게 생성하고 상속할 수 있게 되었다.

  • 클래스는 함수로 평가되기 때문에 일급 객체이다.

  • 클래스에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드 3가지이다.

클래스의 호이스팅

클래스의 호이스팅은 const, let 키워드로 선언한 변수처럼 호이스팅된다.

메서드

  • constructor(생성자)
    인스턴스를 생성하고 초기화하기 위한 특수 메서드
    클래스 내에 한 개만 존재한다.

  • 프로토타입 메서드
    클래스는 프로토타입 메서드를 명시해주지 않아도, 기본적으로 프로토타입 메서드가 된다.

  • 정적 메서드
    인스턴스를 생성하지 않아도 호출할 수 있는 메서드

class Info{
  constructor(name){ // 생성자
    this.name = name;
  }
  print(){ // 프로토타입 메서드
    console.log(`name: ${this.name}`);
  }
  static printInfo(){ // 정적 메서드
    console.log('printInfo()');
  }
}

프로퍼티

  • 인스턴스 프로퍼티
    클래스가 생성한 인스턴스 프로퍼티: constructor 내부에서 this에 추가한 프로퍼티

  • 접근자 프로퍼티 (get, set)
    자체적인 값을 가지지 않고, 다른 데이터 프로퍼티의 값을 읽거나(get) 저장할 때(set) 사용하는 접근자 함수

상속

extends를 통해 상속을 구현한다.

상속을 통한 클래스 확장은 코드 재사용 관점에서 매우 유용하다.

super

  • super 호출: super 클래스의 constructor를 호출한다.
  • super 참조: super 클래스의 메서드를 호출한다.

배열

자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체이다.

일반적인 배열과 달리 희소 배열의 형태를 띄고있다.

희소 배열
배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 가지고 있지 않아도 되며, 연속적으로 이어진다는 보장이 없다.

배열의 메서드

  • Array.pop
    배열의 가장 오른쪽 요소 제거
  • Array.push
    배열의 가장 오른쪽에 요소 추가
  • Array.shift
    배열의 가장 왼쪽 요소 제거
  • Array.unshift
    배열의 가장 왼쪽에 요소 추가

배열 순회 메서드

  • Array.forEach()
    for문을 대체할 수 있는 고차 함수로 배열의 각 요소에 대해 콜백을 실행한다.
    => 단순히 배열을 순회할 때 사용
  • Array.map()
    배열의 각 요소에 대해 콜백을 실하고, 해당 실행 결과를 모은 새 배열을 return한다.
    => 배열 순회 후 새로운 배열을 얻고자 할 때 사용
  • Array.reduce()
    배열의 각 요소에 대해 주어진 reducer 함수를 실행하고 결과값을 반환한다.

Set, Map

// 추후 추가 예정

정규표현식(RegExp)

브라우저의 렌더링 과정

// 추후 추가 예정

비동기 처리

// 추후 추가 예정

DOM

// 추후 추가 예정

이벤트

// 추후 추가 예정

REST API

// 추후 추가 예정

모듈

// 추후 추가 예정

profile
자몽
꾸준하게 공부하기
이전 포스트

JS 실행 컨텍스트와 클로저

다음 포스트

프론트엔드 면접 문제 은행 질문 답변

3개의 댓글

comment-user-thumbnail
지현우
2022년 1월 6일

안녕하세요 잘봣습니다. 마크다운코드내에서 줄바꿈은 어떻게 하는건지 알수잇을까요~

1개의 답글