position을 어떻게 사용하는지 알려주세요. CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다. position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다. 이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다. posi..

Hoisting JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. - MDN - 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다. 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되는 것이다. 자바스크립트 엔진은 런타임 이전에 소스코드의 평가 과정을 거치면서 소스코드를 실행할 준비를 하는데, 이때 자바스크립트 엔진은 변수 및 함수 선언..

상속과 프로토타입 상속은 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다. 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다. // 생성자 함수 function Circle(radius) { this.radius = radius; } // Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를 // 공유해서 사용할 수 있도록 프로토타입에 추가한다. // 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다. Circle.prototype.getArea = function () { return Math.PI * this.radius ** 2; }; /..

유사배열(Array-Like Object)이란 이름 그대로 배열과 유사한 객체를 말한다. 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다. JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 온다. 자바스크립트에서 유사배열을 사용하기 위해서는 두 가지 조건을 성립해야한다. 먼저 숫자 형태의 indexing이 가능해야하는 것이고, 두번째로는 length 속성을 포함해야하는 것이다. 이는 유사배열을 배열처럼 사용하기 위한 최소한의 조건이다. 배열과의 차이점은 배열의 forEach, map, filter, reduce 같은 메서드를 사용할 수 없다는 것이다. 이를 해결하기 위해 먼저 Array..

var 키워드의 변수 호이스팅 // 이 시점에는 변수 호이스팅에 의해 이미 foo변수가 선언 // 변수 foo는 undefined로 초기화 console.log(foo); // undefined // 변수에 값을 할당 foo = 123; console.log(foo); // 123 // 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행 var foo; let 키워드 let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다. 또 let 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다. let foo = 1; { let foo = 2; let bar = 3; } console.log(foo); // 1 console.log(bar);..

스코프란? 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정된다. 이를 스코프라 한다. 즉 스코프는 식별자가 유효한 범위를 말한다. 다른 말로 스코프는 자바스크립트 엔진이 식별자를 검색 및 결정할 때 사용하는 규칙으로 이해할 수 있다. 스코프 내에서 식별자는 유일해야 하지만 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다. 이러한 측면에서 스코프는 네임 스페이스다. 스코프 체인 전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고, 지역에서 선언된 변수는 지역 스코프를 갖는 지역 변수다. 전역 변수는 어디서든지 참조할 수 있고, 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다. 여기서 지역이란 함수 몸체 내부를 말하는 데, 13장..

1. 기본형 데이터와 참조형 데이터 JS Basics #1 - JS 기본형과 참조형 차이점 정리 기본형과 자료형의 차이 자바스크립트의 두가지 타입인 기본형과 자료형의 정의에 대해 알아보고 두 타입간의 차이점이 발생하는 원인에 대해 알아보겠습니다. 자바스크립트 데이터 타입은 크 webclub.tistory.com 자바스크립트 데이터 타입은 크게 두가지인 원시형(Primitive Type)과 참조형(Reference Type)으로 분리된다. 기본(원시)형에는 Number, String, Boolean, null, undefined 가 있으며 ES6 에서는 Symbol 도 추가되었다고 한다. 참조형은 대표적으로 객체(Object)가 있고 그 하위에 배열(Array), 함수(Function), 정규표현식(Reg..

JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 1. null vs undefined 자료형 null 값은 오로지 null 값만 포함하는 별도의 자료형을 만든다. 또한 자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다르다. 다른 언어에선 null을 '존재하지 않는 객체에 대한 참조’나 '널 포인터(null pointer)'를 나타낼 때 사용하지만 자바스크립트에선 null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용합니다. undefined 값도 null 값처럼 자신만의 자료형을 한다. undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용하며 변수는 선언했지만, 값..