🍌 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까?
💾 자료형(type)에 대해서
따옴표로 둘러싸인 문자(한글자)들의 집합체, 문자의 나열을 뜻함
ex) " ", ' ',
(백쿼트 - 변수를 가져다 쓸 수 있음 ${변수명}
)
🔥 변수 가져다 쓸때
let name = "Hello";
console.log("안녕하세요" + name + "님 반갑습니다.);
// 위 문장을 ``(백쿼트)를 사용해서 쓰면
console.log(`안녕하세요 ${name}님 반갑습니다`)
불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형이다.
let nameChecked = true; // 네, name 이 확인되었습니다(checked).
let ageChecked = false; // 아니요, age 를 확인하지 않았습니다(not checked)
let isBigger = 4 > 1;
alert( isBigger ); // true
const apple = {
name : "김사과",
hobby : "잠자기"
}
console.log(apple) // object
console.log(apple.name); // 김사과
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]); // 대괄호 사용해서 값을 가져와야 한다.
💾 자바스크립트의 형변환
내가 따로 형변환 하지않아도 자바스크립트에서 알아서 암시적 혹은 묵시적으로 형변환을 해준다
숫자 + 문자열 => 문자열
ex) 10 + "20" => "1020"
단, - * / 를 했을경우 숫자로 인식된다. 이때 문자열은 반드시 숫자로 이루어진 문자열이어야 하며 아닐경우 NaN(Not a Number)가 나온다
자바스크립트는 자동으로 형변환을 지원하지만(자동형변환) 명시적으로 변환할 필요가 있을 때 사용하는 함수
Number() : ()안의 문자를 숫자로 변환
String() : ()안의 숫자나 불린(T/F)을 문자열로 변환
Object() : ()안의 모든 자료형을 객체형으로 변환
parseInt() : ()안의 문자열을 정수로 변환
parseFloat() : ()안의 문자열을 실수로 변환
ex) let num = "5"
parseInt(num) = 5
💾 == 과 === 의 차이점
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의 미세한 차이
🍌 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 )
💾 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
주요한 차이점은 호이스팅에서 차이가 발생한다.
함수 선언문은 함수 전체를 호이스팅하기 때문에 함수 선언 전에 함수를 사용할 수 있는 것이다.
함수 표현식은 별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게되고, 선언부만 호이스팅 하게 된다.
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값을 설정하는 등의 동작을 수행하는데, 이로 인해 다른 언어에서는 발생할 수 없는 특이한 현상들이 발생한다.
자바스크립트의 주요한 실행 컨텍스트에는 두 가지가 있다
콜스택
함수를 호출하면 실행 컨텍스트가 생성되고, 이를 콜 스택에 추가한 다음 함수를 수행하기 시작한다.
함수에 의해 호출되는 모든 함수(내부 함수들)는 콜 스택에 추가되고 해당 위치에서 실행한다.
함수의 실행이 종료되면 해당 실행 컨텍스트를 콜 스택에서 제거한 후 중단 된 시점부터 다시 시작한다.
만약 스택이 할당 된 공간보다 많은 공간을 차지하면 'stack overflow'에러가 발생한다.
💾 스코프 체인과 변수 은닉화
스코프 체인
변수 은닉화