JS 용어 정리

개발 log·2021년 9월 6일

JS 지식

목록 보기

1/36

변수

하나의 값을 저장하기 위해 확보한 메모리 공간 자체

값

메모리 공간 안에 들어있는 것

메모리

값들을 저장하기 위한 공간

리터럴

사람과 컴퓨터가 모두 이해할 수 있는 표기법

값을 만들어내는 표기법

메모리주소

포인터

IPO 모델

Input - Process - Output

동일한 Input이 들어갈 때 동일한 Output이 나오면 베스트

데이터 타입

원시타입과 객체타입 총 7개로 이루어진 값의 종류

심벌타입

ES6에서 추가된 7번째 타입으로, 변경 불가능한 원시 타입의 값

기존 타입의 원시 값은 리터럴을 통해 생성했지만 심벌은 Symbol() 함수를 호출해 생성함

이 때 생성된 심벌값은 외부에 노출되지 않고 다른 값과 절대 중복되지 않는 유일무이한 값

객체타입

JS의 데이터 타입이 원시 타입과 객체타입으로 분류되어있는 이유는 무엇일까?

데이터 타입의 필요성

값을 저장할 때 확보해야 하는 메모리공간의 크기를 결정하기 위해
값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

JS 숫자타입

C나 JAVA의 경우 정수와 실수를 구분해서 int, long, flat, double 등과 같은 다양한 숫자 타입을 제공하지만 JS는 배정밀도 64비트의 부동소수점 형식의 모든 수를 실수로 처리하는 하나의 타입만 제공한다.

숫자 타입은 추가적으로 아래의 세가지 특별한 값도 표현할 수있음

Infinity : 양의 무한대
-Infinity : 음의 무한대
NaN(Not a Number) : 산술연산불가

라인 피드

커서를 정지한 상태에서 종이를 한 줄 올리는 것

캐리지 리턴

종이를 움직이지 않고 커서를 맨 앞줄로 이동하는 것

부수효과

피연산자의 값을 변경하는 효과

부수효과가 있는 연산자는 할당연산자(=), 증가/감소 연산자(++/--), delete 연산자

동등비교(==)연산자의 원리

좌항과 우항의 피연산자를 비교할 때 암묵적 타입변환을 통해 타입을 일치시키고 같은 값인지 비교

일치비교(===)연산자의 원리

좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 true를 반환

연산자 우선순위

()
new(매개변수 존재), ., [](프로퍼티접근), ()(함수호출), ?, .(옵셔널 체이닝 연산자)
new(매개변수 미존재)
x++, x--
!x, +x, -x, ++x, --x, typeof, delete
**(이항 연산자 중에서 우선순위가 가장 높음)
*, /, %
+, -
<, <=, >, >=, ㅑㅜ, ㅑㅜㄴㅅ뭋댈
==, !=, ===, !==
??(null 병합 연산자)
&&
||
? ... : ...(삼항연산자)
할당 연산자(=, +=, -=, ...)
,(쉼표 연산자)

폴스루

var month = 11;
var monthName;

switch (month) {
  case 1: monthName = 'January';
  case 2: monthName = 'February';
  case 1: monthName = 'March';
  case 1: monthName = 'April';
  case 1: monthName = 'May';
  case 1: monthName = 'June';
  case 1: monthName = 'July';
  case 1: monthName = 'August';
  case 1: monthName = 'September';
  case 1: monthName = 'October';
  case 1: monthName = 'November';
  case 1: monthName = 'December';
  default: monthName = 'Invalid month';
}

console.log(monthName); // Invalid month

위의 예제를 실행하면 'November'가 출력되지 않고 'Invalid month'가 출력됨

그 이유는 switch문의 표현식의 평가 결과와 일치하는 case 문으로 실행흐름이 이동했지만 문을 실행한 후 switch 문을 탈출하지 않고 switch 문이 끝날 때까지 모든 case 문과 default 문을 실행했기 때문

즉, case문으로 실행흐름이 이동되어 결과를 반환한 후 탈출하지 않고 default문까지 실행흐름이 이동되는 것을 폴스루라고 함

레이블 문

식별자가 붙은 문

// foo 라는 레이블 식별자가 붙은 레이블 문
foo: console.log('foo');

단축평가

표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것임

객체

프로퍼티의 집합이고 프로퍼티는 키와 값으로 구성되어 있다
프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부름

메서드

프로퍼티를 참조하고 조작할 수 있는 동작(behavior)

클래스

인스턴스를 생성하기 위한 템플릿의 역할

인스턴스

클래스에 의해 생성되어 메모리에 저장된 실체

객체지향 프로그래밍에서의 객체

클래스와 인스턴스를 포함한 개념

JS 객체 생성방법

객체 리터럴
Object 생성자 함수
생성자 함수
Object.create 메서드
클래스(ES6)

상수

재할당이 금지된 변수

// const 키워드를 사용해 선언한 변수는 재할당이 금지됨
const obj = {};

// const 키워드를 사용해 선언한 변수에 할당한 원시값(상수)은 변경할 수 없다.
// 하지만 const 키워드를 사용해 선언한 변수에 할당한 객체는 변경할 수 있다.
obj.a = 1;
console.log(obj); // {a: 1}

참조값

생성된 객체가 저장된 메모리 공간의 주소

함수

일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행단위로 정의한 것

함수는 함수 이름으로 호출하는 것이 아닌 함수 객체를 가리키는 식별자로 호출함

var foo();

위와 같은 경우는 JS엔진이 암묵적으로 식별자를 함수이름으로 생성해준 것임

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

함수선언문은 표현식이 아닌 문

함수의 장점

코드의 재사용성
유지보수의 편의성
코드의 신뢰성
코드의 가독성

매개변수

함수로 전달된 값을 가리키기 위한 변수

전달인자(argument)

함수에 전달되는 값

arguments는 객체 argument는 프로퍼티

반환문

함수의 실행을 중단하고 함수 몸체를 빠져나감
return 키워드 뒤에 오는 표현식을 평가해 반환함

this

this에 바인딩 될 객체는 호출 시점에 결정됨
정확히는 함수 코드 평가 때 결정됨

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조변수

렉시컬 스코프

함수 정의가 평가되어 함수객체가 생성되는 시점에 상위 스코프를 결정함

함수의 상위 스코프를 결정하는 방식

실행 컨텍스트

소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역

식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.

식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고
코드 실행 순서는 실행 컨텍스트 스택으로 관리한다.

실행 컨텍스트 스택

코드의 실행 순서를 관리

실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트

렉시컬 환경

실행 컨텍스트를 구성하는 컴포넌트

식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조
스코프와 식별자를 관리함

환경 레코드

스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소

외부 렉시컬 환경에 대한 참조

상위 스코프를 가리키는 말

상위 스코프란 외부 렉시컬 환경, 즉 해당 실행 컨텍스트를 생성한 소스코드를 포함하는 상위 코드의 렉시컬 환경

외부 렉시컬 환경에 대한 참조를 통해 단방향 링크드 리스트인 스코프 체인을 구현

클로저

함수가 자유변수에 대해 닫혀있다 라는 의미
자유변수에 묶여있는 함수

중첩 함수가 상위 스코프의 식별자를 참조하고 있고 중첩 함수가 외부 함수보다 더 오래 유지되는 경우에 한정한다.

자유변수

클로저에 의해 참조되는 상위 스코프의 변수

캡슐화

객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있느 동작인 메서드를 하나로 묶는 것

정보은닉

객체의 특정 프로퍼티나 메서드를 감추는 것

외부에 공개할 필요가 없는 구현의 일부를 외부에 공개되지 않도록 감추어 적절하지 못한 접근으로부터 객체의 상태가 변경되는 것을 방지하여 정보를 보호
객체 간의 상호 의존성(결합도)을 낮추는 효과

함수 구분

ES6 함수의 구분	constructor	prototype	super	arguments
일반함수	O	O	O	O
메서드	X	X	O	O
화살표함수	X	X	X	X

내부슬롯 [[HomeObject]]

자신이 바인딩한 객체를 가리키는 내부 슬롯

개발 log

프론트엔드 개발자

다음 포스트