javascript 기본 지식 정리

자바스크립트 기본 지식

자바스크립트 기본 지식을 알아보자!
목표: 자바스크립트의 기본 작동 원리 이해하기

 

😎 JavaScript의 자료형과 JavaScript만의 특성은?
[느슨한 타입(loosely typed)의 동적(dynamic) 언어]

*느슨한 타입 : 타입 없이 변수를 선언하는 것

  -자바스크립트의 변수 선언 : const, let

 

*동적 언어

  -자바스크립트의 변수에는 어떠한 타입의 값도 동적으로 (재)할당 가능.

let val = 42 // Number
val = "문자로 변경" // String
val = true // Boolean

 

[JavaScript 형 변환]

*전달되는 값을 의도적으로 원하는 타입으로 변환 해주는 것

let resultStr = "123";
console.log(typeof resultStr); // string

let resultNum = Number(resultStr); // 문자열 "123"이 숫자 123으로 변환됩니다.
console.log(typeof resultNum); // number

[==, ===]

*비교 연산자 : 변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용

  - == : 동등 연산자, '같다'의 의미/ 타입과 상관 없이 '값'이 같으면 true 

2022 == 2022 // true
2022 == '2022' // true

  - === : 일치 연산자, '엄격하게' 같다 의 의미/ '값'과 '타입'까지 같아야 true

2022 === 2022 // true
2022 === '2022' // false -> [ 숫자형 === 문자형 -> false ]

 

[느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점과 보완 방법]

*문제점 : 변수에 예상치 못한 타입이 들어와 타입 에러 등 오류가 발생할 수 있음

console.log(1+10)
> 11
console.log(1+'10') // 숫자 1 + 문자 10
> 110

 

*보완 방법 : 타입스크립트(TypeScipt)와 같은 강력한 타입(변수 선언 시 타입도 선언)의 확장 언어의 사용

//js = 자바스크립트

//js
const result = 2022

//타입스크립트 - js의 느슨한 타입을 보완하고자 나온 js의 확장 언어
const result : number = 2022

 

[undefined와 null의 차이 비교]

*undefined : 변수 선언 후 아무것도 없는 상태

*null : 변수 선언 후 null 이라는 값이 주어진 상태 -> "값이 없게 할게"

let obj1
obj1 // undefind

let obj2 = null
obj2 // null

 

😎 JavaScript 객체와 불변성이란 ?
[기본(원시)형 데이터와 참조형 데이터]

*기본형과 참조형 데이터의 차이 : 기본형에는 값을 그대로 할당하고, 참조형에는 값이 저장된 주소값을 할당(참조)함

  -기본(원시)형 데이터 : Number, String, Boolean, null, undefined 가 있으며 ES6 에서는 Symbol 도 추가 되었음
  -참조형 데이터 : 대표적으로 객체(Object)가 있고, 그 하위에 배열(Array), 함수(Function), 정규표현식(RegExp) 등이 있으며, ES6에서는 Map, Set, WeakMap, WeakSet 등도 추가 되었음

// 주소 값은 임의로 설정함
// 기본형
let a = 2022;
let b = 2023;
// let a : 100 이라는 주소 (저장) 공간을 확보 → a라는 변수와 매칭
// a = 2022 : a라는 변수를 찾고 → 매칭된 주소 값인 100의 (view) 공간에 2022를 할당
// let b : 101 이라는 주소 (저장) 공간을 확보 → b라는 변수와 매칭
// b = 2023 : b라는 변수를 찾고 → 매칭된 주소 값인 101의 (view) 공간에 2023를 할당

// 참조형
let obj = {
    a : 1,
    b : 'b'
};

let obj2 = obj;
obj2.a = 1000;
console.log(obj2.a); // 1000
console.log(obj.a); // 1000
// let obj : 100 이라는 주소 (저장) 공간을 확보 → obj 라는 변수와 매칭
// {프로퍼티, 값} 이 담길 1000이라는 공간을 확보 {프로퍼티, 값} 매칭 (obj주소 100은 1000을 매칭)
// 1011이라는 공간에 a프로퍼티의 값을 매칭
// 1012라는 공간에 b프로퍼티의 값을 매칭
// > @100 : @1000 / @1000 : {a : @1011, b : @1012} / @1011 : 1 / @1012 : 'b' 의 형태

// 복사된 obj2는 101의 공간에 obj2를 확보 후 obj의 값이 있는 100의 값 @1000을 '할당'
// @1000의 프로퍼티 a와 매칭된 @1011의 값 1을 1000으로 변경
// 복사된 obj2의 a와 원본 obj의 a의 값이 모두 변경 후 출력

 

[불변 객체를 만드는 방법]

*불변 객체 : 이미 할당된 객체가 변하지 않는다는 뜻

  -freeze()와 const를 이용하는 방법

let person = {
	name : 'kim'
}
person.name = 'lee'
console.log(person.name) // lee

// freze() 사용
let person = {
	name : 'kim'
}
Object.freeze(person)
person.name = 'lee' // 무시 됨
console.log(person.name) // kim

// 하지만
let person = {
	name : 'kim'
}
Object.freeze(person)
person = {
    age : 15
}
console.log(person) // { age: 15 } > freeze는 동결 객체를 반환하지만 재할당은 가능하다

// const와 조합하면 해결된다
const person = {
	name : 'kim'
}
Object.freeze(person)
person.name = 'lee' // 무시됨
person = {
    age : 15
}
console.log(person) // TypeError: Assignment to constant variable.

 

[얕은 복사와 깊은 복사]

*얕은 복사 : 객체의 '참조' 값('주소' 값)을 복사

*깊은 복사 : 객체의 '실제' 값을 복사

// 깊은 복사 > 기존 값에 영향을 끼치지 않는다.
const a = 'a';
let b = 'b';

c = b
b = c
c = 'c'

console.log(a); // 'a';
console.log(b); // 'b';
console.log(c); // 'c'

// 얕은 복사 > 기존 값에 영향을 끼친다
const a = {
    one: 1,
    two: 2,
};

let b = a;
b.one = 3;

console.log(a); // { one: 3, two: 2 }
console.log(b); // { one: 3, two: 2 }

 

😎 호이스팅과 TDZ는 무엇일까 ?
[스코프, 호이스팅, TDZ]

*스코프: 변수에 접근할 수 있는 범위

  -전역 스코프  : 파일 내 어디서든 참조 가능

  -지역 스코프  : 해당 블럭(함수) 내에서만 사용 가능

let scope = 'global' // 전역 스코프
function func(){
    let scope = 'local' // 지역 스코프
    console.log(scope)
}
func() // 'local'
console.log(scope) // 'global'

 

*호이스팅 : 코드 실행 전 변수와 함수의 메모리 공간을 미리 할당하는 것

function dog(result) {
  console.log(`강아지는 ${result}`)
}
dog('귀엽다') // 강아지는 귀엽다

// 함수를 먼저 실행해도 정상 작동
dog('귀엽다') // 강아지는 귀엽다
function dog(result) {
  console.log(`강아지는 ${result}`) // 미리 할당
}

// 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당

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

*함수 선언문

function declaration(){
	console.log('함수 선언문')
}
declaration()

*함수 표현식

const expression = function(){
	console.log('함수 표현식')
}
expression()

 

*함수 선언문과 함수 표현식의 차이 : 호이스팅의 차이

  -함수 선언문 : 함수 전체를 호이스팅

  -함수 표현식 : 변수의 선언부 할당부를 나누어서 호이스팅 > 선언부 먼저 호이스팅

declaration() // '함수 선언문'
expression() // ReferenceError: Cannot access 'expression' before initialization

function declaration(){
	console.log('함수 선언문')
}

const expression = function(){
	console.log('함수 표현식')
}

// 위의 내용은 아래와 같다

function declaration(){ // 함수 선언문 : 전체 호이스팅
	console.log('함수 선언문')
}
const expression // 함수 표현식 : 변수만 선언

declaration() // 함수 선언문 실행 :'함수 선언문'
expression() // ReferenceError: Cannot access 'expression' before initialization

function(){ // 함수 표현식 : 할당부는 그대로
	console.log('함수 표현식')
}

// 정상 작동하려면
const expression = function(){
	console.log('함수 표현식')
}
declaration() // '함수 선언문'
expression() // '함수 표현식'
function declaration(){
	console.log('함수 선언문')
}

[let, const, var, function의 실행 원리]

*let, const, var

  -var는 함수 레벨 스코프 / let, const는 블록 레벨 스코프

  -var은 호이스팅 가능 / let, const는 호이스팅 에러 발생 (TDZ 존재)

  -var는 이미 선언된 이름과 같은 이름으로 변수를 중복 선언해도 에러가 나지 않지만

     let, const는 이미 존재하는 변수와 같은 이름의 변수를 중복 선언하면 에러 발생
  -var, let은 변수 선언시 초기 값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 함

  -var, let은 선언 후 값 변경(재할당) 가능 / const는 선언된 값 변경 불가능 (객체안의 프로퍼티 변경까지 제한은 아님)

// const 값 변경

const arr = ["a"]
const name = arr
console.log("name 1 : ", name) // name 1 : ['a']
arr.push("b")
console.log("name 2 : ", name) // name 2 : ['a', 'b']

/*
배열, 객체는 참조 자료형이기 때문에 요소나 속성을 변경해도
내용만 변경 되고 해당 주소는 변경되지 않으므로 
const로 선언되었어도 요소, 속성을 변경할 수 있다.
*/

 

*function

  -함수 작성 > 브라우저 엔진이 함수의 이름 (ex-function name(){})을 식별자로 저장 > 함수 객체 생성 후 참조

> 함수 실행 구문에서 name을 만나면 값을 가져옴 > 그 다음 구문이 () 이라면 실행

>만약 스코프에서 식별자를 못 찾았다면, 참조 에러(ReferenceError) 출력

> 식별자는 찾았지만 실행할 수 없는 타입이라면 타입 에러(TypeError) 출력

not(); // ReferenceError: not is not defined
let name= 'kim';
name(); // TypeError: name is not a function

 

[실행 컨텍스트와 콜 스택]

*실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

  -Global Execution context
자바스크립트 엔진이 처음 코드를 실행할 때 전역 공간 생성.

그 과정에서 전역 객체인 Window Object (Node는 Global) 생성 및 this가 Window 객체를 가르킴.

  -Function Execution context
함수가 호출 될 때마다 호출 된 함수를 위한 함수 공간 생성.
모든 함수는 호출되는 시점에 자신만의 함수 공간을 가짐.

 

*콜 스택 (FIFO 선입선출)

실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장함

let name = 'kim'
function b(){
    console.log('B 실행합니다')
}
function a(){
    console.log('a 실행합니다')
    b()
}
a()
// a 실행합니다
// B 실행합니다

>[global context] 
>[global context][a실행 컨텍스트]
>[global context][a실행 컨텍스트][b실행 컨텍스트]
>[global context][a실행 컨텍스트]
>[global context]

 

[스코프 체인, 변수 은닉화]

*스코프 체인 : 스코프를 찾아가는 과정

const myName = 'kim'

function first() {
  const age = 20

  function second() {
    const job = 'developer'

    console.log(`hi, I'm ${myName}. I'm a ${age}-old ${job}`)
    // Hi, I'm Serzhul. I'm a 30-old developer
  }

  second()
}

first()

// second 함수에서 myName 변수를 찾는 과정
// 함수 내부에서 탐색 > 상위 first 함수 스코프에서 탐색 > 그 상위 '전역' 스코프에서 탐색

 

*변수 은닉화 : 직접적으로 변경되면 안 되는 변수에 대한 접근을 막는 것

// 즉시 실행 함수를 통한 은닉화
(function () {
    let a = 'a';
  })();
  
  console.log(a); // a is not defined
  
// 클로저 생성을 통한 은닉화 > _name 은닉화
function welcome(name) {
    let _name = name;
    return function () {
        console.log('welcome, ' + _name);
    };
}

let a = new welcome('kim');
let b = new welcome('lee');

a._name ="이름 변경 시도" // ReferenceError: Cannot access 'a' before initialization

a() // welcome, kim
b() // welcome, lee

 

휴 드디어 정리 끝!😀

 

 

 

 

추가 포스팅

https://iotrue.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EA%B3%BC-TDZ

자바스크립트 호이스팅과 TDZ