[코드스테이츠 44기 프론트엔드 블로깅 ] javascript 개념 정리

오늘 포스트는 내 머릿속에 존재하는 개념 중 헷갈렸던 개념이나 새롭게 알게된 개념에 대해 카테고리를 나누어 정리하고자 한다 ! 

 

LetConst

내 머릿속 

"const 를 사용하여 변수를 선언하면 어떠한 변수든 재할당이 금지되는 것이다 ! "
라고 생각했었다. 항상 봐왔던  const 를 사용한 예제에서는 문자열이나 숫자 타입만 다뤘었던 거같다. 그래서 배열과 객체에서는 const 로 사용하는 예제를 접해본 적이 없었다. 따라서 나는 배열과 객체를 const로 선언하면 당연히 재할당이 금지되므로 새로운 요소를 추가하거나 삭제하는 것도 금지될 줄 알았다. 

새롭게 알게된 사실 

1. const 로 선언된 배열 , 객체의 경우 새로운 요소를 추가하거나 삭제할 수 있다. 

const arr = [];
const toBePushed = 42;
arr.push(toBePushed);
//arr[0] = 42 ;

// 여전히 재할당은 금지됩니다.
// arr = [1, 2, 3];

여기서 재할당도 안되는 const 키워드를 굳이 왜 써야할까 ? 하는 궁금증이 생겼다. 

아무래도 의도치 않은 재할당을 막기위해 const를 사용한다고 생각한다. 또한 코딩 스타일 가이드에서도 아래처럼 명시되어있다. 

const또는 를 사용하여 모든 지역 변수를 선언합니다 let. 변수를 재할당해야 하는 경우가 아니면 기본적으로 const를 사용합니다. 키워드 var 를 사용하면 안 됩니다.

---

Scope

내 머릿속

스코프는 정말 공부하기 어려웠던 거 같다... 그냥 모든 부분이 다 낯설고 이해했어도 다시 보면 이해가 안되고 그랬던 부분 같다. 
그래서 알아간 부분이 많았던 거 같다. 

 

새롭게 알게 된 사실 

let funcExpressed = 'to be a function';

    expect(typeof funcDeclared).to.equal('function');
    expect(typeof funcExpressed).to.equal('string');

    function funcDeclared() {
      return 'this is a function declaration';
    }

    funcExpressed = function () {
      return 'this is a function expression';
    };

위의 코드를 살펴보자 expect 시작하는 코드를 보면 첫번째 함수는 function 으로 두번째 함수는 string의 타입을 갖는다.
첫번째 함수가 선언되기도 전인데 함수를 인식하고 타입을 선별해주었다. 이게 왜 되는것일까 ?
바로 함수 선언문으로 정의된 함수는 호이스팅이 일어난 것처럼 보이기 때문이다. 
따라서 이런 호이스팅은 일어나면 좋은건 아니므로 함수 표현식으로 함수를 작성하는 것을 권장한다. 

여기서 호이스팅이 무엇인지 간단하게 검색해보자 
인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것.
var 로 선언한 변수의 경우 호이스팅 시 undefined 로 변수를 초기화한다.

즉 호이스팅이 발생한다는 것은 선언되기 전에 미리 할당해 마치 위에서 선언된 것처럼 동작하는 것이다. 

defaultParameter 
파라미터 내에서도 할당이 가능하다 . 

function defaultParameter(num = 5) {
      return num;
}
defaultParameter() // 5
defaultParameter(10) //10​

만약 매개변수로 10이 들어온다면 10이 출력된다. 

클로저 (closure)
함수가 함수를 리턴한다 ? -> 그럼 클로저 아냐 ? 의심해봐야한다. 
내부에 리턴되고 있는 함수가 외부함수 내의 변수를 사용하고 있다면 클로저라고 말한다. 

function increaseBy(increaseByAmount) {
      return function (numberToIncrease) {
        return numberToIncrease + increaseByAmount;
      };
    }​

외부함수의 매개변수를 내부함수가 사용하고 있다. 

클로저를 왜쓸까 ?
변수를 안전하게 보호하기 위해서 사용한다. 
변수를 은닉시켜 변수를 보호한다. 

 

 

---

ArrowFunction

내 머릿속

화살표 함수의 존재는 알고 있었지만 대체적으로 사용해본적은 거의 없는 거같다. 또한 화살표 함수의 필요에 따라 리턴을 생략하거나 소괄호를 생략하거나 하는것을 알지 못했다 .

새로 알게된 사실 

it('화살표 함수 사용법을 익힙니다', function () {
    // function 키워드를 생략하고 화살표 => 를 붙입니다
    const add = (x, y) => {
      return x + y
    }

    // 리턴을 생략할 수 있습니다
    const subtract = (x, y) => x - y
  

    // 필요에 따라 소괄호를 붙일 수도 있습니다
    const multiply = (x, y) => (x * y)
  

    // 파라미터가 하나일 경우 소괄호 생략이 가능합니다
    const divideBy10 = x => x / 10
    
  })

간단하게 사용할 수 있는 화살표 함수에 대해 위의 코드로 정리해보았다. 

 

 

(실시간 세션 후 더 추가예정)