milliwonkim의 블로그

14. 전역변수의 문제점 전역변수의 문제점 전역변수 지역변수 실행 명시적 호출없이 실행 함수가 실행되야 생김 스코프 전역 스코프 렉시컬 스코프(함수) 생명주기 전역 객체의 생명주기와 일치 렉시컬 스코프가 없어질 때 까지 생존 문제점 암묵적 결합(모든 코드가 전역변수 참조 및 변경가능) 긴생명주기(따라서 메모리 리소스도 오래 소비) 스코프 체인 상 종점에 존재(전역변수의 검색 속도가 가장 느림) 네임스페이스 오염(변수 이름 충돌) 스코프는 항상 좁은게 낫다따라서 전역변수보다 권장된다. 전역변수를 억제하는법 즉시실행함수: 모든 코드를 괄호로 감싸면 ⇒ 모든 변수는 즉시실행함수의 지역변수가 됨 네임스페이스 객체 var MYAPP = { name: "KIM" } ES6 module ES6 모듈은 파일 자체의 독..

이 글에서 "선언 전"이라는 의미는 단순히 줄의 전 후 관계 변수가 글로벌 스코프인 경우 const App = () => { return } const styles = { display: 'flex' } 이 코드는 에러가 안난다. 이유는 styles 변수가 이 파일의 글로벌스코프에 있어서, 어디에서든 접근이 가능하다. 심지어 이렇게 실제로 styles를 사용하는, 그것보다 먼저 선언 및 할당 App 함수에서도 사용 가능하다 const와 let은 블록 스코프이지만, 만약 글로벌 스코프에서 정의됐다면 파일 어디에서든지 접근 가능하다. 변수가 렉시컬 스코프인 경우 const App = () => { const App2 = () => { console.log(styles); return ; }; const st..

let num = 42 const string = "string" 이처럼 원시값이 변수에 할당될 때, 값 자체를 변수에 할당하는게 아니고, 값의 사본이 생성되어 변수에 저장됨 자바스크립트는 42의 사본을 새로운 메모리 공간을 생성하고, 그 메모리 위치에 대한 참조를 변수 num에 할당합니다. 따라서 num은 42의 메모리 위치를 가리키게 됨 그러나 num자체는 값 42가 포함돼있지 않음 그럼 이 참조되는 원본 42는 어디에 있나? 42라는 리터럴 값을 사용하면, 자바스크립트는 이 리터럴 값을 뜻하는 새로운 값을 메모리에 넣는다. 42라는 이 복사값이 만들어지고, 메모리에 저장됩니다. 변수에는 이 복사값의 참조값을 메모리에 저장한다. 최종적으로 우리는 하나의 원시값을 변수에 할당할 때, 2개의 메모리를 사..

9(타입 변환, 단축 평가) const x = 10 // 숫자를 문자열로 명시적 타입 변환(타입 캐스팅)을 한다. const str = x.toString(); console.log(typeof str, str) // string, 10 // x 변수의 값이 변경된 것은 아님 => 원시값을 직접 변경은 불가능하다.(원시값은 변경불가능한 값) console.log(typeof x, x // number, 10 // --------- // 암묵적 타입변환(=타입 강제 변환): 자바스크립트 엔진에 의해 암묵적으로 타입 자동 변환 const x = 10 // x + ''로 인해 생성된 문자열 '10'은 x에 재할당 되지 않는다. // 단순히 새로운 타입의 값을 만들고, 한 번 사용하고 버린다. const str..

결론: 자바스크립트 엔진의 최적화로 인해, 퍼포먼스의 차이는 거의 없고, 가독성과 유지관리의 용이성을 중심으로 코드작성해야합니다. 그래도 굳이 고르자면? => for loop이 퍼포먼스가 더 좋습니다. 왜냐하면 forEach의 경우, 고차함수라는 함수이다보니, 함수호출 및 콜백함수 실행과 관련된 추가작업이 필요합니다. const array = [1, 2, 3, 4, 5]; // 함수실행: forEach라는 함수를 콜스택에 넣는다. 그리고 실행한다. // 콜백함수 호출: forEach안의 콜백함수 (item) => {...}을 실행한다. array.forEach((item) => { console.log(item); }); 반면에 for loop의 경우, i++, i--에 대한 연산만 하면 됩니다. for..

전역 스코프에서 var로 선언하면 window에 자동으로 window의 프로퍼티로 등록됩니다. 왜냐하면 var로 선언된 변수가 함수스코프 뿐만 아니라, 전역 스코프에서도 유효합니다. 하지만 함수스코프안에서 var로 선언 및 할당을 하면 위와는 다르게 window 전역객체에 할당되지 않습니다. 왜냐하면 var는 함수스코프를 제공하기 때문에 여기서의 var는 해당 함수 스코프에서만 유효합니다.

const 키워드로 만든 리액트 컴포넌트는 각 컴포넌트마다 독립적인 인스턴스가 생성되므로, 해당 컴포넌트의 내부에서 window 객체를 사용하더라도 전역 스코프의 window 객체와는 별개로 새로운 window 객체가 생성됩니다. 여기서 독립적인 인스턴스라는 것을 어떻게 아냐? 로 할당하면 새로운 인스턴스를 생성합니다. Object.is()를 통해서 a와 b의 인스턴스가 서로 다른 독립적인 인스턴스라는 것을 말해줍니다. import React from "react"; const Example1 = () => { var count = 0; function handleClick() { count++; console.log(`Count is now ${count}`); } return ( Count: {cou..

리액트에서 var 대신 const 또는 function 키워드를 사용하여 컴포넌트를 만드는 것이 권장됩니다. 현재 테스트해봤을 때, var나 const, let으로 컴포넌트를 선언했을 때 딱히 이슈는 없어보였습니다. var keyword로 리액트 컴포넌트를 만들면 컴포넌트의 새 인스턴스를 만들어내지는 않습니다. 리액트 컴포넌트는 렌더링 될 때, new 생성자로 초기화됩니다. 하지만...! var keyword 모던 자바스크립트 개발에는 추천되지는 않습니다. 대신에 let, const를 사용해야합니다.

let과 const 키워드로 선언된 변수는 전역 객체의 프로퍼티로 등록되지 않습니다. 따라서, 이들 변수는 window 객체에서 찾을 수 없습니다. 예를 들어, 다음과 같이 let 키워드로 선언된 변수 myVariable을 사용할 때 window.myVariable을 출력해보면 undefined이 반환됩니다. let myVariable = 42; console.log(window.myVariable); // undefined 마찬가지로, const 키워드로 선언된 변수 myConstant를 사용할 때도 window.myConstant를 출력하면 undefined이 반환됩니다. const myConstant = "Hello, world!"; console.log(window.myConstant); // u..

브라우저 성능 관점에서 볼 때, re-layout은 re-paint보다 더 비싸다고 일반적으로 여겨집니다. re-layout은 페이지의 모든 요소의 위치와 크기를 다시 계산하는 작업으로, 계산에 상당한 비용이 들어갑니다. 이는 레이아웃이 하나의 요소에 대한 변경뿐 아니라 해당 요소의 부모 및 형제 요소에 대한 변경에도 영향을 받기 때문입니다. 결과적으로, re-layout은 전체 페이지가 다시 렌더링될 수 있으며, 이는 페이지 로드 시간이 더 느려지고 전체적인 성능이 감소할 수 있습니다. 반면, re-paint은 요소의 위치나 크기를 변경하지 않고 페이지의 시각적 모양만 업데이트하는 작업입니다. 이는 re-layout보다 적은 비용이 드는 작업이며, 페이지의 시각적 디스플레이만 변경하기 때문에 복잡한 계..