22.04.14(목)
스파르타코딩클럽 리액트 심화반 - 1주차 과정
◎ Javascript 문법 정리 (심화 문법)
◎ Javascript 변수와 상수
-
변수 생성의 3단계
- 선언: 실행 컨텍스트에 변수 객체를 등록 (스코프가 참조하는 대상이 되도록)
- 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 (여기서 변수는 보통 undefined로 초기화된다)
- 할당: undefined로 초기화된 변수에 실제 값을 할당
-
var
- var로 선언한 변수는 블록 스코프가 아니라 함수 수준 스코프를 가진다.
- 재선언이 가능
- var는 선언과 초기화를 한번에 한다! (선언하기 전에도 사용할 수 있다.)
-
let
- 자바스크립트에서 변수를 생성할 때 쓰는 키워드
- block-scope를 갖는다. (중괄호 안에서 선언시, 안에서만 사용가능)
- 재선언은 불가, 재할당은 가능!
-
const
- 자바스크립트에서 상수를 생성할 때 쓰는 키워드
- block-scope를 갖는다. (중괄호 안에서 선언시, 안에서만 사용가능)
- 재선언 불가, 재할당도 불가! (⇒ 선언과 동시에 할당한다)
-
hoisting(호이스팅)과 TDZ(Temporal Dead Zone, 일시적 사각지대)
-
hoisting(호이스팅) : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
- 선언한 후, 초기화 단계에서 메모리에 공간을 확보
-
var : var로 선언한 객체는 함수의 최상위로 호이스팅되기 때문에, 실행될 일 없는 구문 속에 있어도 선언이 된다.
-
let, const : 호이스팅이 되지만, 선언을 호이스팅해도 초기화 전까지 메모리에 공간이 없다. 그래서 변수를 참조할 수 없기 때문이다. (TDZ 라고 함)
-
-
변수명 : 숫자로 시작할 수 없고, _와 $를 제외한 특수문자를 쓸 수 없다.
◎ Javascript 자료형
- Javascript 자료형 종류
- 정수, 부동 소수점을 저장하는
숫자형: -(2^53-1) ~ (2^53-1)까지 지원 - 아주 큰 숫자를 저장하는
BigInt형 - 문자열을 저장하는
문자형 - 논리 값 (true/false.
boolean형) - 값이 할당되지 않음을 나타내는 독립 자료형
undefined - 값이 존재하지 않음을 나타내는 독립 자료형
null - 고유 식별자를 만들 때 쓰는
심볼형 - 복잡한 자료구조를 저장하는 데 쓰는
객체형(다음 강의에서 조금 더 알아봅니다!)
- 정수, 부동 소수점을 저장하는
- 객체를 제외한 나머지 7가지를 원시형(primitive type) 이라고 함
- typeof() 를 통해 알아낼 수 있다.
typeof("123") // 'string'
- typeof() 를 통해 알아낼 수 있다.
◎ Javascript 객체
- 객체
- 오직 한 타입의 데이터만 담을 수 있는 원시형과 달리, 다양한 데이터를 담을 수 있다.
- key로 구분된 데이터 집합, 복잡한 개체를 저장할 수 있다.
{...}← 중괄호 안에 여러 쌍의 프로퍼티를 넣을 수 있다.- 프로퍼티는
key : value로 구성 - key에는 문자형, value에는 모든 자료형이 들어갈 수 있음
- 프로퍼티는
- const로 선언된 객체
- const로 선언된 객체는 수정될 수 있다.
- const로 선언된 객체는 객체에 대한 참조를 변경하지 못한다는 것을 의미한다
= 객체의 프로퍼티는 보호되지 않는다
const my_cat = {
name: "perl",
status: "좀 언짢음",
}
my_cat.name = "펄이";
console.log(my_cat) // "펄이"
my_cat = {name: "perl2", status: "많이 언짢음"}; // ERROR 발생◎ Javascript 함수
-
자바스크립트는 함수를 특별한 값 취급
- 자바스크립트는 ()가 있으면 함수를 실행하고 ()가 없으면 함수를 문자형으로 바꿔 출력한다.
- 위 특징을 이용해 함수를 복사할 수 있고, 매개변수처럼 전달 할 수 있다.
-
함수 사용 방식
- 함수 선언문
function cat() { console.log('javascript'); } - 함수 표현식
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 // a : 광역변수 / b : 내부 변수 우선 적용 / c: 재할당 / d: 지역변수 console.log(a, b, c, d); // a, b, c, undefined // b : 외부 변수 적용 / c: 재할당 / d: 지역변수 - 지역변수: 함수 내에서 선언한 변수
-
콜백 함수 : 함수를 값처럼 전달할 때, 인수로 넘겨주는 함수
const playWithCat = (cat, action) => {
action(cat);
}
const useBall = (cat) => {
alert(cat+"과 공으로 놀아줍니다.");
}
//playWithCat 함수에 넘겨주는 useBall 함수가 콜백 함수이다
playWithCat("perl", useBall); // perl과 공으로 놀아줍니다.◎ Javascript Prototype
-
Javascript는 클래스 기반 언어가 아니다.
- 자바스크립트는 동적 언어이고 클래스가 없는 언어이다.
- 자바스크립트에서 Class는 ES6부터 지원하는 키워드, 클래스 기반 언어를 일부 흉내냄
- 자바스크립트는 Class 없이 객체를 생성
-
자바스크립트는 프로토타입 기반 동적 언어이다.
- 디자인 패턴 중 하나 (객체 생성시 리소스를 최대한 절감하려는 데 애를 쓰는 패턴)
- 원본 객체를 복사해서 새로운 객체를 만드는 것
- 정확하게는 자바스크립트의 모든 객체는 함수의 (원형함수의) 프로토타입을 복사해서 객체를 만듦
- 객체는 자기가 어디서 생성되었는지 알고 있다. (함수의 프로토타입 객체를 복사해서 생성하므로!)
- 프로토타입 체인 : 계속 상속이 쭉쭉 이어져 내려가는 것
[프로토타입 객체와 프로토타입 링크]
위 예제에서 우리는 두 가지 프로토타입을 배웠어요.
하나는 프로토타입 객체, 또 하나는 프로토타입 링크([[Prototype]](숨김 프로퍼티)가 참조하는 값과 proto )예요.
아직까지 면접 질문에 자주 출몰하고, 프로토타입 링크를 이야기할 때 proto 를 써서 이야기 하지만, proto 를 사용하는 방식은 구식이에요. (deprecated되었거든요.)
면접을 대비한다면 위 예제처럼 proto 로 직접 접근하는 방식을 알아두는 편이 좋지만, 그게 아니라면 가급적 Object.getPrototypeOf()를 이용해 참조하고, 프로토타입 체인에 연결할 때는 Object.create() 를 이용해 연결합시다!
