📘 Frontend

new 연산자 && 생성자 함수 객체 리터럴 {...} 을 사용하면 객체를 쉽게 만들 수 있습니다. 그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우가 그렇죠. 'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있습니다. 생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다. 함수 이름의 첫 글자는 대문자로 시작합니다. 반드시 'new' 연산자를 붙여 실행합니다. function User(name) { // this = {}; (빈 객체가 암시적으로 ..

Function & This 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성됩니다. let user = { name: "Kim", age: 30 }; 사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기, 로그아웃하기 등의 행동을 합니다. 이와 마찬가지로 사용자를 나타내는 객체 user도 특정한 _행동_을 할 수 있습니다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줍니다. 함수 생성 객체 user에게 인사할 수 있는 능력을 부여해 줍시다. let user = { name: "Kim", age: 30 }; user.sayHi = function() { alert("안녕하세요"); }; user..

Garbage Collection 자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행합니다. 원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지합니다. 그렇다면 더는 쓸모 없어지게 된 것들은 어떻게 처리될까요? 지금부턴 자바스크립트 엔진이 어떻게 필요 없는 것을 찾아내 삭제하는지 알아보겠습니다. 자바스크립트는 도달 가능성(reachability) 이라는 개념을 사용해 메모리 관리를 수행합니다. ‘도달 가능한(reachable)’ 값은 쉽게 말해 어떻게든 접근하거나 사용할 수 있는 값을 의미합니다. 도달 가능한 값은 메모리에서 삭제되지 않습니다. 아래 소개해 드릴값들은 그 태생부터 도달 가능하기 때문에, 명백한 이유 없이는 삭제되지 않습니다. 현재 함수의 지역 변수와 매개변수 중첩 함수..

참조에 의한 객체 복사 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 ‘참조에 의해(by reference)’ 저장되고 복사된다는 것입니다. 원시값(문자열, 숫자, 불린 값)은 ‘값 그대로’ 저장·할당되고 복사되는 반면에 말이죠. 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소’인 객체에 대한 '참조 값’이 저장됩니다. let user { name: "Kim" }; let admin = user; // 객체의 참조값을 복사함 참조에 의한 비교 객체 비교 시 동등 연산자 ==와 일치 연산자 ===는 동일하게 동작합니다. 비교 시 피연산자인 두 객체가 동일한 객체인 경우에 참을 반환하죠. 두 변수가 같은 객체를 참조하는 예시를 살펴봅시다. 일치·동등 비교 모..

Object 자바스크립트에서 객체는 중괄호 {…}를 이용해 만들 수 있습니다. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용됩니다. 프로퍼티 키는 ‘프로퍼티 이름’ 이라고도 부릅니다. 빈 객체를 만드는 2가지 방법이 있습니다. 객체 생성자 문법 객체 리터럴 문법 let user = new Object(); // 객체 생성자 let user = {}; // 객체 리터럴 보통 객체 선언 시 리터럴 {...} 을 사용합니다. Literal & Property 자바스크립트의 객체 내부 {...} 안의 프로퍼티들은 Json 처럼 키 : 값 쌍으로 구성된 프로퍼티가 들어갑니다. let user = { n..