프로그래밍/JavaScript(10)
-
[Javascript] 배열을 비동기 처리하기 위한 Promise.all()의 사용법
개요순회작업에서 비동기 작업을 처리하는 과정에서 더 깊게 이해하게 된 Promise.all의 동작과 Javascript의 병렬처리 여부에 관해 정리해보고자 한다. 상황여러 요소가 있고 각 요소들에 대해 비동기 처리를 하려면 어떻게 해야할까?MDN을 참고해보면 forEach는 기본적으로 콜백함수를 기다리지 않는다고 명세돼있듯이 forEach내부에서 await를 걸어도 forEach문은 끝나게 된다. 콜백함수로 전달받은 인수인 함수를 실행만 하는 것이다. 다음의 간단한 예제를 살펴보자 예제1. forEach의 콜백함수를 비동기(async)로 선언한 경우async function promise1() { return new Promise(resolve => { setTimeout(() => { ..
2025.01.23 -
encodeURI와 encodeURIComponent의 차이점
개요Javascript의 빌트인 전역 함수인 encodeURI와 encodeURIComponent의 차이점에 대해 이해하고 올바른 사용법에 대해 알아본다. URL을 인코딩 해야하는 이유?URI는 우리가 서버 간 통신에서 서로를 식별할 수 있는 유일한 식별자이다. 따라서 영어가 세계 공통 언어이듯이 URI도 이에 맞게 통일 시켜줘야 한다. URI가 변환될 경우 원치 않은 동작이 일어날 수 있기 때문이다. 예를 들어 URL에 한글이 포함돼있는 경우를 생각해보자. 영어를 제외한 다른 나라의 언어는 UTF-8의 형태로 인코딩 돼야만 다른 환경에서도 올바르게 한글로 된 URI를 인식할 수 있을 것이다. 따라서 URL은 아스키 문자로 인코딩 해야 안전한 URI라고 할 수 있다.encodeURIencodeURI는 U..
2024.09.04 -
[ Javascript ] 함수 호이스팅, 함수 선언문과 표현식, 함수 리터럴
개요자바스크립트에서 함수의 개념은 무엇이고 자바스크립트 엔진에서 함수가 어떻게 할당되고 선언되고 동작하는지에 대해 알아본다. 자바스크립트에서 함수란?자바스크립트에서 함수는 일급 객체로 분류된다. 여기서 중요한 것은 함수도 결국은 객체로 이루어져 있다는 것이다. 일급 객체는 객체가 값으로 사용될 수 있음을 뜻한다. 함수는 객체의 프로퍼티에 위치할 수도 있고 변수에 할당될 수도 있으며 배열의 요소가 될 수도 있는 것이다. 함수를 호출할 수 있는 원리우리는 당연하게도 함수를 작성하고 나서 해당 함수의 이름 뒤에 소괄호를 붙여 함수를 호출한다.그러나 원래는 우리가 함수를 작성할때 function옆에 입력했던 함수 이름은 함수 내부에서만 사용할 수 있는 식별자이다.따라서 외부에서는 해당 함수를 식별하는 식..
2024.07.28 -
[ Javascript ] 변수 및 객체가 복사 및 할당되는 원리 & 얕은 복사와 깊은 복사
개요Javascript에서 변수 및 객체가 내부적으로 어떤 동작 원리에 의해 복사되고 할당되는지 알아본다. Javascript에는 C처러 포인터의 개념이 없기 때문에 메모리에 변수의 값을 할당하는 부분을 신경써주지 않아도 된다. 그렇다면 변수나 객체를 복사했을 때는 어떻게 될까?변수의 경우에는 결론적으로 말하자면 서로 같은 원시타입(primitive type)이 값을 갖고 있다 하더라도 서로 해당 값을 가르키는 메모리의 주소가 다르다. 변수를 2개 선언했다면 식별자도 다를 것이다.또한 Javascript에서는 객체를 변경가능하게끔 설계했다. 만약 위에서 설명한 변수가 복사되는 원리로 객체를 복사하게 되면 오버헤드가 커지고 성능이 저하 되게 될 것이다. 객체는 훨씬 더 많은 메모리를 사용할 것이기 때문이다..
2024.07.25 -
[ Javascript ] 암묵적 캐스팅과 산술 연산자 +의 문자열 형변환
개요기본적으로 프로그래밍 언어에서 공통적으로 쓰이는 개념들은 제외하고 새롭게 알게된 사실들에 대해 정의한다. 암묵적 캐스팅과 +연산자암묵적 캐스팅은 연산자에 의해 결과값이 자동으로 타입 변환(캐스팅) 되는 것을 뜻한다.예를 들면 자바에서 double타입의 수와 정수를 + 연산자로 더하게 되면 결과값은 자동으로 double타입이 되는 것을 뜻한다.Javascript에서도 이와 같이 암묵적 캐스팅이 존재한다.그 중 눈여겨 볼 것은 + 연산자이다.일반적으로 +연산자는 산술을 위해 사용되지만 피연산자가 문자열일 경우 얘기가 다르다.console.log(1+'1'); // 11 위와 같이 1이라는 숫자를 문자열로 1로 치환한 후에 우항의 문자열 1과 합쳐져 type = string인 11이라는 값이 생성된다.그러..
2024.07.19 -
[ Javascript ] Javascript의 변수 선언과 초기화 동작 원리 및 숫자(number) 타입의 크기
개요Javascript라는 언어를 각 잡고 시간내서 공부하지 않고 실무 생활을 하며 MDN을 비롯한 각종 레퍼런스를 통해서 어렴풋이만 학습하고 있던 도중 시간을 내서 '모던 자바스크립트 Deep Dive' 를 구매해 공부하던 중 새롭게 알게 된 사실에 대해서 정리한다. Javascript의 변수 선언과 초기화 방법C나 Java와 같은 프로그래밍 언어의 경우에는 변수 선언을 타입과 변수명의 선언으로 보고 초기화는 해당 변수에 값을 할당하는 것이다.그러나 Javascript서는 변수를 선언과 초기화하는 과정이 다른 프로그래밍 언어와 다르기 때문에 이 개념이 조금 모호하다.특히 ES6에 let과 const 키워드가 도입됐기 때문에 레거시 코드는 모두 var키워드를 사용하고 있다.Javascript에서 var..
2024.07.18