본문 바로가기

Frontend/javascript11

[JS] 원시 값과 객체의 비교 — 값, 메모리, 그리고 복사 원시 타입과 객체 타입의 근본적 차이원시 타입의 값은 변경 불가능(immutable) 하다. 변수에 원시 값을 할당하면 해당 메모리 공간에는 값 자체가 저장된다. 반면 객체 타입의 값은 변경 가능(mutable) 하며, 변수에 할당하면 메모리 공간에는 참조 값이 저장된다.여기서 "변경 가능/변경 불가능"이라는 표현은 변수가 아니라 '값'에 대한 이야기다. 원시 값을 가진 변수에 새로운 값을 재할당하면, 기존 메모리 공간에 새 값을 덮어쓰는 것이 아니다. 원시 값은 불변이기 때문이다. 대신 새로운 메모리 공간에 새 값을 저장하고, 변수가 참조하던 메모리 주소를 바꾸는 방식으로 재할당이 이루어진다.원시값을 갖는 변수를 다른 변수에 할당하면 해당 값 자체가 복사돼서 저장되고(값에 의한 전달), 객체값을 가진 .. 2026. 4. 15.
for문 읽다가 프로토타입 체인까지 온 건에 대하여 모딥다 8장 제어문을 읽었다. 실무에서 잘 사용 안하게 되는 레이블 문과 break, continue 부분은 생소하다고 느끼는 부분도 있었고, for문이나 while 문도 오랜만에 봤다. 크게 더 파볼만한(?) 부분은 안 보여서 책에서 언급만 하고 다루지 않은 문법들 위주로 좀 더 살펴보았다.1. for...in과 for...offor...inconst person = { name: '유진', gender: 'female', job: '개발자' };for (const key in person) { console.log(key, person[key]);}// name 유진// gender female // job 개발자for...in은 객체의 키(key)를 순회한다. for...ofconst fruit.. 2026. 3. 25.
[js] 표현식과 문, 데이터 타입 1. 값(Value)값 = 식(expression)이 평가(evaluate)되어 생성된 결과10 + 20 // 이 식이 평가되면 → 값 30'hello' // 이것도 식 → 평가되면 문자열 값 'hello' 모든 값은 데이터 타입을 가짐 — 변수가 타입을 가지는게 아닌, 변수의 값이 타입을 가지는 것 모든 값은 메모리에 비트(bit)의 나열로 저장 같은 비트열이라도 타입에 따라 해석이 다름 → 데이터타입: 메모리에서 읽은 비트열의 해석을 결정 0100 0001→ 숫자 타입으로 해석하면: 65→ 문자 타입으로 해석하면: 'A' 2. 변수(Variable) 변수 = 값을 저장하기 위해 확보한 메모리 공간, 또는 그 공간을 가리키는 식별자(identifier)var score = 100;변수에는 값을 할당.. 2026. 3. 11.
[모던 Javascript DeepDive] 4. 변수 본 포스팅은 아주 오랜만에 AI를 쓰지 않고 필자의 뇌와 손으로만 쓴 글입니다 😁 처음 자바스크립트를 공부할때 본 책과 내용인데, 삼년만에 다시 보니 기초적인 것도 많이 잊고 있었다는 생각이 든다. 초심으로 돌아가 자바스크립트의 변수에 대해 공부한 내용을 정리해보자. 변수는 왜 필요할까? 컴퓨터가 연산을 하기 위해서는 연산의 대상이 되는 값들을 어딘가에 저장하고 있어야 한다. var total = 1 + 2 컴퓨터는 위의 코드를 실행할 때 메모리에 1과 2를 저장해놓고, CPU를 사용해서 1과 2라는 값을 더하는 연산을 실행한 후 그 결과값인 3을 메모리에 저장한다. 그런데 수많은 메모리 중 결과값 3이 저장되어있는 메모리를 찾으려면 해당 메모리의 주소를 알아야 한다. 자바스크립트는 개발자의 .. 2026. 3. 4.
[iframe 사용법 및 속성값 가이드] MDN 문서를 기반으로 작성한 가이드 문서 iframe 태그: 인라인 프레임 요소에 대한 가이드HTML의 요소는 현재 문서 내에 다른 HTML 페이지를 중첩하여 임베딩할 수 있도록 하는 강력한 도구입니다. 이 가이드는 iframe 사용법을 단계별로 설명하며, 각 속성과 기능을 상세히 다룹니다.1. iframe의 기본 개념iframe은 중첩된 브라우징 컨텍스트(browsing context)를 제공하여 별도의 HTML 페이지를 현재 페이지 안에 임베딩합니다. 각 iframe은 독립적인 문서 환경을 가지며, 자체 URL 내비게이션을 지원합니다.최상위 브라우징 컨텍스트: 부모가 없는 브라우징 컨텍스트(일반적으로 브라우저 창).부모 브라우징 컨텍스트: iframe을 포함하고 있는 브라우징 컨텍스트.⚠️ 주의: iframe은 추가적인 메모리와 컴퓨팅 리.. 2024. 11. 19.
[javascript] 생성자 함수는 어떤 과정으로 인스턴스를 생성할까? 생성자 함수는 인스턴스를 생성하기 위한 '템플릿'처럼 동작한다. 즉 인스턴스를 생성하고, 이 인스턴스에 프로퍼티를 추가하고 초기값을 할당하여 초기화 하는 것이다. 아래와 같은 생성자 함수 정의를 보면, 인스턴스를 초기화하는(값 할당) 부분은 있지만 인스턴스를 생성하고 반환하는 코드가 없다. (그래서 아래 Language를 일반 함수처럼 호출하면 반환값이 undefined이기도 하다. - 참고)function Language(name) { this.name = name; this.getName = function() { return 'my name: ' + this.name ; }}; 그런데 어떻게 생성자 함수를 호출하면 객체(인스턴스)가 생성되어 반환되는 것일까?  new 연산자.. 2024. 4. 25.