My Boundary As Much As I Experienced

심벌이란? 심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값들과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용된다. 심벌 값의 생성 Symbol함수 심벌 값은 Symbol 함수를 호출하여 생성한다. 다른 원시값, 즉 문자열, 숫자, 불리언, undefined, null 타입의 값은 리터럴 표기법을 통해 값을 생성할 수 있지만 심벌 값은 Symbol 함수를 호출해서 생성해야 한다. 이때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다. const mySymbol = Symbol(); console.log(typeof mySymbol..

자바스크립트의 암묵적인 행위로 인한 고통.. 아래 예제에서 실행 결과는 무엇일지 생각해보자. function foo(){ x = 10; } foo(); console.log(x); // ? foo 함수 내에서, 아직 선언하지 않은 x 변수에 값 10을 할당했다. 이때 x 변수를 찾아야 x에 값을 할당할 수 있기 때문에 자바스크립트 엔진은 x 변수가 어디에서 선언되었는지 스코프 체인을 통해 검색하기 시작한다. 자바스크립트 엔진은 먼저 foo함수의 스코프에서 x 변수의 선언을 검색한다. -> 없다. 상위 스코프에서 x 변수의 선언을 검색한다 -> 없다. 끝내 전역 스코프에서 x 변수의 선언을 검색한다 -> 없다. 끝내 결과는? 전역 스코프에도 x변수 선언이 존재하지 않기 때문에 ReferenceError가 ..

일급 객체란? 다음과 같은 조건을 만족하는 객체를 일급 객체라 한다. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열)에 저장할 수 있다. 함수나 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 다음 예제와 같이 위의 조건을 모두 만족하므로 일급 객체이다. // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num } const decrease = function (num) { return --num } // 2. ..

생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다. 함수 이름의 첫 글자는 대문자로 시작합니다. 반드시 'new' 연산자를 붙여 실행합니다. Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출할 수 있다. 일반적으로 잘 사용하지 않는다 const newObj = new Object() 객체 리터럴 중괄호 내에 0개 이상의 프로퍼티를 정의하여 생성하는 방법 객체 리터럴 외의 생성 방식은 모두 함수를 이용해 객체를 생성한다 const obj = { a: 1, b: 2, c: 3 } 객체 리터럴 방식은 간편하게 객체를 생성할 수 있지만, 동일한 프로퍼티를 가진 객체를 여러개 생성할 경..

정의 내부 슬롯과 내부 메서드는 ECMAScript에서 정의한 의사 프로퍼티Pseudo Property, 의사 메서드Pseudo Method이다. (css의 가상 선택자Pseudo Selector처럼, 실제로 있는 태그는 아니지만 기능 상 존재하는..? 느낌인듯!) ECMAScript 사양에 정의된 대로 구현되고 JS 엔진에서 실제로 동작하는 방식을 구성한다. 그러나 개발자가 직접 접근하거나 호출할 수 있도록 공개된 객체의 프로퍼티는 아니다. 내부 슬롯과 내부 메서드는 형태는 이중 대괄호로 감싸서 표현된다. 실제 확인 방법 우리가 한 번 쯤 들어본 [[prototype]]도 내부 슬롯이다. 직접 [[prototype]]을 프로퍼티 체이닝으로 접근할수는 없지만 객체를 console.log해보면 개발자 도구..

이미 한 번 변수 호이스팅에 대해 다뤄본 적이 있지만 자바스크립트 스터디에서 심화적으로 다뤄보기로 했다. 1. 변수 호이스팅이란? 자바스크립트에서 호이스팅(Hoisting)은 변수 선언과 함수 선언을 코드의 맨 위로 끌어올려지는 현상을 일컫는다. 그래서 개발자가 어느 라인 위치에 코드를 선언해도, 실행 되기전 코드가 최상단으로 끌어올려지고 실행되게 된다. 2. var 변수 호이스팅의 특성 var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. 단 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다. 3. 호이스팅의 원인 (실행 컨텍스트) ..

XMLHttpRequest는 뭐야? XMLHttpRequest는 클라이언트 측에서 서버와 비동기적으로 상호 작용할 수 있도록 해주는 자바스크립트 객체입니다. 이를 사용하면 페이지의 새로고침 없이도 서버로부터 데이터를 요청하고 받을 수 있습니다. 주로 AJAX(Asynchronous JavaScript and XML) 기술에 사용되며, 최근에는 fetch API로 대체되는 경향이 있습니다. 더보기 XMLHttpRequest의 주요 메서드와 속성: open(method, url, async) 메서드: HTTP 요청을 초기화합니다. method: HTTP 메서드 (GET, POST 등) url: 요청을 보낼 URL async: 비동기 여부를 나타내는 불리언 값 send(data) 메서드: 요청을 서버로 보냅니..

promise에 대해서 알려줘 Promise 객체는 자바스크립트에서 비동기 작업을 처리하기 위한 객체입니다. 비동기 작업은 주로 네트워크 요청, 파일 읽기, 데이터베이스 쿼리 등과 같이 시간이 걸리는 작업을 의미합니다. Promise는 이러한 비동기 작업을 더 효율적으로 다룰 수 있도록 도와주는 패턴 중 하나입니다. Promise는 세 가지 상태를 가집니다: Pending (대기 중): 비동기 작업이 아직 완료되지 않은 상태. Fulfilled (이행됨): 비동기 작업이 성공적으로 완료된 상태. Rejected (거부됨): 비동기 작업이 실패한 상태. Promise 객체는 다음과 같은 구조를 가지고 있습니다: const myPromise = new Promise((resolve, reject) => { ..

브라우저 렌더링 동작 과정 렌더링의 기본적인 동작 과정은 다음과 같다. 1~2. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing) 3. 두 Tree를 결합하여 Rendering Tree를 만든다. (Style) 4. Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 5. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint) 6. 레이어를 합성하여 실제 화면에 나타낸다. (Display) 0. 요청, 응답 처음 웹페이지에 접속하면 HTML, CSS, Javascript 파일, 그리고 필요하다면 이미지나 폰트같은 파일들을 서버에 요청하고 응답 받게 된다. 그렇다면 서버에 요청은 어떻게 전송할까? 브라우저..

1. 스코프 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 따라 접근 가능한 범위가 결정되는 것을 말함. var, 함수 스코프 var는 함수를 기준으로 유효 범위가 결정된다. 다른 함수 안의 변수는 접근 불가. function displayNum() { var num = 100 console.log(num) // 100 } displayNum() // 100 console.log(num) // num is not defined 그런데 조건문은 함수가 아니라 문(statement)이기 때문에 안으로 접근 가능하다. if (true) { var age = 10 } else { var age = 20 } console.log(age) //20 let, const 직관적으로 중괄..