TIL 200312

1. 오늘

• 검색어 자동완성기능을 구현했다.
• 검색어 자동완성기능 개발과정에서 scope에 관한것을 알게 되었다.

스코프

• 스코프는 어떤 변수에 접근할 수 있는지를 정의해준다. 일반적으로 전역스코프와 지역스코프, 2개가 존재한다.

전역스코프

• 어떤 변수가 모든 함수에 속하지 않고, 괄호안에도 들어있지 않다면 그 변수를 전역변수라고 한다.
• 전역변수를 선언하면 js코드 어디에서든 호출할 수 있다. 함수 내부에서도 가능하다.
• 보통 전역변수를 선언하는것은 권장되지 않는다. 중복된 변수의 이름사용으로 네이밍충돌이 발생할 수 있기 때문이다. const나 let으로 변수를 선언하게 되면 이런 네이밍 충돌이 발생하기 쉽다. var로 변수를 선언하게 되면 두번째 변수가 첫번째 변수를 덮는다.

let b = 'abcde'
let b = 'abcde' 
console.log(b)// Error
var a = 'abcd'
var a = 'abcde'
console.log(a) // abcde

• 전역변수의 사용을 자제하고, 지역변수의 사용을 지향해야 한다.

지역스코프

• 코드내 특정구역에서만 사용할수 있는 변수를 지역변수라고 한다. 두가지 종류의 지역변수가 있다.

1. 함수 스코프 지역 변수
2. 블록 스코프 지역 변수

함수 스코프 지역 변수

• 함수 내에서 변수를 선언하면 해당 변수는 해당 함수내에서만 호출이 가능하다. 함수 밖으로 나오게 된다면 함수 내부의 변수에는 접근할 수 없다.

function sayHello () {
	const hello = 'Hello, world!';
    console.log(hello);
}

sayHello(); // 'Hello, world!'
console.log(hello) // Error, hello is not defined

블록 스코프 지역 변수

• 변수를 괄호안에 const나 let 키워드로 선언했을때, 괄호 안에서만 접근이 가능하다.

{
	const hello = 'Hello, world!'
    console.log(hello) // 'Hello, world'
}

console.log(hello) // Error, hello is not defined

• 블록스코프는 함수스코프의 부분집합이다. 함수는 괄호로 작성되어야 하기 때문이다. 화살표 함수로 즉시 리턴하면 괄호없이 함수를 만들수 있지만, 그렇지 않은 경우에는 괄호로 작성되어야 한다.

함수 호이스팅과 스코프

(호이스팅은 ‘끌어올리다’의 의미이다.)

• function키워드로 선언된 함수는 항상 현재 스코프의 가장 위로 호이스팅된다.

// 이 코드의 결과는 아래의 코드와 같습니다.
sayHello();
function sayHello () {
	console.log('Hello, world');
}

// 이 코드의 결과는 위의 코드의 결과와 같습니다.
function sayHello() {
	console.log('Hello, world'); 
}
sayHello();

• 함수표현식으로 작성된 함수들은 현재 스코프의 가장 위로 호이스팅되지 않는다.

sayHello(); // Error, sayHello is not defined
const sayHello = function () {
	console.log('Hello, world');  
}

• 이런 두가지 방법때문에 함수 호이스팅은 헷갈릴 수 있다. 사용하지 않는것이 좋다. 항상 함수는 선언이후에 호출하는게 좋다.

함수는 각자의 스코프에 접근할 수 없다.

• 서로 다른 함수는 각자의 스코프에 접근할 권한이 없다. 심지어 함수내에서 다른 함수를 호출한다고 해도 그 스코프는 사용할 수 없다.

function first () {
	const world = `I'm part of first`;
}

function second () {
	first();
	console.log(world); // Error, world is not defined
}

내부스코프(어휘적 스코프)

• 함수 안에 함수가 있는 경우에, 안쪽함수는 바깥함수의 변수에 접근이 가능하다. 하지만 바깥함수에서 안쪽함수로의 접근은 불가능하다.

function outerFunction () {
	const outer = `I'm the outer function!`;
    
    function innerFunction() {
    	const inner = `I'm the inner function!`;
        console.log(outer) // I'm the outer function!
    }
  
  console.log(inner); // Error, inner is not defined
}

• 자동차 유리같은 일방향으로만 보이는 유리를 생각하면 쉽다.

클로져

• 함수안에 함수를 만들때 사실 우리는 클로져를 만든 것이다. 안쪽함수가 클로져이다.
• 일반적으로 반환시키기 위해 클로져를 만든다. 반환된 클로져를 이용해 바깥함수의 변수를 이용할 수 있다.

function outerFunction () {
	const outer = `I see the outer variable!`;
    
    return function innerFunction () {
    	console.log(outer);
    }
}


outerFunction()() // I see the outer variable!

• 클로져는 바깥함수의 변수에 접근할 수 있기에 주로 두가지 이유에서 사용된다.

1. 사이드이펙트를 제어하기 위해
   (사이드이펙트 : 어떤 함수내에서 자신의 스코프가 아닌 변수를 제어하는 것)
2. private 변수를 만들기 위해
   (private 변수 : 외부에서 접근할 수 없고, 내부에서만 이용하는 변수)