아무튼 개발
article thumbnail
[JS] 변수가 왜 '암묵적'으로 undefined로 초기화가 된다는 걸까?
Front-end/JavaScript 2023. 12. 10. 16:35

변수는 총 선언, 초기화, 할당의 3가지 과정을 거친다. var 키워드로 선언한 변수는 let, const와 다르게 선언과 초기화를 동시에 한다. 초기화 단계에서 변수의 값은 암묵적으로 undefined가 된다. 왜 여기에서 '암묵적'이라는 단어가 들어가는 것일까? 모던 딥다이브 자바스크립트책을 다시 한번 읽다가 이 키워드가 눈에 들어오기 시작했다. 암묵적 사실 변수는 undefined로 초기화되지 않는다. 메모리 공간에 이전에 다른 애플리케이션에서 사용하던 쓰레기 값이 남아있을 수 있다. 값을 할당하지 않은 상태에서 참조하게 되면 쓰레기 값이 나오는 것이다. 이러한 오류를 방지하기 위해 자바스크립트는 undefined로 한번 더 할당한다. 즉, 최초로 값을 할당하는 초기화 단계에서 var 키워드로 선언..

article thumbnail
[Vite] vite에서 환경변수 env 값 설정하기
트러블슈팅 2023. 4. 16. 23:28

vite 환경에서 환경변수 값을 주기 위해서는 기존의 CRA와 다르게 설정해야 한다.처음에는 CRA처럼 환경변수에 접근해서 값이 나오지 않았는데, Vite의 경우 prefix가 달랐다! 먼저 CRA에서 접근하는 방법을 알아보자.CRACreate-react-app으로 만든 React에서는.env 파일에서 REACT\_APP을 prefix로 붙여야 한다.그다음 이를 사용하기 위해서는 process.env 를 앞에 붙여서 사용한다.Vite환경변수 생성Vite의 경우, VITE\_를 prefix로 사용하여 환경변수를 생성해야 한다.# .envVITE_TEST_VALUE=123환경변수 사용그다음 앱에서는 import.meta.env로 값에 접근할 수 있다.dotenv 패키지도 필요가 없다.const TEST_VA..

article thumbnail
[JS] 정규식 안에 변수 넣기
Front-end/JavaScript 2023. 3. 23. 23:54

정규식에 사용할 패턴이 변할 가능성이 있거나, 외부에서 패턴을 가져오는 경우 변수를 사용해야 한다. 변수를 활용하기 위해서는 RegExp 객체의 생성자 함수를 사용해서 정규식을 생성할 수 있다. 기본 사용법 pattern 변수를 먼저 생성한 다음, 정규식 생성자 함수에 값을 넣어준다. 생성자 함수의 경우 빗금(/ /)이 아닌 따옴표("")를 사용한다. const str = "abcdef"; const pattern = "abc"; const regex = new RegExp(pattern); str.match(regex); // true 추가 활용 const pattern = "abc"; const regex1 = new RegExp(pattern, "g"); // 플래그 추가 const regex2 =..

article thumbnail
[JS] 데이터 타입 - 원시 타입 알아보기
Front-end/JavaScript 2023. 3. 20. 20:31

데이터 타입 자바스크립트의 모든 값은 데이터 타입을 지니며, 7개의 데이터 타입이 존재한다. 모두 원시 타입과 객체 타입으로 나누어진다. 데이터 타입이 필요한 이유는 값 저장 시, 확보할 메모리 공간의 크기 결정 값 참조 시, 한 번에 읽어 들일 메모리 공간의 크기 결정 메모리의 2진수를 어떻게 해석할지를 결정 이다. 자바스크립트는 자바, C와 같은 정적 타입 언어와 다르게 동적 타입 언어이다. 따라서 값을 할당하는 "시점"에 변수의 타입이 동적으로 결정된다. 또한 추후에 원하는 타입으로 자유롭게 변경 가능하다. (재할당) 변수는 타입을 갖지 않으며, 값이 타입을 갖는다. 값에 의해 변수의 타입이 동적으로 결정된다고 할 수 있다! 오늘은 데이터 타입 중에서 원시 타입을 알아보겠다. 원시 타입 (primi..

article thumbnail
[JS] arguments 객체 | 나머지 매개변수
Front-end/JavaScript 2023. 3. 6. 23:07

화살표 함수를 제외한 모든 함수에서 arguments 객체를 사용할 수 있다. arguments arguments 객체를 통해 함수 호출 시 전달한 인자들을 참조할 수 있다. 유사 배열 객체이기 때문에 인덱스 프로퍼티와 length 프로퍼티 등을 가지고 있다. 사용 방법 arguments로 입력해주면 바로 사용할 수 있다. 배열처럼 index 프로퍼티로 값에 접근할 수 있으며 인자로 받은 값의 갯수를 length 프로퍼티로 받을 수 있다. function sum(x, y, z) { console.log(arguments[0], arguments[1], arguments[2]); // 1, 5, undefined console.log(arguments.length); // 2 arguments[1] = 3..

profile on loading

Loading...