스파르타 코딩클럽 React 리액트 심화반 1주차 정리 - Javascript
이 글에서 사용하는 모든 A, B, C..a,b,c...는 원하는 값을 넣어서 사용할 수 있다. 정해진 것이 아님.
Javascript
변수/상수
변수 (let) : 변하는 값 = 재할당이 가능한 값
상수 (const) : 변하지 않는 값 = 재할당이 불가능한 값
*const로 선언한 객체는 일부 재할당 가능 (자세한건 아래의 객체형 참고.)
*var 은 오류 찾기가 힘들어서 es6부터는 보통 let과 const를 사용한다..!
선언하기 let a = 1; 혹은 let a;
선언후 할당하기 a = 1;
< 변수와 상수의 선언은 1회만 이루어져야한다. >
| 가능 | 불가능 |
| let a = 1; a = 2; |
let a = 1; let a = 2; |
scope : 변수가 어디까지 살아있는지의 범위
block-scope 는 {} 내부가 범위라고 생각하면 된다.
| var | let, const |
| - 함수형 scope. (코드 블럭을 무시!) - 선언과 초기화를 동시에 함 - 선언이 할당보다 아래에 있어도 작동함 |
- block-scope - 선언 후 값이 있어야 초기화가 됨. - 선언이 무조건 할당보다 위에 있어야함. |
TDZ (Temporal Dead Zone) 일시적 사각지대
- 선언만 되어있고 초기화 전에 값이 쓰일때 발생하는 에러.
- let이나 const가 선언보다 할당이 위에 있을때 생기는 상태
자료형
typeof 연산자로 자료형을 알아낼 수 있다.
ex) typeof 2 = number, typeof "문자" = string ...
Javascript는 8가지 기본 자료형을 지원한다.
primitive type(원시형)
- 숫자형 : 정수, 부동 소수점 저장
- BigInt 형 : 아주 큰 숫자를 저장
- 문자형 : 문자열을 저장
- boolean형 : 논리값 true/false
- undefined : 값이 할당되지 않음, 독립 자료형
- null : 값이 존재하지 않음, 독립 자료형
- 심볼형 : 고유 식별자를 만들때 사용
! 심볼형 예시
let A = Symbol("a");
let B = Symbol("a");
이 두가지를 적었을때 A와 B 모두 값은 a지만 "서로 다른" a,
즉 A와 B는 각각 자신만의 a를 가졌기에
A === B 는 false 가 출력된다.
객체형
- 여러타입의 데이터를 담을 수 있다.
- key 와 value로 이루어져있다.
- key 는 무조건 문자! value는 모든 자료형이 가능.
- 선언한 이름.key 로 해당 key에 맞는 value를 찾을 수 있다.
let A = {a: 1, b: 2, c: 3} 를 적었을때
A.a 는 1, A.b는 2, A.c 는 3 이 나온다.
*객체는 내용물(key와 value)을 말한는것, 선언한 이름은 객체라고 하지 않는다.
객체 생성자
- new 를 사용한다.
let a = new A();
객체 리터럴
- 중괄호로 객체를 선언한다.
let A = {} ;
* 객체 리터럴로 객체를 선언해도 엔진에서는 객체 생성자로 변경한다.
const로 선언한 객체의 경우
const A = {a : 1, b : 2} 를 적은 뒤
A.a = 3 으로 재할당을 해줄경우 A의 a는 이후 3으로 변경된 상태로 사용할 수 있다.
단, A = {a : 3, b : 2} 를 적어 객체 자체의 재할당은 불가능하다.
객체의 참조
https://ko.javascript.info/object-copy
참조에 의한 객체 복사
ko.javascript.info
위 사이트에서 눈여겨 볼 부분을 정리했다.
let A = { a : 1 };
let B = A;
A와 B를 위와 같이 선언했을때 B가 가지는건 A 그 자체가 아니라 a:1 이라는 객체이다.
따라서 이후 B.a = 2 ; 를 적어 value 를 변경한다면 A.a 또한 2가 된다.
즉, A 와 B 모두 { a : 1 } 이라는 상시 복제되는 값을 가졌으며
A든 B는 자신이 가진 객체의 값을 변경한다면 이후 원본에 반영된다고 보자.
함수
함수 선언문 (독립적인 함수)
function 함수명( ){ }
함수 표현식(변수에 들어간 비독립적 함수)
let A = function(){}
혹은 let A = () => {}
- 화살표 함수에서 this 는 부모, 기존 표현식에서는 자기 자신을 말함.
- 함수 생성자는 함수 안에 선언해도 전역함수로 읽혀서 사용에 추천하지 않음.
- 함수 안의 함수표현식은 함수 스코프에 따라 함수 안에서만 사용할 수 있음.
함수의 내부변수와 외부변수가 같은 경우 함수 내에서는 내부변수가 우선처리된다.
let a = 1;
function A (){
let a = 2;
console.log(a); //2로 출력됨.
}
콜백함수
- 인수로 전달된 함수
function A (a){ console.log(a) };
function B (a, x){ x(a) };
B ( "감자", A ); //감자 가 출력된다.
다른 함수에 불려져 이용된 A를 콜백함수라고 부른다.
인수 : argument
매개변수 : parameter
* 매개변수는 인수를 복사한 값. 둘이 비슷하지만 엄연히 다르다.
Prototype(= 원형)
!!면접에 자주 나옴
- 객체를 생성할때 사용하는 리소스를 최대한 절감한 패턴
= 원본 객체를 복제해서 새로운 개체를 만드는 패턴
자바스크립트에서의 Prototype
- Javascript는 클래스가 없는 Prototype 기반 동적 언어
- Javascript에서 사용하는 class 는 진짜 class 가 아닌 es6버전부터 지원하는 class 를 따라한 키워드.
- Javascript에서 모든 객체는 Prototype 이 있다.
- Javascript에서 객체를 함수를 사용해서 만들때 함수의 Prototype을 복제해서 만들어진다.
- .prototype 을 통해 Prototype 확인할 수 있다.
fucntion A (){} //이 부분에서 원본=Prototype은 따로 생성된다.
A.prototype // 여기서의 A는 복제본이다.
위를 적으면 constructor 은 A, __proto__ 는 Object라 뜨는데
이때 A는 원본을 말하고 __proto__는 원본 A의 prototype 속성을 말한다.
console에서 __proto__ 는 Prototype Link 를 말한다. 원본의 Prototype 을 보여준다.