개발/자바스크립트로의 깊은 잠수
-
어차피 다 똑같은 반복인데 for문만 사용하면 안되는걸까개발/자바스크립트로의 깊은 잠수 2026. 3. 25. 20:00
자바스크립트에는 다양한 반복 방법이 존재합니다.먼저 문의 형태인 `for, for...of, for...in, while, do while`이 있습니다.그리고 메서드의 형태인 `forEach, map, reduce, some, every, find, filter,` ...등이 있습니다.아니 어차피 반복하는 것이 목적인데, for 하나면 충분하지 않을까요?왜 이렇게 다양한 반복 방법이 존재하는 걸까요? 코드는 반복이 싫어요사실 반복을 위해서는 for문도 필요가 없습니다.그냥 코드를 여러번 쓰면 됩니다. 위의 그림처럼 별 다섯 줄을 출력하는 코드는 그냥 여러번 쓰는 것이 더 효율적입니다.하지만 별 5천 줄, 5만 줄을 출력해야 한다면,그리고 실무에서 5백만 행의 데이터를 반복해서 처리해야 한다면 얘기가..
-
자바스크립트에서 함부로 덧셈하지 마라개발/자바스크립트로의 깊은 잠수 2026. 3. 18. 21:30
`[] + []` 는 `''` 입니다.`[] + {}` 는 `'[object Object]'` 입니다.`{} + []` 는 `0` 입니다.`+{}` 는 `NaN` 입니다. 자바스크립트는 어쩌다 이렇게 되었을까요? + 기호가 가지는 세 가지 의미자바스크립트에서 더하기(+) 기호는 세 가지 의미를 가질 수 있습니다. 단항(unary) 산술 연산자이항(binary) 산술 연산자문자열 연결 연산자 피연산자 앞에 홀로 쓰이면 단항 산술 연산자가 됩니다.두 피연산자 사이에 쓰이면 이항 산술 연산자가 됩니다.두 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자가 됩니다. +'1'; // 1+'Hello'; // NaN1 + 2; // 31 + '2'; // '12''1' + 2; // '1..
-
(x = 1) + 5 는 왜 가능한가? 할당문이 값으로 평가되는 이유개발/자바스크립트로의 깊은 잠수 2026. 3. 11. 21:35
자바스크립트에서의 할당문은 값으로 평가되는 표현식입니다. let x; // 변수 x 선언console.log((x = 1) + 5); // 6 을 출력한다 왜 이런 짓이 가능하도록 만들어졌을까요? 표현식과 문알아보기에 앞서 표현식과 문이 무엇인지에 대한 정의를 짚어 보겠습니다. `let x;` 는 변수 선언문입니다.`x = 1;` 은 할당문임과 동시에 표현식입니다. 표현식(expression)은 값으로 평가될 수 있는 문(statement)이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.- 이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스, 2020, p.52 따라서 문보다 표현식이 더 좁은 개념이라고 볼 수 있습니다.문은 무엇일까요? 정의는 아래와 같이 할 수 있습니..
-
브라우저는 메모리를 어떻게 관리하길래 크롬 탭 하나가 700MB씩 먹는걸까개발/자바스크립트로의 깊은 잠수 2026. 3. 4. 21:32
크롬 탭 위에 마우스를 올려보면 메모리 사용량을 알려줍니다.별거 없는 페이지라고 생각했는데 700MB씩 잡아먹는 모습을 보면 문득 이게 700MB씩 먹을 페이지인가? 싶은 의문이 드는 경우가 종종 있었습니다.그 이유를 찾아봤습니다.V8 엔진이 범인인가?크롬 브라우저는 V8 엔진이라는 자바스크립트 엔진으로 JS 코드를 컴파일하고 실행합니다.어쩌면 V8 엔진이 메모리를 좀 희생해서 속도를 얻어내는 건 아닐까요?보통 속도와 메모리 사용량 사이에는 trade-off 관계가 있으니까 말이에요. 이런 합리적 의심을 바탕으로, V8이 메모리를 관리하는 방식을 한번 살펴보겠습니다. 위의 그림은 V8 엔진의 메모리 구조를 도식화한 그림입니다.모든 JS 프로그램은 V8 프로세스에 속하는 일련의 메모리 영역들로 대변될 수..