치춘짱베리굿나이스

비동기와 콜백 함수 ver. 2023 https://blog.chichoon.com/520 비동기 처리와 Promise 비동기 처리와 Promise 동기 (Synchronous) 와 비동기 (Asynchronous) const [testValue, setTestValue] = useState(0); const handleOnClick = () => { setTestValue(testValue + 1); setTestValue(testValue + 1); setTestValue(testValue + 1); setTestValue(t blog.chichoon.com 비동기와 Promise에 관해서 한번 글을 적은 적이 있었는데 이번에는 2023 ver. 느낌으로 좀 더 업그레이드해서 적어보려 한다 맨날 공부..

Hoisting console.log(a); // 1 ?! var a = 1; 자바스크립트 단골 질문인 호이스팅이다 호이스팅 자체는 어떻게든 이해가 가더라도, 그 원리까지 공부하자니 온갖 선행 개념들이 많아 이 김에 정리해볼까 한다 왜 발생하고 어떻게 발생하는지 알아보도록 하자 설명 Hoist라는 영단어는 무언가를 끌어 올린다는 뜻을 가지고 있다 뜻을 풀었으니 한줄요약하자면 호이스팅은 변수나 함수의 선언을 맨 위로 끌어올린 것처럼 동작하는 현상이다 실제로 변수나 함수 선언이 최상단으로 끌어올려진 것은 아니고, 자바스크립트 엔진의 특성상 끌어올려진 것 처럼 동작하는 것 뿐이라고 한다 발생 이유 https://chichoon.tistory.com/921 실행 컨텍스트에 대해 필독하고 오자 (호이스팅은 실행 ..

실행 컨텍스트 호이스팅을 알아보기 전에 실행 컨텍스트에 관해서 짚고 넘어갈 필요가 있다 호이스팅이랑 같이 적으려다가 실행 컨텍스트 쪽 분량이 너무 방대해지는 바람에 호이스팅이랑 분리함… 설명 자바스크립트에서 사용되는 객체로, (자바스크립트는 진짜 모든 것이 객체 같다…) 실행할 코드에 제공할 변수, 함수 등의 정보들을 모아놓는 공간이라고 말할 수 있겠다 쉽게 말하자면 코드의 실행 환경을 객체로 저장해둔 것이라고 생각하면 좋다 이 실행 컨텍스트는 콜 스택에 적재되어 함수가 순서대로 실행될 수 있도록 한다 콜 스택 (호출 스택) https://blog.chichoon.com/701 자세한 것은 이 포스팅을 참조하자 코드가 실행될 때마다 실행 컨텍스트 (프레임) 가 쌓이는 공간이다 말 그대로 스택이라 LIFO..

any, unknown, never any와 unknown 둘이 상당히 비슷해 보이는데 살짝 다른, 특별한 타입 키워드이다 never는 갑자기 생각나서 추가했다 any let a: any = 1; any 쓰면 애니추천 모든 타입이 할당될 수 있는 타입이다 메타몽 같은 타입이라고 생각하면 된다… any는 무엇이든 될 수 있다 any를 쓴다는 것은 사실상 “타입 체크를 하지 마시오” 라고 말하는 것과 같다 특징 let a: any = 1; a = [1, 2, 3]; a = "hello"; a = { name: "abc" } 모든 타입이 할당될 수 있다는 것은, 위처럼 모든 타입의 값들을 할당받을 수 있다는 뜻이다 any는 무엇이든 될 수 있기 때문에! 위처럼 어떠한 값을 대입하든 오류가 발생하지 않는다 le..

var, let, const 차이점 사실 지금은 var를 잘 안 쓰긴 한데 왜 안 쓰게 됐는진 잘 몰라서… 중복 선언 var var a = 1; var a = 2; var a = 3; var는 중복 선언이 가능하다 새로 선언했을 때 초기화한 값이 이전 값을 덮어씌우는 방식으로 작동한다 코드가 길어졌을 때 값을 재할당하는 실수가 발생할 가능성이 높고 값이 어디서 바뀌었는지 파악하기도 어려워진다는 단점이 있다 var a = 1; var a; // 무시됨 초기화 없이 새로 선언만 할 경우 해당 라인은 무시된다 let let a = 1; let a = 2; // 오류 let은 중복 선언이 불가능하며, 해당 변수가 이미 선언되었다는 오류가 발생한다 const const a = 1; const a = 2; // 오..

문자열의 특정 문자 변경하기 let string = "hello world"; string[2] = "a"; console.log(string); 자바스크립트에서는 문자열의 특정 문자를 인덱스를 통해 변경할 수 없다 인덱스가 문자열의 특정 문자의 포인터를 가리키는 C언어 등과 다르게 자바스크립트는 문자의 참조를 가리키지 않기 때문 그럼 어떻게 let string = "hello world"; string = string.substring(0, 2) + "a" + string.substring(3); console.log(string); 문자열을 잘라서 다시 이어붙이는 수고를 해야 한다 쩝 function replaceAt(string, index, replace) { return string.substr..

뜨악 const arr = new Array(5).fill(new Array(3).fill(0)); arr[1][1] = 1; console.log(arr.join("\n")); 위와 같은 코드를 이용하여 2차원 배열을 만들고 한 칸의 값을 변경해 보았다 모든 줄의 값이 다 변경되는 것을 볼 수 있다 이 이유는 fill() 메서드가 참조만 복사해서 배열을 채우므로, 깊은 복사가 되지 않는 탓이다 new Array() 가 fill 에서 단 한 번만 호출되고, 그 참조로 5개 원소가 채워지는 것이다 C언어로 치자면, 2차원 배열의 각 행이 같은 주소값을 가리킨다고 이해하면 된다 fill 메서드는 원시값으로 배열을 채울 때만 이용하도록 하자 해결법 const arr = Array.from({length: 5}..

this 매우 매우 헷갈리는 그 this이다 전역 스코프에서의 this 브라우저 console.log(this); 브라우저에서의 전역 스코프에서 this는 Window 객체를 가리킨다 Node.js node.js 환경에서의 this는 현재 module.exports 객체를 가리킨다고 한다 브라우저처럼 Global 객체를 가리킬 것 같지만 아니다 const a = 2; // 영향 X module.exports.a = 3; console.log(this); 따라서 해당 객체에 값을 넣으려면 module.exports 를 해 주어야 한다 console.log(globalThis); globalThis 가 global 객체를 가리킨다 함수 호출 시의 this 단순 호출 function foo() { consol..