React 기초다지기 #4

Javascript Re-start

변수를 선언할 수 있는 문법: let, var (값을 재할당 가능하다)
상수를 선언하는 문법: const (한번 선언하면 값 재할당 불가)

let과 const는 블록레벨 스코프이다. 블록에서 벗어나면 선언한 값이 사용되지 않는다.
var는 함수레벨 스코프이다.

호이스팅과 var의 관계:

• Javascript에서 var 선언문 같은 경우는 위치가 어디에 있든 호이스팅으로 인해 선언문이 읽힐 때 맨위로 올라온다.
• 올라온 이후, 코드를 한줄한줄 읽으면서 작동을하기 때문에 var위치에 상관없이 맨위로 올라와 읽히게 된다.
• var, let, const 셋다 호이스팅은 된다! 하지만, let과 const는 선언만 한 상태에서 변수 초기화(메모리에 공간이 할당되는 역할)가 안되어 있어서 Reference error가 난다. 이것을 TDZ라고도 부른다.

자료형:

• typeof 연산자를 통해 자료형을 알아낼 수 있다.
• 정수, 부동 소수점을 저장하는 숫자형 (2^53-1)까지 지원
• 엄청 큰 숫자를 저장하는 BigInt형
• 문자열을 저장하는 문자형
• 논리값(true/false boolean형)
• 값이 할당되지 않았음을 나타내는 undefined형
• 값이 없음을 나타내는 null형
• 복잡한 자료구조형을 나타내는 객체형
• 고유 식별자를 만들때 쓰는 심볼형

객체형과 원시형의 차이: 여러데이터 타입을 담을 수 있는가 없는가의 차이
객체형: key&value 쌍으로 이루어져있고, key = 항상 "문자형", value = 아무런 타입이 다 들어올 수 있다.

객체 생성하는 두가지 방법

• 객체 생성자를 이용하는 방법
• 객체 리터럴로 만들기

let cat = Object(); //객체 생성자를 이용하는 방법
let cat = {} //객체 리터를을 이용하는 방법

상수는 재할당이 되지않는다고 했지만, const 객체의 프로퍼티는 재할당이 된다!

자바스크립트에서 객체를 저장할 때 key에대한 주소값 저장, value에 대한 주소값을 저장을하기 때문에 value 프로퍼티가 변해도 주소값은 그대로 이다. 그렇기 때문에, value는 변할 수 있다.

여기서 중요한점, 객체 자체를 재할당 할 수 는 없다.

const my_cat = {
  name: 'perl',
  status: '조금 언짢음',
}
my_cat.name = 'yuri' //객체 프로퍼티 변환 가능

const my_cat = {
  name : 'yuri',
  status: '많이 언짢음', //오류 발생, 객체 재할당 되지않음

함수

• Javascript에서는 행동을 할 수 있는 객체로 인식을 하면 좋다. (Javascript에서는 함수가 조금 특이하게 인식이 되기때문)

함수선언문, 함수 표현식

function cat(){
console.log('perl') //함수 선언문 (독립된 선언문)
}

let cat = function(){
  console.log('perl') //함수 표현식 (표현식의 일부로 취급)
}

let cat = () => {
  console.log('perl'2) //또 다른 함수 표현식
}

생성자를 이용하는 방법

let a = new Function("console.log('perl'));                   

지역변수, 외부변수, 함수 스코프:

지역 변수: 함수내에서만 쓸 수 있다.

외부 변수: 특정 함수밖에 있으면 외부변수로 취급을 받는다

전역 변수: 문서 전체에서 쓸수 있다면 전역변수로 취급을 받는다.

Callback 함수:

• 함수를 값처럼 전달할 때, 인수로 넘겨주는 함수를 콜백 함수라고 한다.

function useBall(cat){
  console.log(cat,"공으로 노는중");
}

function playWithCat(cat, action){
  action(cat);
}

function playwithCat('perl', useBall);
//(perl "공으로 노는중") 이 프린트됨

인자와 매개변수는 엄연히 다르다. 매개변수는 인수를 복사한 값이다.

Prototype

• 자바스크립트는 동적언어이고 클래스가 없는 언어이다.

• ES6부터 지원되는 class는 클래스언어를 따라한 키워드지 엄연히 class는 아니다.

• 자바스크립트는 프로토타입 언어기반이다.

• 자바스크립트는 함수를 이용해서 객체를 만든다. 좀 더 자세히 이야기 하자면, 원형함수의 프로토타입을 복사해서 객체를 생성한다.

• 객체는 본인이 어디에서 복사가 되었는지 알고 있다.