frontend/javaScript

[js 기본기] 오늘의 학습내용

김포레스트 2024. 3. 10. 21:32

1. var를 지양하자

 - var는 재할당, 재선언이 가능한데 이부분에 위험부담이 큼

 - let은 재할당은 가능하지만 재선언은 안됨

 - const는 재선언, 재할당 불가. -> 안전한 코드를 짤 수 있음

 

2. scope

- var의 스코프는 함수단위이기 때문에 if문 for문 안에서는 scope 개념이 적용 안됨.

- if 문 안에서 재선언, 재할당을 해줄경우 전역에 있는 변수까지 오염됨. 

- let과 const는 block scope가 적용 되어서 if 문 내에 있는 변수의 재선언, 재할당에 전역변수가 영향받지 않음

 

3. javascript는 몽키패치라서 window 환경에도 접근 할 수 있음.

- var로 선언을 했을 경우, 파일을 나눴어도 scope가 나뉘지 않는다.

 

4. 원칙

  - 전역변수는 사용하지 않는다.

  - 지역변수를 사용한다

  - window, global 을 조작하지 않는다.

  - iife, module, closer 스코프를 나눈다

 

5. 임시변수를 제거 하자

 - 임시변수의 예 

const newfunction=_=>{

	const result = {};
	result.name = document.querySelector('.title');

	return result;
}

const result = {}; 가 임시변수에 해당함.

 

아래와 같이 바꾸는게 좋다.

const newfunction=_=>{
    return result = {
    	name : document.querySelector('.title'),
    };
}

 

사이드이펙트 없이 객체만 반환할 수 있다. 

 

임시변수가 생기는 순간, 미래의 나 혹은 동료가 임시변수를 자꾸 건드릴 가능성이 생김.

임시변수를 제거해야 하는 이유는 명령형으로 가득한 로직이 위험하기 때문이고, 

어디서 어떻게 잘못되었는지 디버깅이 어렵기 때문.

+ 추가적인 코드를 작성하려는 유혹에 사로잡히기 때문이다.

 

임시변수 하나를 생성해서

연산을 하고 -> for문을 돌리고 -> if문안에서 변수를 재할당하고.... 하는 실수를 많이 한다.(초보들)

 

** 해결책

 - 함수를 나누자

 - 바로 반환을 하자

 - 고차함수를 쓰자(map, filter,reduce)

 - 선언형 코드를 쓰자.

 

 

 

6. 호이스팅 

- var를 쓰면 선언부를 최상단으로 끌어올려 undefiend를 할당해줌

- 함수도 호이스팅 됨.