index
1장
자바 스크립트 데이터 타입
- 자바스크립트의 모든 값은 데이터 타입을 갖고 있으며, 이 타입은 크게 원시 타입과 객체 타입으로 나눌 수 있다.
원시 타입
boolean : 참 거짓만을 가질 수 있는 데이터 타입이다. 주로 조건문에서 많이 쓰이는 데이터 타입이다.
null : 값이 없거나 비어있을때를 의미한다.
undefined : 변수가 선언된 후 아직 값이 할당 되지 않았음을 의미한다.
number : 정수와 실수를 구분해 저장하는 다른 언어와 다르게, 자바스크립트는 모든 숫자를
하나의 타입에 저장했었다. (2의 53승 - 1) ~ -(2의 53승 - 1)만의 데이터를 나타낸다. 이 이상의 값을 위해선 bigInt를 사용해야한다.
string : 문자열을 청의한다
symbol : symbol 함수만을 이용해 만들 수 있고, 중복되지 않는 고유의 값을 나타내기 위해 사용한다.
bigint : es2020에서 새롭게 나온 방식으로 number의 한계를 뛰어넘어 더 큰 숫자를 저장할 수 있게해준다.
객체 타입
object : 7개의 원시 타입 이외의 모든 것 함수,정규식,클래스 등이 여기에 포함된다.
원시타입과의 가장 큰 차이라면 값의 할당 방식이다. 객체 타입은 참조로 할당하며 값의 수정 삭제를 염두해 둔다.
var hello = {
greet : "hello, world"
}
var hi = {
greet : "hello, world"
}
//값이 아닌 참조로 비교하기 때문(서로의 주소값은 다르다.)
console.log(hello === hi) // false
Object.is
동등 비교의 한계를 개선하기 위해 나왔으나 인수가 객체인 경우는 해결할 수 비교를 할 수 없다.
이 때문에 리엑트 팀에선 props가 변경됬을 때를 파악하기 위해 자체적으로 shallowEqual이란 함수를 이용한다.
다만 위 함수도 depth 1까지의 인수 비교만 가능하며 이후는 비교할 수 없다.
재귀를 이용해 이를 구현할 수 있겠지만 아마 성능(반복된 재귀는 좋지 않은 영향을 미침)때문에 이를 고려하지 않은 듯 하다.
함수
자바스크립트에선 함수란 작업을 수행하거나, 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸 실행 단위를 만들어 놓은 것이다.
정의 방식 4가지
- 일반 함수
function add(a,b)
{
return a + b
}
- 함수 표현식
const sum = function(a,b){
return a + b
}
함수 표현식은 호이스팅되지 않는다.
- Function 생성자
const add = new Function('a','b','return a+b')
- 화살표 함수
const add = () = >{
return a + b
}
일반함수와 다르게 화살표 함수 this는 상위 컨텍스트를 가르킨다.
다양한 함수
- 즉시 실행 함수
(
function(a,b){
return a + b
}
)
말 그대로 함수를 정의하고 그 즉시 실행하는 함수를 의미한다. 단 한번만 호출되고 다시금 호출 할 수 없다.
- 고차함수
const add = (a) => (b) => a+b
함수형 컴포넌트를 인수로 받아 새로운 함수형 컴포넌트를 반환하는 경우를 의미한다.
함수를 만들 떄 주의해야할 사항
- 함수의 부수효과를 억제해야한다. 부수효과란 함수가 외부에 영향을 미치는 것을 의미한다. 함수는 외부의 요소를 수정해선 안되고 언제 어디서나 어떠한 상황에서든 동일한 인수를 받으면 동일한 결과를 반환해야한다.
다만 부수효과가 어쩔수 없음은 인지해야한다 흔히 쓰이는 console, http 요청 이런한 모든 함수들이 부수효과이다 다만 이를 최소화하려 노력해야함을 의미한다.
리엑트로 치면 useEffect를 남용하지 말듯 말이다.
-
가능한 함수는 적게 만들어야 한다. 함수가 길어질 수 록 코드의 추적이 힘들고 내부에 어떤일이 일어났는지 추적하기 어려워진다. max-lines-per-function이라는 린트룰에선 함수를 50줄 이하로 제한하기도 한다.
-
누구나 이해 가능한 이름을 붙여야한다. 가능한 함수의 이름을 간결하고 이해하기 쉽게 붙여야 관리히기 편하다.
클래스
ES6에 추가된 요소로 객체를 만들기 위한 일종의 템플릿이라 볼 수 있다. 반복된 객체를 추상화 해놓은 틀이라고 생각할 수 있다.
constructor
constructor는 생성자로, 객체를 생성하는데 사용되는 특별한 매서드 이다.
프로퍼티
프로퍼티란 클래스로 인스턴스를 생성할 떄 내부에 정의할 수 있는 속성값을 의미한다.
class Car{
constructor(name)
{
this.name = name
}
}
const myCar = new Car("자동차")
get , set
내부 요소에 접근할 때 사용한다.
class Car{
constructor(name)
{
this.name = name
}
get firstCharacter(){
return this.name[0]
}
set firstCharacter(char)
{
this.name = [char, this.name.slice()]
}
}
인스턴스 매서드
클래스 내부에 선언된 매서드를 인스턴스 매서드라 칭한다.
class Car{
constructor(name)
{
this.name = name
}
get firstCharacter(){
return this.name[0]
}
set firstCharacter(char)
{
this.name = [char, this.name.slice()]
}
hello(){
console.log("hello")
}
}
클로저
함수와 함수가 선언된 어휘적 환경의 조합이다.
스코프
변수의 유효 범위에 따라 어휘적 환경이 결정됨을 지칭하는 용어이다.
-
전역 스코프 : 전역에 선언된 스코프를 의미하며 대표적으로
global이나 브라우저에서 실행되는window가 존재한다. -
함수 스코프 : 기본적으로 자바스크립트는 함수 레벨 스코프를 따르며 선언된 함수 블록내에서 유요한 선언을 의미한다.
for (var i =0 ; i <5; i++)
{
setTimeOut(function(){
console.log(i)
},i * 1000)
}
위 함수에서 i가 지속적으로 5가 나오는 이유는 i가 전역 스코프로 설정이 되어 있기 떄문이다.
for (let i =0 ; i <5; i++)
{
setTimeOut(function(){
console.log(i)
},i * 1000)
}
문을 사용하는 let 으로 바꿔서 실행해보면 잘 되는것을 확인할 수 있다.
클로저는 안전하지만 비용이 비싸다 실제 브라우저에서 스코프로 선언 한 요소는 큰 공간을 차지한다.
싱글 스레드
기본적으로 자바 스크립트는 싱글 스레드에서 작동한다. 쉽게 말해 기본적으로
하나의 작업만 동디 방식으로 처리하는 것을 의미한다. 과거에는 프로그램을 실행하는 단위가 오직 프로세스뿐이었다. 그러나 시대가 발전하면서 프로세스만으로 작업을 나누기엔
세분화가 필요했고 이에 탄생한 더 작은 실행단위가 스레드이다.
자바스크립트는 멀티스레드의 동시성 처리의 복잡합 때문에 이에 대한 처리가 필요해 싱글 스레드로 설계를 했다. 초기에 자바스크립트는 간단한 창을 띄우는 정도의 역할을 위해 만들어
졌으니 충분히 납득이 가는 방식이였다 다만 점점 웹이 복잡해지며 네트워크 패칭 같은 요구사항이 생기기 시작했고 이를 위해 이벤트 루프를 이용한 비동기적 작업을 처리하도록 구축되었다.
타입 스크립트 팁
-
any보단unknown을 사용해라any는 정적 타이핑을 버리는 짓이다.unknown은any처럼 어떤 값인지 알 수 없음을 의미하지만, 사용하기 위해선 좁혀야하기 떄문에 에러를 방지할 수 있다. -
타입 가드를 활용해라,
unknown타입의 예제에서 확인할 수 있듯, 타입을 사용하는 쪽에선 최대한 타입을 좁히는 것이 좋다. -
제네릭은 함수나 클래스 내부에서 단일 타입이 아닌 다양한 타입에 대응할 수 있도록 도와주는 도구이다.