본문 바로가기
728x90

Frontend52

[JavaScript] 불변성(Immutability)을 유지하는 방법 객체 타입(Object Type)의 데이터는 변경될 수 있어서 예상치 못한 오류가 발생할 수 있습니다. 다음과 같은 코드를 보면, y의 속성 값을 변경했는데 x의 속성 값도 같이 변경되는 것을 확인할 수 있습니다. let x = { size: 21 }; let y = x; y.size = 25; console.log(x.size); // 25 만약 코드가 더욱 복잡해진다면, 코드의 결과를 예측하기가 어려워집니다. 이러한 문제점을 해결하기 위해서 크게 2가지의 방법이 존재합니다. 객체 타입의 데이터를 복사할 때 깊은 복사를 하는 방법과, 객체 자체를 불변하게 만드는 것입니다. ① 깊은 복사하기 얕은 복사는 해당 객체만 복사하여 새로운 객체가 같은 메모리 주소를 참조하고 있게 합니다. 반대로 깊은 복사는 해.. 2023. 6. 25.
[JavaScript] 불변성(Immutability) vs 가변성(Mutability) 불변성(Immutability)과 가변성(Mutability)는 다른 언어에서도 사용되는 개념이지만, 이번 글에서는 자바스크립트에서 불변성과 가변성의 개념에 대해서 설명하겠습니다. 변경이 불가능한 데이터 타입은 원시 타입(Primitive Type)이라고 합니다. 원시 타입의 유형으로는 불리언, 문자열, 수, null, undefined, Symbol이 있습니다.. 원시 타입의 데이터를 변수에 할당한다는 것은, 값이 저장되어 있는 메모리의 주소를 변수가 직접적으로 가리키게 하는 것입니다. 원시 타입이 불변하다는 것은, 원시 타입의 데이터가 저장되어 있는 메모리 영역에서의 변경이 불가하다는 뜻입니다. 따라서 만약 원시 타입이 저장되어 있는 변수의 값을 변경하고자 한다면, 기존의 값이 저장되어 있는 메모리 .. 2023. 6. 24.
[JavaScript] =, ==, === 차이 이번 글에서는 비슷하게 생긴 3가지 연산자 ① =, ② ==, ③ ===에 대해서 소개하겠습니다. ① = 연산자 (대입 연산자) = 연산자는 다른 프로그래밍 언어에서 사용되는 것과 같이 대입 연산자로 사용됩니다. 변수에 값을 저장하기 위해서 사용하며, = 연산자를 연속으로 사용해서 같은 값을 여러 개의 변수에 저장할 수 있습니다. let x = 5; let y = 10; let z = x * y; // z is 50 x = y = z; // x, y and z are all 50 ② == 연산자 (동등 연산자) == 연산자는 두 피연산자를 비교하여 불리언 값을 반환하는 동등 연산자입니다. 자바스크립트에서 == 연산자의 특징은 피연산자의 형 변환(Type Coercion)을 수행한다는 점입니다. 문자열 '.. 2023. 6. 22.
[JavaScript] var, let, const 키워드 차이 JavaScript에서 변수를 선언할 때 사용할 수 있는 키워드로는 ① var, ② let, ③ const가 있습니다. ① var 키워드 ES6이 발표되기 전까지는 var 키워드를 사용해서 변수를 선언하는 것이 일반적이었습니다. var 키워드는 크게 3가지 특징을 가지고 있습니다. 1) var 키워드는 함수 레벨 스코프를 가지고 있기 때문에, 변수가 함수 외부에서 선언되었다면 무조건 전역 변수가 됩니다. var ex_global = "Global Scope Variable"; function newFunction() { var ex_func = "Function Scope Variable"; } console.log(ex_func); // error: ex_func is not defined 2) 변수의.. 2023. 6. 20.
[JavaScript] 호이스팅(Hoisting) 호이스팅(Hoisting)이란, 자바스크립트 엔진이 코드가 실행되기 전에 함수, 변수, 객체 등의 선언들을 해당하는 범위(scope)의 최상단으로 끌어올리는 것처럼 보이는 과정을 의미합니다. 자바스크립트 엔진이 코드를 실행하기 전에, 실행 가능한 코드를 구분하는 하면서 필요한 메모리 공간을 미리 할당하기 위해서 호이스팅이 발생하게 되는 것입니다. var 키워드를 사용한 선언에서 호이스팅이 뚜렷하게 나타나는 것을 확인할 수 있습니다. 선언이 되기 전에 var 변수를 참조하면 참조 오류(Reference Error)가 발생하지 않고, undefined를 값으로 가지는 것을 확인할 수 있습니다. 선언문은 범위의 최상단으로 끌어올려져 있지만, 값은 자동으로 undefined로 초기화된 상태이기 때문입니다. co.. 2023. 6. 20.
[JavaScript] ECMAScript 정리 ECMAScript(또는 ES)는 ECMA International이 ECMA-262 규격을 바탕으로 정의한 표준화된 스크립트 프로그래밍 언어입니다. 이해를 돕기 위해, 사용된 용어를 하나씩 살펴보겠습니다. 1) ECMA International은 정보와 통신 시스템을 위한 국제적 표준화 기구입니다. CD-ROM 볼륨 및 파일 구조, C++/CLI, JSON과 같은 다양한 기술들의 표준은 제정하였습니다. 2) ECMA-262는 ECMA International이 표준화한 기술들 중에서 자바스크립트를 기반으로 제정된 스크립트 프로그래밍 언어 규격의 이름입니다. 3) 스크립트 프로그래밍 언어란 응용 프로그램과는 독립적으로 사용되도록 특별히 설계된 프로그래밍 언어입니다. 응용 프로그램이 제작된 언어와는 다르며.. 2023. 6. 15.
반응형