Javascript : 스코프(Scope) 및 화살표 함수(Arrow Function)

   Javascript : 스코프 및 화살표함수

 

1. 스코프(Scope) 

    스코프(Scope) 란?

     스코프의 사전적 의미는 '범위'이며, 변수 또는 함수가 어디까지 영향이 있는지 유효 범위를 뜻한다.

     전체 영역에 영향이 있다면 전역 변수, 함수 안에서만 영향이 있다면 지역 변수라고 한다.

   

    전역과 지역을 나누는 이유

    프로젝트의 규모가 크면 클 수록 여러 명의 개발자가 투입되는데, 이떄 만약 같은 이름의 전역변수나 전역함수를 사용하면
     충돌이 생기기 때문에 전역(Global)과 지역(Local)을 나누어야 충돌을 피할 수 있다.

함수명이 같아서 A개발자의 함수는 제거되고 B개발자의 함수만 실행된다.

   개발자A는 200이 출력될 것이라 예상하지만 개발자B가 만든 함수명과 이름이 같아서 B가 만든 것만 호출된다.

   이때 함수 안에 지역변수와 지역 함수를 선언하여 충돌을 방지할 수 있는 것이다.

 

개발자A와 개발자B가 즉시 실행 함수로 지역변수와 지역 함수를 선언하여 충돌을 방지한 예시

 

    전역 변수와 지역 변수의 개념 차이

• 전역변수 : 자바스크립트 어디서든 사용할 수 있다.
• 지역변수 : 함수 스코프 안에서만 사용할 수 있다.

    전역변수와 지역변수의 선언 방법   

 

// 전역변수

var A;

// 지역변수

function 함수명( ){

    var A;    

}

 

    전역 함수와 지역 함수의 차이

• 전역함수 : 자바스크립트 어디서든 사용할 수 있다.
• 지역함수 : 함수 스코프 안에서만 사용할 수 있다.
  함수 스코프 안에서 선언 된 함수는 지역함수가 되어 함수 스코프 안에서만 호출할 수 있다.
  함수 스코프 밖에서 호출되는 경우 함수 스코프에서 선언한 지역 함수가 아닌 전역함수가 호출되어 '전역함수'라는 경고창이 나타난다.

    전역함수와 지역함수의 사용 방법  

 

// 전역함수

function 함수명1( ){

    자바스크립트 코드;

   

}

// 지역함수

function 함수명2( ){

    function 함수명3( ){

        자바스크립트 코드;

    }  

}

 

 

 

 

2. 화살표 함수(Arrow Function)

   화살표 함수(Aroow Function) 이란?

     ES6부터 나타난 새로운 문법이다.

 

    일반 함수와 화살표 함수의 선언 기능은 같다.  

 

// 일반 함수 선언 기본

function myfnc(){

    return x + y

}

// 화살표 함수 기본

let arrowFun01 = (x, y) => {

    return x + y

}

 

    화살표 함수 - 한줄로 작성하기

• 중괄호 안의 return x + y도 중괄호 밖으로 뺄 수 있다.

    화살표 함수 작성이 가능한 예)

 

// 화살표 함수 기본  - 한줄로 작성하기 가능

let arrowFun = (x, y) => {

    return x + y

}

 

// 화살표 함수 - 한줄로 작성하기 + 중괄호 생략이 가능

let arrowFun02 = (x, y) => x + y

 

 

    화살표 함수 작성이 불가능한 예)

 

.// 화살표 함수 작성이 불가능한 예) - 다른 로직이 복잡하게 들어있는 경우 중괄호를 생략할 수 없다.

let arrowFun01 = (x, y) => {

    console.log();

    return x + y

}

    매개변수가 1개라면 괄호도 생략할 수 있다.

 

// (예시) 기본형 - 매개변수가 1개일 때

function myfun01(x){

    return x;

}

 

// 매개변수가 1개일 때 - 1번

let arrowfun01 = (x) => x;

//매개변수가 1개일 때 - 2번 , 매개변수가 1개면 괄호도 없애줄 수 있다.

let arrowfun02 = x => x;