항해 99 - 2022.02.04.FRI(자바스크립트의 기초)

이번 챕터 일정

• 02/04 (금) 21:00까지 : S.A 제출 완료 ✅
• 02/07 (월) 14:00 : 아이엘 포유 협력사 채용 세션
• 02/08 (화) 20:00 : ‘쌀팔다 개발자’ 김병욱 님 특강
• 02/08 (화) ~ 02/09 (목): 담당 매니저와 1:1 선택 면담
• 02/09 (수) 저녁 : 제4회 항해 톡
• 02/10 (목) 21:00까지 : 주특기 심화 주차 개인/팀 과제 제출 완료
• 02/11 (금) 09:00 : 미니 프로젝트 주차 발제

오늘 내가 할 일

• 1주차 강의 완독 ✅
• 1주차 강의 내용 개인과제랑 조인하기 ✅
• 알고리즘 문제 36번 문풀 및 정리 ✅
• 알고리즘 문제 37번 문풀 및 정리 ✅

 

이번 주차에도 또,,, 조장이 되어버렸다.....ㅎ 

 

 

Javascript 기초

• var
  • 선언과 초기화를 한번에 한다
  • 재선언 가능
  • 선언 전에도 사용가능
  • 가급적 사용하지 않는게 좋아요 

• ---

  let
  • 재선언은 불가, 재할당은 가능! 
  • block-scope 갖는다
    • {} 안에서 선언하면 {} 안에서만 쓰고 바깥에선 쓸 수 없어요!

// 재할당은 가능!
let cat_name = 'perl';
cat_name = '펄이';

// 재선언은 오류!
let cat_name = 'perl';
let cat_name = '펄이';​

---

• const
  • 재선언 불가, 재할당도 불가 => 선언과 동시에 할당해요
  • block-scope 갖는다
    • {} 안에서 선언하면 {} 안에서만 쓰고 바깥에선 쓸 수 없어요!

// 재할당 오류!
const cat_name = 'perl';
cat_name = '펄이';

// 재선언도 오류!
const cat_name = 'perl';
const cat_name = '펄이';

// 선언과 동시에 할당 되기 때문에 값을 안줘도 오류가 납니다.
// declare!
const cat_name;

---

• TDZ(Temporal Dead Zone) 
  • 일시적 사각지대! 
    • let, const 선언도 호이스팅 된다.
    • 스코프에 진입할 때 변수를 만들고, TDZ가 생성되지만 코드 실행이(=실행 컨텍스트가) 변수가 있는 실제 위치에 도달할 때까지 엑세스를 못할 뿐!
    • 호이스팅 : 선언 끌어 올리기

---

• 자료형
  • 오직 한타입의 데이터만을 담을 수 있는 원시형! 
    • 정수, 부동 소수점을 저장하는 숫자형: -(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에는 모든 자료형이 들어갈 수 있음
  • const 로 선언된 객체는 수정될수 있다( 객체에 대한 참소를 병경하지 못한다는 것을 의미)

// my_cat이라는 상수를 만들었어요!
const my_cat = {
	name: "perl",
	status: "좀 언짢음",
}

my_cat.name = "펄이"; 

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

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

---

• 함수선언문

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

• 함수표현식

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

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

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

---

• 지역 변수
  • 함수 내에서 선언한 변수
  • 함수 내에서만 접근 가능 
• 외부 변수
  • 함수 외부에서 선언한 변수
  • 함수 내에서도 접근 할 수 있다. 
  • 함수 내부에 같은 이름을 가진 지역 번수가 있으면 사용 할 수 없다. 

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

// 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()를 이용해 연결합시다!