React 입문 주차 S.A.

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

-일단 Javascript에 대해 알아보자

 

자바스크립트는 HTML,CSS와 함께 웹을 구성하는 요소중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다.기본 문법은 C,자바와 유사하고 다른 여러 프로그래밍 언어의 개념을 차용했다.

자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어다. 그래서 컴파일이 뭐고 인터프리터 언어가 뭔데?

   >컴파일 : 주어진 언어로 작성된 컴퓨터 프로그램을 다른 언어의 동등한 프로그램으로 변환하는 프로세스

   >인터프리터언어 : 코드를 한 줄씩 읽어 내려가며 실행하는 프로그램

 

- Javascript의 자료형

기본형과 객체(Object)타입이 존재한다.

기본적으로 자바스크립트는 인터프리터가 알아서 변수의 타입을 파악하고 값을 저장해, 변수의 타입을 따로 쓰지않는다.

 

• Null vs Undefined

undefined

• 시스템에서 어떤 변수나 속성이 정의되지 않은 경우를 표현하기 위해 사용
  • 선언만 하고 초기화가 되지 않는 변수의 타입이나 값
  • 객체의 정의되지 않은 속성의 타입이나 값

null

• 개발자가 명시적으로 아무것도 없는 비어있는 상태를 나타낼 때 사용
  • typeof의 결과는 object이며 값은 null

 

• Object 자료형

 Object 클래스 뿐만 아니라, 배열과 함수, 사용자 정의 클래스도 모두 Object에 포함된다.
객체 자료형과 기본형 자료형의 가장 큰 차이점은 Reference(참조)에 있다. 원시 타입의 변수는 다른 변수에 값을 할당하거나 함수 인자로 넘길 때, 값을 복사하여 전달하지만, 객체는 메모리 주소를 복사시키며 값 자체는 복사되지 않아 같은 객체를 참조하게 된다. 배열도 객체의 일부이며, 함수의 인자로 넘기거나 다른 변수에 참조시킬 수 있다.

 

• 동등연산자

=

 👉     = 어떤 변수에 값을 할당할 때 사용

==

 👉    == 유형을 비교하지 않는 등차. 변수 값을 기반으로 비교(ex. 0 == "0"은 true를 반환)

===

 👉    ===유형도 비교하는 등차. 엄격! ex. 0 === "0"은 false를 반환. → 0은 숫자(number)고, "0"은 문자(string)!

 

• 느슨한 타입의 동적언어...?

"JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능합니다." 

 

자바스크립트(javascript)라는 언어의 가장 큰 특징 중 하나가 '타입 선언'이 필요없다는 점이다. 자바나 C 같은 언어는 정작 타입 언어로 변수 선언에 타입을 명시해야한다. 이 후 해당 변수에 호환 되지 않는 타입을 사용할 때 컴파일 에러가 발생한다. 강제로 입력하기 위해서는 타입 변환(Type Casting)을 해야한다. 자바나 C 같은 언어의 기초 단계에서 배우는 내용이다.

 

하지만 자바스크립트는 이런 변수 타입이 없다. 자바스크립트의 변수 타입은 미리 선언할 필요가 없고, 값을 변수에 할당하는 순간 결정된다. 이러한 특징을 가진 프로그래밍 언어를 '느슨한 타입(loosely typed)'(타입 선언이 필요하지 않다는점) 혹은 '동적 타이핑(dynamic typing)' 언어라고 한다. 자바 스크립트에서는 이렇게 변수의 타입이 런타임(Runtime)에 결정된다.

 

• 형변환 (암묵적 형변환, 명시적 형변환)

자바스크립트에서의 형 변환이란 위에서말한 기본 자료형의 형식을 변경하는것이다. 

형 변환은 크게 두가지 묶음으로 나뉘는데 암묵적 형 변환과 명시적 형 변환이 포함되어있다.

두 가지 묶음에 대한 설명은 예시만 봐도 이해가 되었다.

                            >암묵적 형 변환 :   예) 3 + "0" => 문자열 "30"

                            >명시적 형 변환 :   예) parseInt("3.14") => 3

암묵적 형 변환은 따로 선언해 주지않아도 자바스크립트에서 자체적으로 변환을 해주는걸 뜻하고 명시적 형 변환은 갖가지 함수를 사용해서 변환해주는 걸 뜻한다. 
    

🐥JavaScript 객체와 불변성이란 ?

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

1)기본형 자료형  

> Boolean : 논리적인 요소, True/Fales

> Null : 빈 값

> Undefined : 값을 할당하지 않음

> Number : 숫자형 >>> NaN(Nat a number) 포함

> String : 문자열

 

                기본형 데이터는 값을 그대로 할당하는 것.
                메모리 내에 고정된 크기로 저장되면서, 원시 데이터 값 자체를 보관, 불변적
                기본적으로 데이터는 하나의 메모리를 사용한다.(재사용)

                예 ) let ,var , const로 변수 지정

 

2)참조형

값이 저장된 주소값을 할당(참조)

 

> Array(배열) : const로 선언된 변수 배열에 Array.push등의 함수를 적용할 수 있는 이유는 배열이 참조타입이기 때문에 데이터의 주소를 대입할 수 있기 때문이다.

>function(함수) / RegExp(정규표현식) : 문자열에 나타나는 특정 문자조합과 대응시키기 위해 사용되는 패턴이다.

> Map,,,, etc..

 

                 참조형은 기본형 데이터의 집합, 참조형 데이터는 값이 지정된 주소의 값을 할당.

 

• 불변 객체를 만드는 방법

>>>불변 객체란? : 불변 객체는 생성 후 그 상태를 바꿀 수 없는 객체를 뜻한다.

1) const

const는 let과 함께 변수를 상수로 선언한다. 둘의 차이점은 let의 경우 생성후 상태 변경이 가능하지만 const의 경우는 한번 선언하고 나면 뒤에서 뭔짓을 해도 오류로만 뜬다.

2)Object.freeze()

"객체를 동결하기 위한 메소드"

let test = {
    name : 'kim'
}

Object.freeze(test);

여기서 test객체는 동결되었기 때문에 객체의 속성을 변경하려는 시도는 불가능하다. 하지만 재할당은 가능하다(test의 값을 다시 할당)

const test = {
    'name' : 'jung'
};

Object.freeze(test);

이러면 최종보스. 못바꿔!!! 재할당도 안되고 객체속성도 불변

• 얕은 복사와 깊은 복사

1)얕은 복사

 

const obj = { vaule: 1 }
const newObj = obj;

newObj.vaule = 2;

console.log(obj.vaule); // 2
console.log(obj === newObj); // true

이렇게 자바스크립트의 참조 타입은 얕은 복사가 된다고 볼 수 있으며, 이는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값(메모리 주소)를 전달하여 결국 한 데이터를 공유하는 것이다.

2)깊은 복사

let a = 1;
let b = a;

b = 2;

console.log(a); // 1
console.log(b); // 2
console.log(a === b); // false

자바스크립트의 원시 타입은 깊은 복사가 되며, 이는 독립적인 메모리에 값 자체를 할당하여 생성하는 것이라 볼 수 있다.

🐥호이스팅과 TDZ는 무엇일까 ?

• 스코프, 호이스팅, TDZ

1)스코프

자바스크립트에서는 이를 변수에 영향을 미칠 수 있는 범위 혹은 변수에 접근할 수 있는 범위로 이해할 수 있다.

          >전역 스코프 var a =1;          >지역 스코프 funtion print(){

2)호이스팅

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다. let/const 변수 선언도 호이스팅은 되지만 TDZ에 의해 에러가 발생한다. 함수는 호이스팅 일어나지 않음. 그러니까 var이나 function은 최상단에 두지 않아도 호이스팅으로 쭉 끌어올려짐

3)TDZ

TDZ(Temporal Dead Zone)은 일시적인 사각 지대라는 뜻으로, 스코프 시작지점부터 초기화 시작지점 사이의 구간을 의미한다. 다른 말로 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간이다.

          >var는 선언과 초기화를 동시에하므로 undefined

          >let은 선언과 초기화가 분리되어 참조 에러

          >const선언 +초기화 + 할당 동시에 해야 에러가 안남 ( const name = jin;    const name =; 안됨)

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

1)함수 선언문

sum(1,2);

function sum(a,b) {
    return a + b;
}

함수 전체를 호이스팅 한다. 정의된 범위(스코프)의 맨 위로 호이스팅 되서 함수 선언 전에 함수를 사용할 수 있다는것, 함수 실행중에 함수를 모두모아 선언된 함수모임에 가입시켜주고 그결과 실행함수를 위로 올려도 실행됨.

 

2) 함수 표현식

sum(1,2); ///아래의 함수 표현문이 호이스팅 되지 않아서 작동안됨

const sum = function(a,b) {
    return a + b;
}

 

별도의 변수에 할당, 변수는 선언부와 할당부를 나누어 호이스팅함. 얘는 실행함수 위로 올리면 함수가 호이스팅 되지 않기 때문에 값이 나오지 않음

 

• let, const, var

1) var

초기의 변수 선언형식 ,  같은 이름의 변수 선언 시 에러없이 출력됨 (오류)

2) let ,const

var의 단점을 잡기 위해 나온 변수 선언 형식, let의 경우 선언 후에 재선언, 재할당이 가능하지만 const의 경우 재선언이 불가하다.

• 실행 컨텍스트와 콜 스택

- call stack

코드가 실행되면서 생성되는 Execution Context를 저장하는 자료구조

 

엔진이 처음 script를 실행할 때, 실행 컨텍스트를 생성하고 이를 Call Stack에 push한다.

그 후 엔진이 함수를 호출할 때 마다 함수를 위한 실행 컨텍스트를 생성하고 이를 Call Stack에 push 한다.

자바스크립트 엔진은 Call Stack의 Top에 위치한 함수를 실행하며 함수가 종료되면 stack에서 제거(pop)하고 제어를 다음 Top에 위치한 함수로 이동한다.

• 스코프 체인, 변수 은닉화

1)스코프 체인

지역 변수를 어떤 객체의 프로퍼티로 생각한다면, 자바스크립트의 모든 코드는 스코프 체인을 갖고 있다. 스코프 체인은 해당 코드의 유효 범위(in scope) 안에 있는 변수를 정의하는 객체의 체인, 리스트다. js가 변수값을 얻으려 할 때 스코프체인에서 변수를 찾는다. 위에서 부터 쭉 훑고 내려감. 끝까지 다 탐색했는데도 그 변수가 없다면 에러가 발생한다.

 

2)변수 은닉화

(function () {
  var a = 'a';
})();

console.log(a); // a is not defined

함수 외부에서 a를 출력해보면, 아직 정의되지 않았다(a is not defined)는 에러메세지를 확인할 수 있습니다. 이러한 방식과 같이 직접적으로 변경되면 안 되는 변수에 대한 접근을 막는 것을 은닉화라고 합니다.

🐥실습 과제

콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.

let b = 1;

function hi () {

const a = 4;

let b = 100;

b++;

console.log(a,b);

}

//console.log(a);

console.log(b);

hi();

console.log(b);

이거 완벽하게 이해해버림

 

지금 저상태로 찍으면

 

1 //1번줄의 let b =1;

4,101 //지역 스코프에 할당돼서 1번줄이 안나옴

1 //1번줄의 let b =1;

 

다음케이스

let b = 1;

function hi () {

const a = 4;

let b = 100;

b++;

console.log(a,b);

}

console.log(a); // a는 지역스코프에 국한되어있어 에러메세지가뜸

console.log(b);

hi();

console.log(b);

해결케이스

let b = 1;
const a = 4;//지역스코프에서 벗어나게 해줌
function hi () {

let b = 100;

b++;

console.log(a,b);

}

console.log(a);

console.log(b);

hi();

console.log(b);

콘솔값

4

1

4,101

1

 

실험 케이스 1

let b = 1;

function hi () {



let b = 100;

b++;

console.log(a,b);

}


console.log(a);

console.log(b);

hi();

console.log(b);

const a = 4; //무조건 에러 로그찍기전 a가 없어

실험 케이스 2

let b = 1;

function hi () {



let b = 100;

b++;

console.log(a,b);

}

console.log(a);

console.log(b);

hi();
var a = 4;
console.log(b);

콘솔값

undefined //var사용해서 호이스팅 되어 올라가긴 하지만 변수값선언전 undefined로 나옴

1

undefined 101 

1

 

실험 케이스 3

let b = 1;

function hi () {



// let b = 100;

b++;

console.log(a,b);

}
const a = 4;

console.log(a);
console.log(b);
hi(); //내부 스코프에 선언된값이 없으므로 1번줄 b가져와서 더해줌


b = 3; //let함수에 재선언

console.log(b);

콘솔값

4

1

4 2 //외부 선언된 b=1사용

3 //재선언 먹힘

 

실험케이스4

let b = 1;

function hi () {



// let b = 100;

b++;

console.log(a,b);

}
const a = 4;

console.log(a);
console.log(b);
hi(); //내부 스코프에 선언된값이 없으므로 1번줄 b가져와서 더해줌

console.log(b);

콘솔값

4

1

4 2 //외부 선언된 b=1사용

2// hi함수 실행후 값을 가져옴

 

1번줄에서 let이 아닌 const로 변환시 hi()안됨