[JS] JAVASCRIPT 기본 개념 - 1

안치영·2022년 9월 23일
JavaScript
0

JavaScript

목록 보기
1/3

🍌 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까?

💾 자료형(type)에 대해서

숫자형(Number)

  • 다른 언어와 달리 정수와 실수를 따로 구분하지 않음
  • 모든수를 하나로 표현
    ex) 100, 3.14

문자열형(String)

  • 따옴표로 둘러싸인 문자(한글자)들의 집합체, 문자의 나열을 뜻함

    ex) " ", ' ', (백쿼트 - 변수를 가져다 쓸 수 있음 ${변수명})

    🔥 변수 가져다 쓸때

    let name = "Hello";
	console.log("안녕하세요" + name + "님 반갑습니다.);
	// 위 문장을 ``(백쿼트)를 사용해서 쓰면
	console.log(`안녕하세요 ${name}님 반갑습니다`)

불린형(논리타입 T/F)

불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형이다.

let nameChecked = true; // 네, name 이 확인되었습니다(checked).
let ageChecked = false; // 아니요, age 를 확인하지 않았습니다(not checked)

let isBigger = 4 > 1;
alert( isBigger ); // true

객체형(Object)

  • 여러 속성, 여러 값을 하나의 변수에 저장할 수 있도록 해주는 타입
    키 : 값 구조로 이루어져 있다.(json 형태와 똑같다)
const apple = {
    name : "김사과",
    hobby : "잠자기"
  } 
  console.log(apple) // object
  console.log(apple.name); // 김사과

심볼형(Symlbol)

  • '유일하고 변경 불가능한' 기본값을 만드는 타입
  • 객체속성의 키 값으로 사용할 수 있다.
const symbol1 = Symbol("apple");
        console.log(symbol1);

        const food = {
            name : "tomato",
            [symbol1]: "tomato",
        };

        console.log(food);
        console.log(typeof food[symbol1]);

        console.log(food.symbol1); // undefined
        console.log(food[symbol1]); // 대괄호 사용해서 값을 가져와야 한다.

💾 자바스크립트의 형변환

1. 자동형변환

  • 내가 따로 형변환 하지않아도 자바스크립트에서 알아서 암시적 혹은 묵시적으로 형변환을 해준다

  • 숫자 + 문자열 => 문자열
    ex) 10 + "20" => "1020"

  • 단, - * / 를 했을경우 숫자로 인식된다. 이때 문자열은 반드시 숫자로 이루어진 문자열이어야 하며 아닐경우 NaN(Not a Number)가 나온다

2. 강제형변환

  • 자바스크립트는 자동으로 형변환을 지원하지만(자동형변환) 명시적으로 변환할 필요가 있을 때 사용하는 함수

  • Number() : ()안의 문자를 숫자로 변환

  • String() : ()안의 숫자나 불린(T/F)을 문자열로 변환

  • Object() : ()안의 모든 자료형을 객체형으로 변환

  • parseInt() : ()안의 문자열을 정수로 변환

  • parseFloat() : ()안의 문자열을 실수로 변환

    ex) let num = "5"
    parseInt(num) = 5

💾 == 과 === 의 차이점

  • == : 같다 (타입이 무관하게 값만 같으면 true)
  • === : 같다 (타입과 같이 모두같음 true)
  • != : 다르다 (타입이 무관하게 값이 같지 않다면 true)
  • !== : 다르다 (값, 타입중 하나만 달라도 true)
const b1 = true;
      const b2 = false;

      const num1 = 3;
      const str1 = "3";

      let result;

      result = num1 == str1;
      console.log(result); //true

      result = num1 === str1;
      console.log(result); //false

      result = num1 != str1;
      console.log(result); //false

      result = num1 !== str1;
      console.log(result); //true

💾 느슨한 타입의 동적언어의 문제점 및 보완할 수 있는 방법

🔥 실행 시 변수의 type에 예상치못한 type error가 발생할 수 있다.
동적 언어는 코드가 길고 복잡할 경우에 런타임 때 밖에 확인할 수 밖에 없다.
이런 불편함을 극복하기 위해, typescript나 flow 등을 사용하는 방법이 있다.

💾 undefined 와 null의 미세한 차이

  • undefined
    • 값이 정의되지 않았다.
    • 타입이 정해지지 않았다.
  • null
    • 값이 정해지지 않았다, 할당되지 않았다.(비어있는 상태), 변수를 초기화 한 경우

🍌 JavaScript 객체와 불변성이란?

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

기본형타입의 종류로는 논리(boolean), 정수(int), 실수(double), 문자(char) 형타입이 있고,
참조형타입의 종류로는 배열(array), 클래스(class), 인터페이스(interface) 형타입이 있다.

💾 불변 객체를 만드는 방법

불변 객체를 만드는 방법으로는

Object.freeze() 라는 함수를 사용하는 방법이 있다.

let freezeTest = {
    water = 'samdasoo'
}

Object.freeze(freezeTest);
freezeTest.water = 'samMool';
console.log(freezeTest)  // {water : 'samdasoo'}

💾 얕은 복사와 깊은 복사

얕은복사

  • 객체 복사시 해당한 객체만 복사해서 새로운 객체를 생성한다.
  • 복사된 객체와 원본 객체는 같은 메모리 주소를 참조하기 때문에 해당 메모리 주소값이 변경되면 원본,복사본 둘다 메모리 주소가 변경된다.

깊은복사

  • 객체 복사시 해당객체와 메모리 주소가 할당된 인스턴스 변수까지 복사하고 참조 메모리 주소를 공유하지 않는다.

🍌 스코프, 호이스팅과 TDZ에 대해서

💾 스코프

스코프

  • 변수, 함수, 클래스가 접근할 수 있는 유효 범위 (선언된 변수가 어느위치에서 유효한가)

💾 호이스팅

호이스팅

  • 인터프리터가 선언 전에 변수,함수의 메모리공간을 미리 할당하는 것을 의미한다.(선언 시에 강제로 최상단으로 올려서 선언)

호이스팅을 아려면 ES6이후 var를 쓰지않는 이유에 대해서 알아보아야 한다.

var x = 10;
x = 12;
var x = 52; //원래 중복선언은 허용하지 않지만 var는 오류를 내지않는다.

//강제로 최상단으로 올려서 선언한다는 것에 대한 예시
console.log(x);
var x = 10;

//위 문장을
var x;
console.log(x); ...... undefine
x = 10;

이렇게 호이스팅해서 최상단에서 선언을 해버린다.

변수는 중복선언이 허용되지 않아서 중복선언시 오류를 내줘야하는데 var는 이런것들을 오류를 내지 않아 호이스팅이 일어나고 runtime시에 오류가 발견된다.

ES6 이후에 나온 let과 const는 호이스팅이 일어나지 않는 것 "처럼" 작동하게 만들어졌다.

호이스팅이 "일어나지만" 오류를 내기때문에 일어나지 않는것처럼 작동하게 만들어진것이다.

💾 TDZ ( Temporal Dead Zone )

TDZ(Temporal Dead Zone)

  • 위의 설명한 호이스팅의 원리에 관계되는 개념이다.
  • 한글로 직역하면 사각지대 라는 뜻이다. 이 일시적인 사각지대는 스코프의 시작지점부터 초기화 시작지점까지의 구간을 TDZ라고 한다.
  • 즉 let또한 선언 전, 실행 컨텍스트 변수 객체에 등록이되어 호이스팅이 되지만, 이 TDZ구간에 의해 메모리가 할당되지 않아 참조에러가 발생하는 것이다.

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

  • 주요한 차이점은 호이스팅에서 차이가 발생한다.

  • 함수 선언문은 함수 전체를 호이스팅하기 때문에 함수 선언 전에 함수를 사용할 수 있는 것이다.

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

sum(50, 50); // 100
minus(100, 50) // Uncaught TypeError: minus is not a function

function sum(a, b) { // 함수 선언식
  return a + b;
}

let minus = function (a,b) { // 함수 표현식
  return a - b;
}

// ----------------------------------------------

function sum(a, b) { // 함수 선언식 - 함수 전체 호이스팅
  return a + b;
};

var minus; // 함수표현식 - 선언부만 호이스팅

sum(50, 50); // 100
minus(100, 50) // Uncaught TypeError: minus is not a function

function (a,b) { // 함수 표현식 - 할당부는 그대로
  return a - b;
}

함수 선언식으로 작성한 함수는, 함수 전체가 호이스팅 된다고 했는데, 전역적으로 선언하게 되고, 중복적으로 동명의 함수를 쓰게 된다면, 원하지않는 결과를 일으킬 수 있다.

그러므로 함수 표현식으로 작성하게되면 이를 방지할 수 있다.

💾 let, var, const, function 의 의미와 원리

let : 변수의 재선언이 불가능하다.
var : 변수의 재선언이 가능하다.
const : 변수의 재선언이 불가능하고 재할당도 불가능하다 (상수의 개념)
function : 하나의 특별한 목적의 작업을 수행하도록 설계한 독립적인 블록 (함수)

💾 실행 컨텍스트와 콜 스택

실행 컨텍스트

  • 자바스크립트의 핵심 개념으로, 코드를 실행하기 위해 필요한 환경이다. 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 

  • 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념 중 하나이다.

  • 모든 코드는 특정한 실행 컨텍스트 안에서 실행된다. 

  • 자바스크립트는 어떤 실행 컨텍스트 가 활성화되는 시점에 선언된 변수들을 호이스팅하고, 외부 환경 정보를 구성하고, this값을 설정하는 등의 동작을 수행하는데, 이로 인해 다른 언어에서는 발생할 수 없는 특이한 현상들이 발생한다.

자바스크립트의 주요한 실행 컨텍스트에는 두 가지가 있다

  • 전역실행컨텍스트(Global Execution Context) 함수실행컨텍스트(Fuction Execution Context)

콜스택

  • 자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트를 저장하는 자료구조

  1. 함수를 호출하면 실행 컨텍스트가 생성되고, 이를 콜 스택에 추가한 다음 함수를 수행하기 시작한다.

  2. 함수에 의해 호출되는 모든 함수(내부 함수들)는 콜 스택에 추가되고 해당 위치에서 실행한다.

  3. 함수의 실행이 종료되면 해당 실행 컨텍스트를 콜 스택에서 제거한 후 중단 된 시점부터 다시 시작한다.

  4. 만약 스택이 할당 된 공간보다 많은 공간을 차지하면 'stack overflow'에러가 발생한다.

💾 스코프 체인과 변수 은닉화

스코프 체인

  • 스코프에 식별자가 없으면 상위 스코프에서 다시 찾아 나간다. 이 현상을 스코프 체인 이라고 하며 스코프가 중첩되어있는 모든 상황에서 발생한다.

변수 은닉화

  • 외부 객체로부터 '속성 값(데이터, 멤버 변수값)'을 감추는 특성
profile
안치영
다음 포스트

[JS] var, let, const, 호이스팅에 대해서

0개의 댓글