스코프, 클로저와 ES6 신규 문법

김나율·2022년 9월 18일

section1

목록 보기

19/23

◎스코프

: 변수 접근 규칙에 따른 유효 범위( 중괄호(블록)안쪽에 변수가 선언되었는가, 바깥쪽에 변수가 선언되었는가가 중요)
-바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능
-안쪽에서 선언한 변수는 바깥쪽 스코프에서 사용 불가

‣규칙

안쪽 스코프에서 바깥쪽 스코프로는 접근 가능하지만 반대는 불가
스코프는 중첩이 가능

-전역스코프(global scope):가장 바깥쪽의 스코프 => 선언한 변수는 전역변수
-지역스코프(local scope): 전역이 아닌 다른 스코프 => 선언한 변수는 지역변수
지역변수는 전역변수보다 더 높은 우선순위

‣변수 선언과 스코프

스코프의 종류
- block scope : 중괄호로 둘러싼 범위
- function scope : function키워드가 등장하는 함수 선언식 및 함수 표현식
  *화살표함수는 블록스코프
키워드

let const var
유효범위 블록스코프 및 함수 스코프 블록스코프 및 함수 스코프 함수 스코프
값 재할당 가능 불가능 가능
재선언 불가능 불가능 가능

*let키워드 권장하는 이유
1. 블록단위로 스코프를 구분했을때, 훨씬 더 예측 가능한 코드를 작성 가능
2. var은 재선언해도 에러 x , let은 재선언 방지
let의 유무
ex)
-let 있음

	let	const	var
유효범위	블록스코프 및 함수 스코프	블록스코프 및 함수 스코프	함수 스코프
값 재할당	가능	불가능	가능
재선언	불가능	불가능	가능

Let age=’24’;  //전역 변수
Function showage(){
  let age=’14’;  //지역 변수
  Console.log(age);  //두번째 출력
}
Console.leg(age);  //첫번째 출력
showage();
Console.log(age);  //세번째 출력
출력
: 24
  14
  24

=>첫번째 출력은 첫째줄에서 전역변수로 선언된 age를 가져옴
showage함 수내 지역변수 age에 접근 불가
두번째 출력은 지역변수가 전역변수보다 우선순위가 높으므로 지역변수 age출력
세번째 출력도 전역변수 age출력

-let 없음

Let age=’24’;  //전역 변수
Function showage(){
age=’14’;  
Console.log(age);  //두번째 출력
}
Console.log(age);  //첫번째 출력
showage();
Console.log(age);  //세번째 출력
출력
:24
14
14

=>let키워드를 사용하지 않으면 showage함수가 실행되기전은 전역변수 age를 가져오고 실행 후에는 전역변수 값이 바뀌기 때문에 그 값이 출력

◎클로저함수

: 외부함수의 변수에 접근할 수있는 내부함수

‣ 특징

함수를 리턴하는 함수
ex)

const adder=function(x){
  return function(y){  //리턴값이 함수의 형태
    return x+y;
  }
}
and
const adder = x => y => x+y;
adder(5). //y=> x+y 리턴값이 함수의 형태

외부함수와 내부함수
: 리턴하는 함수에 의해 스코프(변수의 접근범위)가 구분된다.
ex)

const adder=function(x){  //외부함수의 변수x
  return function(y){  //내부함수의 변수 y
    return x+y;
  }
}

‣ 장점

데이터를 보존하는 함수
: 외부함수의 실행이 끝나더라도, 외부함수 내 변수(x)를 사용할 수있습니다.
ex1)

const adder=function(x){
 return function(y){
   return x+y;
 }
}
Const add=adder(3);  //함수 실행이 끝나도 3이라는 값은 사용가능
add(4). //7
add(11) //14

ex2)

const tagmaker=tag=>content=>`<${tag}>${content}</${tag}>`
const spanMaker = tagMaker('span);
spanMaker('hello');  //<span>hello</span>

정보의 접근 제한(캡슐화)
: 불필요한 전역 변수 사용을 줄이고, 스코프를 이용해 값을 보다 안전하게 다룰 수 있다.
-클로저 모듈 패턴
: 클로저를 이용해 객체에 담아 여러 개의 내부 함수를 리턴하도록 만든다.
ex)
```
const makeCounter = () => {
let i=0;

return{
  increase: () => {
    i=i+1
  },
  decrease: () => {
    i=i-1
  }
}

const couter1=nakeCounter();
counter1. //{increase:f, decrease: f}`
```
=> 스코프 규칙에 의해 i라는 변수에 값을 새롭게 할당할수 없다.
모듈화
: 함수 재사용성을 극대화하여, 함수 하나를 독립적인 부품 형태로 분리하는 것
ex)
```
 const counter1=makeCounter();
 counter1. decrease();
 counter1.increase(); //0
 
 const counter2=makeCounter();
 counter2.increase();
 counter2.increase();
 counter2.decrease();  //1
```
=> 리턴된 객체는 실행할 때에 선언되는 값을 각자 독립적으로 가지게 된다.

◎ES6 신규 문법

‣spread/rest 문법

spread문법
: 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을때에 사용한다.
ex)
```
function minus(x,y,z){
 return x-y-z;
}
const numbers=[6,2,1];
minus(...numbers) //3
```

rest문법
: 파라미터를 배열의 형태로 받아서 사용할 수있습니다. 파라미터 개수가 가변적일때 유용한다.

function minus(...numbers){
 return numbers.reduce((previoius,current) => {
   return previous-current;
 });
}
minus(6,2,1)  //3
minus(6,1,1,1)  //3

사용
- 배열에서 사용하기
1.배열 합치기
ex)

 ```java
    let arr1=[1,2];
    let arr2=[3,4];
    arr1=[…arr1,…arr2];
    return arr1; //[1,2,3,4]
  ```

2.배열 복사
ex)

 let arr1=[1,2];
 let arr2=[…arr1];
 return arr2; //[1,2]
  ```

-객체에서 사용하기
ex)
```java
 let obj1={x:1,z:3};
 let obj2={y:2,z:4};
 let obj123={…obj1};
 return obj123;  //{x:1}
 let obj456={…obj,…obj2};
 return obj456;  //{x:1,y:2,z:4}

=>obj1과 obj2의 키가 같을경우, 값이 덮어진다.
-함수에서 나머지 파라미터 받아오기

function age(a,b,…manyMoreArgs){
 console.log(“a”,a);
 console.log(“b”,b);
 console.log(“manyMoreArgs”,manyMoreArgs);
}
age(“1”, ”2”, ”3”, ”4”, ”5”);
결과
:1
2
[3,4,5]

‣구조분해할당

: spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정

분해후 새 변수에 할당
배열=>const[a,b,…rest]=[1,2,3,4,5]; //a=1, b=2, rest=[3,4,5]
객체=>const{a,b,…rest}={a:1,b:2, c:3, d:4}; //a=1,b=2, rest={c:3,d:4}
*객체에서 구조분해 할당을 사용하는 경우, 선언과 함께 사용하지 않으면 에러가 발생할수 있음