자바스크립트 Deep Dive - week 3

하머·2022년 11월 23일

자바스크립트 자바스크립트 deep dive

자바스크립트 Deep Dive

목록 보기

3/6

알게 된 점

React.memo는 얕은 비교를 한다고 보았는데 이 얕은 비교가 어떻게 동작하는지 알 수 있게 되었다.
- 실질적인 값이 아닌 메모리 주소만을 비교하는 것
깊은 복사 역시 useState와 같은 상태값 저장에서 참조데이터를 수정할 때 쓰이는데 깊은 복사와의 차이점을 알 수 있었다.
- 얕은 복사는 참조 메모리 주소를 전달하고, 깊은 복사는 그 값들을 복사해 새 메모리 주소를 갖는 변수를 만들어 복사한다.
함수에 전달되는 값들은 원시 데이터일 때 값 자체가 복사되어 전달되고, 객체는 참조 값이 복사되어 전달된다.
- 객체를 함수에 전달하면 객체는 변경 가능한 값 이므로 바깥의 변수를 함수 내에서 변경할 수 있음.
- ~~리액트 컴포넌트는 순수함수 이므로~~ => props가 읽기 전용인데 이에 해당되는 중요한 부분인 것 같다.
- (수정) 정확히는 공식문서에서 props를 순수함수처럼 사용하라는 것이였다.
이전에 api를 요청하는 함수들을 구현할 때 왜 좋은지 모르고 즉시실행 함수로 만들었던 기억이 있는데 이번에 알게 되었다.
- 즉시 실행 함수로 만든다면 가져와 사용하는 곳에서는 리턴되는 값만 알게되고 그 안의 변수나 식들은 알수가 없기 때문에 엔드포인트나 비즈니스를 private하게 사용하고, 그 안에 사용되는 변수들과 충돌되지 않게 하기 위함 이였음.
호이스팅이 그저 끌어올려 사용되는 것이라고 생각했었는데, 정확히는 변수의 선언을 스코프의 선두로 끌어올려 사용하는 것이였다. 스코프가 단위인 셈

퀴즈

얕은 복사/비교는 변수의 무엇을 비교할까요?
화살표 함수는 식일까 문일까
아래 코드의 예상값은 무엇일까

var callbacks = [];

function print(foo) {
	console.log(foo);
}

for (var i = 0; i < 2; i++) {
	callbacks.push(() => print(i));
}

for (var callback in callbacks) {
	callback();
}
// expected result: ??

아래의 함수는 순수함수일까 비 순수함수일까

function print(foo) {
	console.log(foo);
}

매개 변수를 객체로 받는 함수는 순수함수일까 비 순수함수일까

11장 - 원시 값과 객체

원시 값

원시 값은 불변성을 띄고 있다

var str = "string";

str[0] = "S";
console.log(str); // expected: 'string';

흔히 값을 바꾼다고 하는 것은 원시값의 경우 식별자가 가르키는 메모리주소를 바꾸는 것이다.
이미 있는 변수의 값을 다른 변수에 할당할 시 이를 값에 의한 전달 이라고 하는데, 값은 동일할지라도 식별자가 가르키는 메모리주소는 다르다.

참조 값

12장 - 함수

함수

함수는 한가지 일만 해야하며 가급적 작게 만들어야한다. - 클린코드
코드의 재사용, 유지보수 편의성, 코드의 신뢰성 등의 장점이 있다.

함수란 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
function... 으로 시작하는 함수 선언 문은 반드시 이름을 적어야 한다.
🤔 화살표 함수는 식일까 문일까
함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.
변수에 함수를 할당하는 함수 표현식과 함수 선언문의 생성 시점은 다르다.
따라서 매개변수는 최대 3개 이상을 넘지않고 넘는다면 객체로 전달하는 것이 바람직 하다.
모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관된다.

function add(x, y) {
console.log(arguments);
// Arguments(3) [2, 5, 10, callee: f, Symbol(Symbol.iterator): f]

return x+y;
}

add(2, 5, 10)

매개변수의 갯수를 넘어가도 arguments에 보관되는 모습이다.
이를 통해 가변 인자 함수를 구현할 수 있다.

순수함수

순수함수란
- 어떤 외부 상태에 의존하지도 않고 변경하지도 않는, 즉 부수 효과가 없는 함수를 순수함수 라 한다.
- 동일한 인수가 전달되면 언제나 동일한 값을 반환하는 함수
- 또한 외부 상태에 의존하지도 않기 때문에 외부 상태를 변경하지도 않는다.
순수함수는 인수를 변경하지 않고 인수의 불변성을 유지한다.
매개변수로 참조형 데이터 타입을 받는 함수는 순수함수가 아니다.
- 실제 값을 받는것이 아닌 참조 메모리 주소를 받기 때문에 외부 상태에 의존되고, 외부 상태를 변경할 수 있기 때문이다.
  ⇒ props가 읽기 전용인 이유
순수 함수와 보조 함수등을 사용해 외부 상태의 변경을 최소화하는 것이 함수형 프로그래밍의 목적이다.

13장 - 스코프

스코프는 식별자가 유효한 범위를 말한다.
실행 컨텍스트가 돌며 런타임에서 사용할 변수를 찾게 되는데 어떤 변수를 참조해야 할 것인지 결정해야한다. 이를 식별자 결정 이라고 한다.
스코프란 다른의미로는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙

지역과 지역 스코프

지역이란 함수 몸체 내부를 말하고
지역 변수란 지역에 변수를 선언하면 지역스코프를 가진 변수라는 뜻이다.
즉 지역 변수는 자신의 지역 스코프(inner)와 하위 지역스코프(outer)에서 유효하다.
실행 컨텍스트에서 사용할 변수를 찾을 때 스코프 체인을 통해 inner -> outer -> outer -> outer(global) 이런 방식으로 찾기 때문에 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 변수를 검색한다.
var => 함수 레벨 스코프, let, const => 블록 레벨 스코프

렉시컬 스코프

렉시컬 스코프 = 정적 스코프 === 스코프가 바뀌지 않는다.
자바스크립트는 렉시컬 스코프를 따르므로 함수를 어디서 호출했는지가 아니라 함수를 어디서 정의하였는지에 따라 상위 스코프를 결정한다.
함수 정의가 실행되어 생성된 함수 객체는 정의 되는 부분에서 상위 스코프를 기억하고 함수가 호출될 때마다 함수의 상위 스코프를 참조한다.

14장 - 전역 변수의 문제점

전역 변수의 무분별한 사용은 위험하다. 대부분의 경우 지역 변수를 사용해야한다.
var로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.
변수의 스코프는 좁을수록 좋다. => 메모리 관리나 가독성, 상태의 신뢰도 때문인 것 같다.
호이스팅은 스코프를 단위로 동작한다. 즉 변수선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 말합니다.

es6 모듈

es6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다. var 키워드의 변수는 더는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.
es6 모듈은 구형 브라우저에서는 동작하지 않으며 트랜스파일링이나 번들링이 필요하기 때문에 babel 과 webpack 등을 사용하는 것이 일반적이다.
=> 48장 모듈