데굴데굴

TIL: 2023-04-13 본문

Lesson/TIL

TIL: 2023-04-13

aemaaeng 2023. 4. 13. 19:55

⚙️ 오늘 학습한 내용

JavaScript 클로저, 전위 연산자, 후위 연산자

 

🐹 오늘의 기분

어제 면접 스터디 질문이 클로저였는데 서로의 답변을 들어보면서 리액트의 훅에도 클로저가 쓰였다는 사실을 새롭게 알게 되었다. 면접 연습이 목적인 스터디이긴 하지만 끝나고 나서 이런 이론에 대한 이야기를 나누면서 얻어가는 것도 많아서 좋다. 생각해보니까 `useState`도 쓸 때마다 각자의 상태를 보존하고 있는데 그게 클로저의 개념이었다니 신기했다. 

 

🗝 키워드

클로저, 은닉화, 캡슐화, 전위 연산자, 후위 연산자

 

🗣 스스로에게 설명

클로저 

중첩 함수에서 내부 함수가 외부 함수의 스코프를 보존하고 있는 것을 말한다. 

외부 함수가 종료되어도 내부 함수가 외부 함수의 스코프를 보존하고 있어 프라이빗 메소드를 만들 때 유리하다. 

변수를 함수에 가둬둘 수 있기 때문에 불필요한 전역 변수의 사용을 억제할 수 있다. 

하지만 바깥 스코프의 내용을 계속 기억하고 있어야 하기 때문에 메모리 측면에서는 효율적이지 않다. 

 

실질적으로 이 클로저를 언제 쓸 수 있는지 잘 모르겠어서 찾아봤는데 이 글이 가장 도움되었다. 

 

What is a practical use for a closure in JavaScript?

I'm trying my hardest to wrap my head around JavaScript closures. I get that by returning an inner function, it will have access to any variable defined in its immediate parent. Where would this be

stackoverflow.com

 

<script>
var updateClickCount = (function(){
    var counter = 0;

    return function(){
        ++counter;
        document.getElementById("spnCount").innerHTML = counter;
    }
})();
</script>

<html>
<button onclick="updateClickCount()">click me</button>
<div> you've clicked
    <span id="spnCount"> 0 </span> times!
</div>
</html>

(해당 글에서 가져온 코드)

이렇게 쓰면 전역에서 변수를 변경할 위험이 사라지고, 오로지 저 함수를 클릭할 때만 값 변경이 가능해진다. 

function increment() {
    let count = 0;
    return function () {
        count++;
        console.log(count);
    }
}

const cnt1 = increment();
const cnt2 = increment();

클로저로 변수를 여러 개를 선언하게 되면 스코프가 각각 생성된다. 

cnt1(); // 1
cnt1(); // 2
cnt1(); // 3
cnt1(); // 4

cnt2(); // 1
cnt2(); // 2

 

`useState`도 여러 번 써서 다른 상태값들을 보관할 수 있어서 이 측면에서 리액트 훅에 클로저가 쓰였다는 걸 짐작하게 되었다. 

 

 

<JS> 클로저에 대한 고찰 (소개 / 활용 / 단점 / 메모리)

1. 소개 * 배경 - 최근 기업 면접을 다니며 가장 자주 받은 질문 중 하나가 클로저에 대한 질문이었다. 간단하게만 묻고 넘어가는 기업도 있었지만 내가 어디까지 생각해봤는지 물어보는 기업도

haesoo9410.tistory.com

 

이 글도 보게 되었는데 나중에 참고해봐야겠다.

 

React Hook과 Closure의 관계 (feat. useState)

상상도 못한 정체! ㄴㅇㄱ

www.fronttigger.dev

 

전위 연산자, 후위 연산자

// 참고: 자바스크립트 딥다이브
let num = 3;
let result;

result = x++;
console.log(result, x); // 3, 4

위처럼 `result = x++`로 작성하면 `x`가 먼저 `result`에 할당되고 나서 `x`의 값이 1 증가한다. (선할당 후증가)

result = ++x;
console.log(result, x); // 5, 5

전위 연산자로 작성하면  `x`의 값이 1 증가한 후에 `result` 변수에 할당된다. (선증가 후할당)

 

 

JavaScript :: 증감 연산자(++, --) Feat. 전위 연산자, 후위 연산자

JavaScript의 증감 연산자(increment++, decrement--)와 함께, 전위 연산자(prefix operator), 후위 연산자(postfix operator)에 대해 알아보자🤓

velog.io

 

위 글을 읽어보니 eslint에서도 증감 연산자로 값을 변화시키는 걸 권장하지 않는다고 한다. 위치에 따라 할당 방식이 바뀌기 때문에 예측이 힘들기 때문이라고 한다. 따라서 복합연산자 `+=`를 쓰도록 해야겠다.

'Lesson > TIL' 카테고리의 다른 글

TIL: 2023-04-21  (0) 2023.04.21
TIL: 2023-04-17  (0) 2023.04.17
TIL: 2023-04-10  (0) 2023.04.10
TIL: 2023-04-03  (0) 2023.04.03
TIL: 2023-03-30  (0) 2023.03.30
'Lesson/TIL' Related Articles more
Comments