본문 바로가기
HTML∙CSS∙JS

JS 기본 개념 정리 1

by omini004 2025. 4. 2.

변수와 상수

변수

:변하는 값

var,let

 

상수

: 변하지 않는 값

const 

 

-> let과 const ES6이후에 나왔다.

그래서 지금은 var을 잘 사용하지 않게 되었는데 그 이유가 var은 같은 이름의 변수에 다른 타입의 값이 할당되기 때문에 오류나 버그를 일으킬 수 있기 때문이다.

 

자료형

기본 자료형과 참조 자료형

 

기본자료형

string, number,boolean, undefined, null, sumbol, bigint

bigint는 23년도에 추가 되었습니다.

 

참조 자료형

배열, 함수, 객체

 

연산자

산술 연산자

+,-,*,/,%

증감 연산자

++,--

비교 연산자

>, < ,=>,<= ...

대입 연산자

=, +=, -=. ...

삼항 연산자

조건 ? 참 : 거짓

논리 연산자

!,&&,||

 

반복문

 

do..while, while, for, for ..in, for..of

for..in

배열, 객체 

인덱스나 키값을 이용한 반복시 사용하기 좋다.

for..of

배열만

실제 값에 접근 한다.

 

함수

 

함수 선언문

function sum() {}

바닐라 Js에서 많이 씀 관례여서 자신한테 맞는거 쓰는게 좋다.

 

함수 표현식

const sum = function sum() {}

함수를 변수에 담은 것

현업에서 잘 쓰지 않는다. (사실 개인 취향임..) 

 

화살표 함수

const sum = () =>{};

react에서 많이 씀

변수에 담는 것 때문에  함수 표현식인가? 라고 생각할 수 있지만 함수 표현식이 아니다!

 

 

 

js -> 인터프리터 언어 (순차적으로 실행되는 언어) ex) java, html, js

실행 컨텍스트란?

자바스크립트 코드가 실행되는 독립적인 공간

(하나의 컨테이너에 코드를 집어넣는다고 생각하면 쉽다.)

실행이 끝나면 컨테이너는 없어진다.

 

코드가 실행되면서 실행 컨텍스트가 생기는데 이 것이 콜스택으로 쌓이면서 순차적으로 실행되는 구조이다.

하지만 setTimeout을 사용하게되면 비동기로 동작하는 것을 볼 수 가있다. 

왜 그럴까?
그 이유는 setTimeout도 똑같이 js콜스택에 쌓이지만 실행시 web api로 넘어가서 처리되기 때문에 비동기적으로 보이는 것이다.

 

전역 실행 컨텍스트

고유하고 1개 밖에 없다.

 

함수 실행 컨텍스트

함수가 실행될때마다 생김

 

 

 record

식별자를 정의하고 바인딩 하는 역할
내가 실행할 코드를 훑어보며 선언 부분을 record에 기록

 

 

호이스팅이란?

선언부분을 최상단으로 끌어올리는 현상
var만 해당하는 부분 let과 const는 에러가 난다.

왜냐?

let과 const도 var처럼 호이스팅되어 메모리에 등록되지만, TDZ(Temporal Dead Zone, 임시 사각지대) 에 있기 때문에
선언 이전에는 접근할 수 없어서 에러가 발생합니다.

 

outer

연결 통로 역할을 한다.

자신의 레코드 값에 필요한 변수가 없을때 연결되어 있는 다른 레코드를 통해 해당 변수를 확인하고 값을 빌려와주는 역할을 함

outer라는 이름처럼 자신보다 바깥에 있는 값은 할당 받을 수 있지만 자신을 기준으로 안쪽의 함수의 값은 빌려올 수 없다.

 

클로저란?

클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다. (Lexical environment = outer + record)

콜스택에서 정상적으로 제거되지 못한 현상이라고도 할 수있다.

애매한 관계의 식별자가 남아있으면 임시로 메모리에 저장을 해놓음

외부에서 이 메모리에 접근하지 못함

불필요한 메모리가 남아 있는 것을 제거해줘야함 -> 사용하지 않는 메모리가 많다면 '메모리 누수'라고 부른다.

변수 = null; 로 하면 메모리가 초기화 되는 것이다.

 

가비지 컬렉터란?

더이상 사용되지 않는 메모리를 찾아서 제거해주는 것

자바는 개발자가 직접 제거해야하지만

자바스크립트는 js엔진이 자동으로 제거해준다.