JS 기초 1일차

김동현·2022년 11월 18일

javascript

목록 보기
14/33

느슨한 타입의 동적언어

자바스크립트는 느슨한 타입의 동적언어입니다. javascript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능합니다

ex)
let foo = 42 // foo숫자
foo = 'bar' // foo 문자열
foo = true // foo 불리언

자바스크립트의 형변환

  • 문자형으로 변환 : String(value)
  • 숫자형으로 변환 : Number(value
    -- 숫자형 :
    - undefined : NaN 출력
    - null : 0 출력
    - true and false : 1과 0
    - string : 문자열의 처음과 끝 공백을 제거후 남아있는 문자열 없으면 0
    있으면 NaN으로 출력됩니다.
  • 불린형으로 변환 : Boolean(value)

== , === 차이

== : 서로 다른 유형의 두 변수의 값 비교
=== : 엄격한 비교 (값과 자료형이 일치)

느슨한 타입의 동적언어의 문제점은 무엇이고 보완할 수 있는 방법

자바스크립트는 느슨한 타입의 동적 언어이기 때문에 변수생성 시 변수의 타입을 미리 선언하지 않아도 된다는 장점이 있지만 많은 기능 명세서와 API가 오고 가는 대형프로젝트에서 타입이 올바른지 체크하는 것이 매우 까다롭고실행 도중에 변수에 예상치 못한 타입이 들어와 타입에러를 발생함

동적타입 언어는 런타임 시 확인할 수 밖에 없기 때문에, 코드가 길고 복잡해질 경우 타입 에러를 찾기가 어려워 짐

해결방법 : 정적 타입 체크와 TypeScript 나 Flow 등을 사용

undefined 와 null의 미세한 차이점

undefined는 변수를 선언하고 값을 할당 X , null은 변수는 선언 했지만 빈 값을 할당한 상태

기본형 데이터와 참조형 데이터

기본형 타입

할당이나 연산시 데이터가 복제
종류 : 숫자, 문자열, 불리언, null, undefined, 심볼

기본형 타입의 메모리 저장 방식

  • 메모리 할당 시 두 영역을 사용
  • 식별자가 할당되는 변수 영역
  • 데이터 값이 담기는 데이터 영역

변수 영역 : 식별자, 데이터 영역의 주소값으로 이루어짐
데이터 영역 : 데이터가 담겨 있음

** 불변성 : 효울적으로 데이터를 저장하기 위햐서
변수와 상수는 변수 영역 메모리에 데이터 할당 후 재할당이 되는지에 대한 여부로 구분되는 것
불변성은 데이터 영역의 메모리에 대한 것

데이터 영역의 데이터는 한번 생성 되었을 경우 수정이 안되며(불변성)
새로운 데이터일 경우 비어있는 데이터 영역에 새로 할당

참조형 타입

참되된다라는 의미를 지님
종류 : 객체, 배열, 함수, 날씨, 정규표현식, Map, WeakMap, Set, WeakSet

참조형 타입은 영역이 하나더 존재 : 객체의 변수(프로퍼티)영역

불변객체

불변 = 변하지 않는다!!

불변객체 = 변하지 않는 객체 즉, 이미 할당된 객체가 변하지 않는 뜻
Js : const , Object.freeze()

const 는 재할당 불가, Object.freeze()의 객체 속성 변경불가

불변갹체 만드는 법 const 키워드로 변수를 상수화 시킨후, Object.freeze()로 해당 변수를 동결객체로 만들면
객체의 재할당과 객체의 속성 둘 다 변경불가능한 불변객체가 된다!!

얕은 복사와 깊은 복사

얇은 복사 : 참조타입 데이터가 저장한 데이터 주소값을 복사
Object.assign()을 이용하면 객체 자체는 깊은 복사가 수행되지만, 2차원 이상의 객체는 얕은 복사가 수행됨
전개 구문 : assign()과 같이 복사한 객체 자체는 깊은 복사이지만 내부의 객체는 얕은 복사

깊은 복사 : 새로운 메모리 공간을 확보해 완전히 복사를 의미
재귀 함수 isCopyObk를 만든후 값을 복사
JSON 객체 이용 : JSON.parse() , JSON.stringify() 이용

스코프

  • 자바스크립트의 스코프는 함수 레벨 스코프를 따른다
  • 같은 함수 레벨에 존재하면 값을 참조
  • ES6에서 let 키워드 도입되면서 블록 레벨 스코프를 사용할 수 있게 됐다.

전역스코프 : 어디서든 참조 가능
전역변수 : 전역 스크프를 갖는 잔역 변수, 어디디느 참조

지역스코프 : 함수 자신과 하위 함수에서만 참조 가능
지역 변수 : 함수 자신과 하위 함수에서만 참조 가능

호이스팅

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것

변수 선언 형식에 따른 초기화
var : 호이스팅 시 undefined로 변수 초기화
function : 선언된 위치와 상관없이 동일하게 호출
let, const : 호이스팅 시 변수를 초기화 X

TDZ(Temporal Dead Zone, 일시적 사각지대)

변수를 선언 및 초기화 하시전에 사용하게 되면 TDZ상태에서 사용하는 것

함수 선언문과 함수 표현식에서 호이스팅 방식의 차이

함수 선언문은 함수 전체를 호이스팅 하며 정의돈 볌위으 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용 할 수 있다는 것

함수 표현식은 별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게 됩니다.

실행 컨텍스트와 콜 스택

실행 컨텍스트 : 자바스크립트 코드가 실행되는 환경을 의미, 두가지 타입의 실행컨텍스트가 있습니다.

전역 실행 컨텍스트 : 전역 객체를 생성하고 this 값에 전역객체를 참조/ 전역 실행 컨텍스트는 콜 스택에 가장 먼저 추가 되며 종료 될 때 삭제

함수 실행 컨텍스트 : 함수가 실행 될 때 마다 정의되는 Context / 함수 실행 컨텍스트는 매 실행시 마다 정의 되며 함수 실행이 종료되면 콜 스택에서 제거

콜스택 : js엔진은 생성된 컨텍스트를 관리하는 목적 / JS는 단일 스레드 형식이기 때문에 런타임에 단 하나의 call stack이 존재
코드가 실행되면서 생성되는 실행 컨텍스트를 저장하는 자료구조

스코프 체인

자바스크립트 엔진은 식별자를 찾을 대 일단 자신이 속한 스코프에서 찾고 그 스코프에 식별자가 없으면 상위 스코프에서 다시 찾아 나간다. 이현상을 스코프 체인 이라고 하며 스코프가 중첩되어있는 모든 상황에서 발생

변수 은닉화

직접적으로 변경되면 안되는 변수에 대한 접근을 막는 것을 은닉화
그것을 가능케 하는 것을 클로저를 생성하여 함수 내부적으로 접근이 가능합니다.

let b = 1;

function hi () {

const a = 1;

let b = 100;

b++;

console.log(a,b);

}

console.log(b); 1값이 나옴

hi(); // hi() 함수실행해서 1,101 값이 나옴

console.log(b); 1값이 나옴
1=="1" // true , ==은 값이 같으면 참으로나옴
1==="1" // false , ===은 값과 자료형이 같으면 참이 나옴
profile
꺽이지 않는 마음

0개의 댓글