본문 바로가기

Javascript

(4)
자바스크립트 브라우저 렌더링 원리 구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경인 Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 개발 언어가 되었음 자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드이다. 대부분 프로그래밍 언어는 운영체제나 가상머신 위에서 실행되지만, 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 브라우저 환경을 고려할 때, 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다. 1. 브라우저 렌더링 과정 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트파일 등 렌더링에 필요한 리소스를 요청하고 서버..
Set 객체 Set 객체 Set 객체는 중복되지 않는 유일한 값들의 집합(set)이다. Set 객체는 배열과 유사하지만, 다음과 같은 차이가 있다. Set 객체의 특성은 수학적 집합의 특성과 일치한다. Set은 수학적 집합을 구현하기 위한 자료구조다. Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다. 1. Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set() console.log(set) //Set(0) {size: 0} Set 생성자 함수는 이 터러블(반복 가능한(iterable, 이 터러블) 객체는 배열을 일반화한 객체)을 인수로 전달받아 Set 객체를 생성한다. 이때..
this 키워드 this 키워드 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 구조이다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때, 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. 다음 예제를 통해 이해해 보자. const circle = { // 프로퍼티: 객체 고유의 상태 데이터 radius: 5, // 메서드: 상태 데이터를 참조하고 조작하는 동작 getDiameter() { // 이 메서드가 자신이 속한 객체..
자바스크립트 - 참조에 의한 객체 복사,참조에 의한 비교 원시값 (문자열, 숫자, 불린 값)은 ‘값 그대로’ 저장 ⋅ 할당 되고 복사되는 반면에, 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 ‘참조에 의해 ‘ 저장되고 복사된다는 것. 원시값 저장시 let message = 'Hello!'; let phrase = message; 예시를 실행하면 두 개의 독립된 변수에 각각 문자열 ‘Hello!’ 가 저장된다. 그런데 객체의 동작 방식은 이와 다르다. 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 ‘메모리 주소’ 인 객체에 대한 ‘참조값’ 이 저장된다. 객체 저장시 let user = { name: 'John' } 객체는 메모리 내 어딘가에 저장되고, 변수 user엔 객체를 ‘참조’할 수 있는 값이 저장된다. 따라서, 객체가 할당된 변수..