16일차

그루트·2021년 10월 1일
0

항해 TIL (Today I learned)

목록 보기
14/85

변수와 상수

[변수 생성의 3단계]

선언 → 초기화 → 할당

  • 선언: 실행 컨텍스트에 변수 객체를 등록 (스코프가 참조하는 대상이 되도록요!)
  • 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 (여기서 변수는 보통 undefined로 초기화됩니다!)
  • 할당: undefined로 초기화된 변수에 실제 값을 할당

var

var는 가급적 사용하지 않는 게 좋아요!

  • var로 선언한 변수는 블록 스코프가 아니라 함수 수준 스코프를 가진다.
  • var는 선언과 초기화를 한번에 한다!
  • 재선언이 가능하다.
  • 선언하기 전에도 사용할 수 있다.
    // var는 이런 식의 사용도 가능합니다. 괴상하죠!
// var name은 선언! name = "perl"은 할당!
function cat(){
	name = "perl";
	alert(name);
	var name;
}

cat();
  • 코드 블럭을 무시합니다. (var는 함수의 최상위로 호이스팅 됩니다. 선언은 호이스팅 되고 할당은 호이스팅 되지 않습니다.)
    // var name은 함수의 최상위로 호이스팅되기 때문에, 실행될 일 없는 구문 속에 있어도 선언이 됩니다.(자바스크립트가 동작하기 전에 코드를 한 번 훑는데 그 때, var로 선언된 코드를 전부 최상위로 끌어올려버립니다. 동작해선 안되는 구문이라도... 몽땅..!)

function cat(){
	name = "perl";
	// 이 if문 내로는 절대 들어올 일이 없죠!
	if(false) {
		var name;
	}
	alert(name);
}

cat();

let

- 자바스크립트에서 변수를 생성할 때 쓰는 키워드
- block-scope를 갖는다.
    - `{}`안에서 선언하면 `{}` 안에서만 쓰고 바깥에선 쓸 수 없어요!
- 재선언은 불가, 재할당은 가능!
    
    ```jsx
    // 재할당은 가능!
    let cat_name = 'perl';
    cat_name = '펄이';
    
    // 재선언은 오류!
    let cat_name = 'perl';
    let cat_name = '펄이'; 
    ```

const

- 자바스크립트에서 상수를 생성할 때 쓰는 키워드
- block-scope를 갖는다.
    - `{}`안에서 선언하면 `{}` 안에서만 쓰고 바깥에선 쓸 수 없어요!
- 재선언 불가, 재할당도 불가! (⇒ 선언과 동시에 할당해요!)
    
    ```jsx
    // 재할당 오류!
    const cat_name = 'perl';
    cat_name = '펄이';
    
    // 재선언도 오류!
    const cat_name = 'perl';
    const cat_name = '펄이';
    
    // 선언과 동시에 할당 되기 때문에 값을 안줘도 오류가 납니다.
    // declare!
    const cat_name;
    ```
  • iv) TDZ(Temporal Dead Zone) = 일시적 사각지대
    • 1) let과 const도 호이스팅이 될까? [간단하게 말하자면...]
      var과 let, const의 차이점 중 하나는 변수가 선언되기 전에 호출하면 ReferenceError가 난다는 점이에요! Q. 왜 에러가 날까? 호이스팅이 안 된 걸까?
      A. 호이스팅(=선언 끌어 올리기)은 됩니다! 다만, 선언한 후, 초기화 단계에서 메모리에 공간을 확보하는데, 선언을 호이스팅해도 초기화 전까지 메모리에 공간이 없죠! 그래서 변수를 참조할 수 없기 때문입니다.
      이걸 TDZ라고 해요!
      • 앗, 그럼 let, const는 호이스팅이 되지 않는 건가? → 답은 호이스팅이 된다!
      • 그럼 왜 레퍼런스 에러가 날까?
        → TDZ 때문에 그렇습니다!
      • [3줄 요약] → let, const 선언도 호이스팅 된다. → 스코프에 진입할 때 변수를 만들고, TDZ가 생성되지만 코드 실행이(=실행 컨텍스트가) 변수가 있는 실제 위치에 도달할 때까지 엑세스를 못할 뿐! → 면접에 자주 나와요.

자료형

자바스크립트는 8가지 기본 자료형을 지원합니다!
객체를 제외한 나머지 7가지를 원시형(primitive type)이라고 불러요.
typeof 연산자로 자료형을 알아낼 수 있어요. 🙂

  • 정수, 부동 소수점을 저장하는 숫자형: -(2^53-1) ~ (2^53-1)까지 지원
  • 아주 큰 숫자를 저장하는 BigInt형
  • 문자열을 저장하는 문자형
  • 논리 값 (true/false. boolean형)
  • 값이 할당되지 않음을 나타내는 독립 자료형 undefined
  • 값이 존재하지 않음을 나타내는 독립 자료형 null
  • 복잡한 자료구조를 저장하는 데 쓰는 객체형(다음 강의에서 조금 더 알아봅니다!)
  • 고유 식별자를 만들 때 쓰는 심볼형

[알아두면 더 좋은 Tip: 엄격 모드]
자바스크립트는 엄청 많은 버전이 있습니다! 우리가 들어본 ES6도 사실 자바스크립트의 한 버전일 뿐입니다. (보통 이야기하는 하위 버전 자바스크립트는 ES3, 최신이다! 모던이다! 하면 ES6 이상을 가리키죠!)

자바스크립트는 하위 호환성에 도른 언어라, 코드를 읽을 때 모던한 방식보다는 하위 호환에 초점을 맞춰 동작합니다. 최신 기능이라기에 써봤는데, 오류를 뿜어낼 수 있단 소리입니다. 😢

그럴 때 쓰는 게 엄격 모드 use strict입니다. 'use strict;'를 스크립트 최상단에 써주면 모던 자바스크립트에서 지원하는 모든 기능을 활성화해줍니다!

객체란?

  • 오직 한 타입의 데이터만 담을 수 있는 원시형과 달리, 다양한 데이터를 담을 수 있다.
  • key로 구분된 데이터 집합, 복잡한 개체를 저장할 수 있다.
  • {...} ← 중괄호 안에 여러 쌍의 프로퍼티를 넣을 수 있다.
    • 프로퍼티는 key : value로 구성
    • key에는 문자형, value에는 모든 자료형이 들어갈 수 있음
// 객체 생성자로 만들기
let cat = new Object();

// 객체 리터럴로 만들기
// 중괄호로 객체를 선언하는 걸 리터럴이라고 하는데, 객체 선언할 때 주로 씁니다!
let cat = {};

상수는 재할당이 안 된다고 했지만...

  • const로 선언된 객체는 수정될 수 있어요. 😖 (← 아찔한 여러분,,)
  • const로 선언된 객체는 객체에 대한 참조를 변경하지 못한다는 것을 의미합니다!
  • 즉, 객체의 프로퍼티는 보호되지 않아요!
// my_cat이라는 상수를 만들었어요!
const my_cat = {
	name: "perl",
	status: "좀 언짢음",
}

my_cat.name = "펄이"; 

console.log(my_cat) // 고양이 이름이 바뀌었죠!

// 여기에선 에러가 날거예요. 프로퍼티는 변경이 되지만, 객체 자체를 제할당할 순 없거든요!
my_cat = {name: "perl2", status: "많이 언짢음"};

함수

자바스크립트는 함수를 특별한 값 취급을 해요.
자바스크립트는 ()가 있으면 함수를 실행하고 ()가 없으면 함수를 문자형으로 바꿔 출력하기도 서슴치 않거든요. (함수를 값으로 취급하는거죠!)
이걸 응용하면, 함수를 복사할 수 있고, 또 매개변수처럼 전달할 수 있어요. (소근)

  • 함수는 기본적으로 undefined를 반환해요. return으로 어떤 값을 넘겨주지 않는다면요!

함수 선언문과 함수 표현식

- 함수 선언문

// 이렇게 생긴 게 함수 선언문 방식으로 함수를 만든 거예요.
function cat() {
	console.log('perl');
}

- 함수 표현식

// 이렇게 생긴 게 함수 표현식을 사용해 함수를 만든 거예요.
let cat = function() {
	console.log('perl');	
}

// 물논 화살표 함수로 써도 됩니다.
// 다만 주의하실 점! 화살표 함수는 함수 표현식의 단축형이라는 거! 주의하세요! :) 
let cat2 = () => {
	console.log('perl2');
}

함수 선언문 vs 함수 표현식

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

지역 변수와 외부 변수

  • 지역 변수
    • 함수 내에서 선언한 변수
    • 함수 내에서만 접근 가능
  • 외부 변수(global 변수라고도 합니다.)
    • 함수 외부에서 선언한 변수
    • 함수 내에서도 접근할 수 있다.
    • 함수 내부에 같은 이름을 가진 지역 변수가 있으면 사용할 수 없다.
let a = 'a';
let b = 'b';
let c = 'outter!';
const abc = () => {
	let b = 'inner!';
	c = 'c';
	let d = 'd';
	console.log(a, b, c, d);
}

console.log(a, b, c, d); // a, b, outter, undefined

abc(); // a, inner, c, d

console.log(a, b, c, d); // a, b, c, undefined

콜백 함수

함수를 값처럼 전달할 때, 인수로 넘겨주는 함수를 콜백 함수라고 해요!

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

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

//playWithCat 함수에 넘겨주는 useBall 함수가 콜백 함수입니다!
playWithCat("perl", useBall);

Prototype

자바스크립트와 클래스 기반 객체 지향 언어

주의!]
자바스크립트는 동적 언어이고 클래스가 없는 언어예요.
클래스 기반 언어를 사용하다 자바스크립트를 접하면 특히 혼란스러워하는 부분이죠!

앗? 분명 기초 강의에서는 클래스를 배웠는데...?
→ 네! 그 클래스는 ES2015(ES6)부터 지원하는 키워드입니다!
클래스 기반 언어가 말하는 클래스를 자바스크립트가 흉내낸 것 뿐이에요!

그럼 자바스크립트는 정확히 뭐지?
자바스크립트는 프로토타입 기반 동적 언어입니다. 🙂

- 객체 생성 방법이 다르다!

[클래스 기반] ex) java, c++, ...
객체 생성 전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성

[자바스크립트]
클래스 없이 객체를 생성(리터럴과 생성자, 기억하시죠!)

프로토타입이란?

자바스크립트의 모든 객체는 자신의 부모 객체와 연결되어 있어요.
좀 더 정확히는 부모 객체의 원형하고요!(부모 객체의 프로토타입)
마치 객체 지향에서의 상속 개념처럼 부모 객체의 프로퍼티나 메소드를 상속받아 쓸 수 있고요.
(실제로는 상속보다 위임에 가깝다고 하지만, 통상적으로 상속한다고 표현해요.)
이런 부모 객체를 프로토타입 객체, 혹은 그냥 프로토타입이라고 부릅니다. 🙂
그리고 부모 객체를 참조하는 걸 두고 프로토타입 링크라고 해요.

// animal이라는 객체를 하나 만들었습니다!
let animal = {
	leg: 4,
	legCount() {
		console.log(this.leg); // this는 animal을 의미합니다.
	}	
};

// 또 다른 객체 cat을 만들었고요!
// animal을 프로토타입 상속 받아올 거예요. (__proto__를 씁니다.)
let cat = {
	__proto__:animal, // cat의 프로토타입은 animal!
	cute: true,
};

// 프로토타입을 설정해주어서 cat은 animal의 메소드와 프로퍼티를 사용할 수 있어요.
cat.legCount();
console.log(cat.leg);

// cat만 가지고 있는 프로퍼티도 있고요!
console.log(cat.cute);
// animal은 cat의 속성을 가져올 수 없어요!
console.log(animal.cute);
  • 위 예제에서 animal은 cat의 프로토타입 객체입니다.
    cat의 프로토타입은 animal이라고도 해요!
  • cat.legCount()에서 실행되는 legCount는 animal에서 상속된 메소드예요. → animal의 메소드와 속성이 복사되어 cat에 들어가는 게 아닙니다!
  • animal을 상속 받은 cat, cat을 상속받은 다른 객체를 만들 수도 있을거예요. → 이런 식으로 상속이 쭉쭉 내려가는 걸 프로토타입 체인이라고 불러요.
    • 순환 참조는 되지 않아요! (animal은 cat을 상속받은 객체를 상속할 수 없어요!)

[**프로토타입 객체와 프로토타입 링크]**
위 예제에서 우리는 두 가지 프로토타입을 배웠어요.
하나는 프로토타입 객체, 또 하나는 프로토타입 링크([[Prototype]](숨김 프로퍼티)가 참조하는 값과 __proto__ )예요.

아직까지 면접 질문에 자주 출몰하고, 프로토타입 링크를 이야기할 때 __proto__ 를 써서 이야기 하지만, __proto__ 를 사용하는 방식은 구식이에요. 😖 (deprecated되었거든요.(링크→))

면접을 대비한다면 위 예제처럼 __proto__ 로 직접 접근하는 방식을 알아두는 편이 좋지만, 그게 아니라면 가급적 Object.getPrototypeOf()를 이용해 참조하고, 프로토타입 체인에 연결할 때는 Object.create() 를 이용해 연결합시다!

오늘은 주로 자바스크립트에 대해 공부를 했다.
피곤해서 그런지 집중이 너무 안됬다.
자바스크립트 공부 후 figma에 있는 기획서를 보고 컴포넌트를 쪼개는걸 했다 이게 익숙하지 않아서인지 하는데 조금 헤갈리기도했다. 왜 이렇게 해야되는지 이해가 안됬다.
머 다 이유가 있겠지? 듣자하니 로그인 페이지 만들때 필요하다고 한다. 그 이유를 아마 내일 알수 있지않을까 싶다. 아! 그리고 오타를 너무 내서 자꾸 오류가 발생한다. 오타에 주의하자!
진도가 많이 느리다. 화이팅하자!

profile
그루트
i'm groot
이전 포스트

15일차

다음 포스트

17일차

0개의 댓글