[항해99 1기] [Chapter3-2] 주특기 심화 - 리액트 심화반 (1) (2021.3.26)

1. javaScript 기본 문법

1.1 변수

• 변수: 변하는 값
  • 선언 -> 초기화 -> 할당
  • 선언: 실행 컨텍스트에 변수 객체를 등록 (스코프가 참조하는 대상)
  • 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간이 확보(undefined로 초기화)
  • 할당: undefined로 초기화 된 변수에 실제 값 할당

var

• 가급적 사용하지 말 것
• 함수 수준 스코프
• 선언과 초기화를 한 번에
• 재선언이 가능
• 선언하기 전에도 사용 가능
  • 호이스팅
  • 선언을 맨 위로 끌어올린다.

function cat(){
    name = "siru";
    // 이 if문 내로는 절대 들어올 일이 없다
    if(false) {
        var name;
    }
    alert(name);
}
// 하지만 경고창이 실행된다.
// 함수의 최상위로 호이스팅이 되기 때문
cat();

let

• 변수 생성할 때 사용하는 키워드
• 블록 수준 스코프
• 재선언 불가
• 재할당 가능
• 호이스팅

const

• 상수 생성할 때 사용하는 키워드
• 블록 수준 스코프
• 재선언 불가
• 재할당 불가
• 호이스팅

TDZ(Temporal Dead Zone)

• 일시적 사각지대
• 선언만 되어있는 상태
• let과 const도 호이스팅이 되지만, 변수가 선언되기 전 호출되면 ReferenceError가 발생한다.
• 호이스팅(끌어올리기) 후 초기화 단계에서 메모리 공간을 확보하는데 선언을 호이스팅해도 초기화 전 까지 메모리 공간이 없기때문에 변수를 참조할 수 없다.

스코프에 진입할 때 변수를 만들고, TDZ가 생성되지만 코드 실행이(=실행 컨텍스트가) 변수가 있는 실제 위치에 도달할 때까지 엑세스를 못한다.

1.2 자료형

• 숫자형: 정수, 부동 소수점을 저장
• BigInt: 아주 큰 숫자를 저장
• Boolean: 논리값
• undefined: 값이 할당되지 않음
• null: 값이 존재하지 않음
• 객체형: 복잡한 자료구조 저장
• 심볼형: 고유 식별자 생성

심볼형 예시

let cat1 = Symbol('cat');
let cat2 = Symbol('cat');

console.log(cat1 == cat2)
// fale 출력

2. JavaScript 객체

2.1 객체란

• 여러타입의 데이터를 담을 수 있다.
  • 배열, 딕셔너리
• key로 구분된 데이터 집합, 복잡한 개체 저장
• key는 문자형
  • 숫자가 들어가도 문자형
  • 배열은 index가 key
• value에는 모든 자료형

// 객체 생성자
let cat = new Object();

// 리터럴로 만들기
// 엔진에서 생성자로 자동 변환
let aat = {};

2.1 const 객체

• const로 선언된 객체는 수정될 수 있다.
• 객체에 대한 참조를 변경하지 못한다.
• 즉, 객체가 가르키는 주소는 그대로이지만 가르키는 주소의 값은 변한다.
• 객체의 프로퍼티는 보호되지 않는다.

// my_cat이라는 상수
const my_cat = {
    name: "siru",
    status: "배고픔",
}

my_cat.name = "babosiru"; 

console.log(my_cat) // 변경된 값이 출력

// 객체 자체를 재할당 할수는 없으므로 에러 발생
my_cat = ;

3. JavaScript 함수

• JavaScript에서는 함수를 특별한 값 취급
  • 함수도 객체중 하나
• 소괄호가 있으면 함수를 실행, 없으면 문자열로 취급
• 함수를 복사 또는 매개변수처럼 전달이 가능

3.1 함수 선언

함수 선언문

function siru(){
  console.log('siru is cat');
}

함수 표현식

let siru = function(){
  console.log('siru is cat')
}

화살표 함수

• 함수 표현식을 단축한 표현

let siru = () => {
  console.log('siru is cat')
}

함수 선언문 vs 함수 표현식

• 함수 선언문으로 함수를 생성하면, 독립된 구문으로 존재
• 함수 표현식으로 함수를 생성하면 함수가 표현식의 일부로 존재
• 함수 선언문은 코드 블록 실행 전에 미리 처리되어 블록 내 어디서든 사용 가능
• 함수 표현식은 실행 컨텍스트가 표현식에 닿으면 만들어진다. (변수처럼 처리)

함수 표현식 vs 화살표 함수

• this
  • 함수 표현식: 그 함수 자체
  • 화살표 함수: 위의 부모

3. 2 생성자로 함수를 만들지 않는 이유

• 함수는 만들어진 환경을 프로퍼티(Enviroment)에 저장
  • 이것을 렉시컬 환경을 참조한다고 한다
• 생성자로 함수를 만들면, 전역 렉시컬 환경을 참조한다.

function b () {
  let p = 1;
  let a = new Function("console.log('p')");
  a();
}

b();
// 전역 렉시컬 환경을 참조해서 변수 p를 사용할 수 없다

3.3 지역 변수와 외부 변수

• 지역 변수
  • 함수 내에서 선언한 변수
  • 함수 내에서만 접근 가능
  • 외부 변수보다 우선순위를 가진다(같은 이름을 가질 때)
• 외부 변수
  • 함수 외부에서 선언한 변수
  • 함수 내에서도 접근
  • 함수 내부에 같은 이름을 가진 지역 변수가 있으면 사용불가

3.4 콜백 함수

• 함수를 값처럼 전달 시 인수로 넘겨주는 함수
• 인수 : argument
• 매개변수 : parameter
• 매개변수는 인수를 복사한 값
• 원본값이 손상되지 않는다.

const playWithCat = (cat, action) => {
    action(cat);
}

const useBall = (cat) => {
    alert(cat+"과 공으로 놀아줍니다.");
}

// useBall 함수가 콜백함수
playWithCat("siru", useBall);

4. Prototype

• 자바스크립트의 클래스는 ES6부터 지원하는 키워드
• 자바스크립트는 프로토타입 기반 동적 언어
• 클래스없이 객체를 생성할 수 있다(리터럴과 생성자)

4.1 프로토타입이란?

• 디자인 패턴 중 하나
  • 다른 언어들에서도 사용
• 객체 생성을 할 때 리소스를 최대한 절감
• 원본 객체를 복사하여 새로운 것을 만듦
• JavaScript의 모든 객체는 prototype을 가지고 있다.
• 객체는 함수의 프로토타입을 복사하여 생성된다.
• 객체는 자신이 어디에서 생성이 되었는지 기억한다.
• 객체는 자신의 부모 객체의 원형과 연결되어 있음
• 위임: 부모의 메소 드를 필요할 때 프로토 타입 링크를 통해 올라가서 실행
• 부모 객체를 프로토타입 객체 또는 프로토타입이라고 한다.

Reference

스파르타코딩클럽 리액트 심화반