재미있는 JS

this는 자기 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조변수다. this를 통해 자기 자신이 속한 객체 또는 자신이 생성할 인스턴스에 접근할 수 있다. 자바스크립트에서 this는 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. ⭐ 호출 방식별 this 바인딩 1. 전역 공간에서의 this 전역 공간에서 this는 전역 객체를 가리킨다. 이는 전역 컨텍스트를 생성하는 주체가 전역 객체이기 때문이다. 2. 일반 함수로서 호출할 때의 this 일반 함수를 호출하거나 중첩 함수를 일반 함수로 호출할 때 모두 this는 전역 객체이다. 객체를 생성하지 않기 때문에 어차피 this는 쓸모가 없다...

자바스크립트 객체는 ECMAScript 사양에 정의된 표준 빌트인 객체, ECMAScript 표준 사양에 정의되어 있지는 않지만 브라우저에서는 Web API, Node.js에서는 Node.js 고유 API인 호스트 객체, 그리고 사용자가 직접 정의해 사용하는 사용자 정의 객체의 3가지 종류가 있다. ⭐ 표준 내장 객체 표준 내장 객체는 전역 범위의 여러 객체로 Object. String, Number, Boolean, Date, Array, Promise, Map, Set 등이 있다. 이들은 모두 생성자 함수로 사용할 수도 있다. (Math, Reflect, JSON은 생성자 함수 객체가 아니다.) 원시값은 객체가 아닌데도 객체처럼 프로퍼티와 메서드를 사용할 수 있는 이유는 무엇일까? 이는 자바스크립트 ..

자바스크립트는 어떤 객체를 원형으로 삼고 이를 복제함으로써 상속과 비슷한 효과를 내는 프로토타입 기반 객체지향 프로그래밍 언어이다. 자바스크립트를 이루고 있는 거의 모든 것이 객체이며 원시 값을 제외한 나머지는 모두 객체이다. 프로토타입의 구조에 대해 파악해보자. 생성자 함수 function Person(name) { this.name = name; this.sayName = function () { console.log(`내 이름은 ${this.name}이야`); } return this.name; } 자바스크립트에서 함수는 일반 함수로도 호출할 수 있지만 new 연산자와 함께 쓴다면 생성자 함수로 사용할 수 있다. 위 함수를 호출해보자. const name = Person('길동'); // '길동' ..

1. 상수와 변수 var와 let은 변수 선언 키워드이고 const는 상수(변하지 않는 값) 선언 키워드이다. 2. 호이스팅 호이스팅은 var, let, const 모두에게서 발생한다. var v = 1; let l = 2; const c = 3; function outer () { console.log(v); // undefined console.log(l); // ReferenceError console.log(c); var v = 'var'; let l = 'let'; const c = 'const'; } outer(); 호이스팅이 발생하지 않는다면 위에 선언한 v, l, c 값을 참조해야 되는데 그 값을 참조하지 않는 것을 보면 호이스팅이 발생한다는 것을 알 수 있다. 하지만 다른 점이 있다면 v..

연산자는 하나 이상의 값을 연산을 수행해 새로운 하나의 값을 만드는 키워드를 말한다. ⭐ 산술 연산자 수학적 계산을 수행해 새로운 숫자 값을 만드는 연산자들을 말한다. 숫자 연산이 불가능할 경우 NaN을 리턴한다. 🧷 이항 산술 연산자 두 개 이상의 피연산자를 계산해 숫자 값을 만드는 것을 말한다. 기존의 수는 변하지 않고 새로운 값이 탄생할 뿐이다. 아래와 같은 종류가 있다. 3 + 2; // 더하기 5 3 - 2; // 빼기 1 3 * 2; // 곱하기 6 3 / 2; // 나누기 1.5 3 % 2; // 나머지 1 3 ** 2; // 3의 2제곱 🧷 단항 산술 연산자 증가(++), 감소(--)는 피연산자 앞에 위치하면 연산 후 참조가 되고 뒤에 위치하면 참조 후 연산이 된다. 그 후에 변수 값에도 ..

더보기 var num = 1; var string = '1'; console.log(num + 1); // 2 console.log(string + 1); // '11' 자바스크립트의 모든 값은 데이터 타입을 갖는다. 예를 들어 숫자 1과 문자열 '1'은 같아 보이지만 더하기를 연산자를 사용해 보면 전혀 다른 결과가 나온다. 이처럼 의도에 맞게 정확하게 타입을 지정해 변수에 값을 할당해야 컴퓨터가 메모리에서 읽어 들인 데이터를 정확하게 해석할 수 있을 것이다. ⭐ 기본형 데이터(원시 타입)와 참조형 데이터(객체 타입) 기본형과 참조형은 불변성에 따라 나뉘어 지는데 이 때 불변성의 여부는 데이터 영역의 메모리가 변하는지에 따라 판단한다. var a = 'aaa';// 기본형 var obj = {// 참조형..

더보기 더보기 컴퓨터는 모든 데이터를 0과 1로 바꿔서 기억한다. 0 또는 1 하나의 값을 표현할 수 있는 하나의 메모리 조각을 비트(bit)라고 한다. 하지만 비트 단위로만 0과 1 밖에 표현하지 못하므로 매우 비효율적이기 때문에 이를 여러개씩 묶어 표현할 수 있는 바이트(byte)라는 단위가 생기게 되었다. 바이트는 8개의 비트로 총 2⁸(=256) 가지의 값을 표현할 수 있다. 컴퓨터는 데이터를 메모리(memory)를 사용해 기억하는데, 메모리는 데이터를 저장할 수 있는 메모리 셀(memory cell)의 집합체이고, 메모리 셀 하나의 크기는 1바이트(8비트)이다. 컴퓨터는 메모리 셀의 크기(1 바이트) 단위로 데이터를 저장하고 읽어들인다. 각 메모리 셀은 고유한 메모리 주솟값을 갖고 이 메모리 주..

⭐ 탄생 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어로 개발해 처음에는 모카라는 이름이었으며 그 후에 라이브 스크립트를 거쳐 최종적으로 자바스크립트라는 이름이 되었다. ⭐ 크로스 부라우징 이슈 마이크로소프트가 자바스크립트의 성공에 자극받아 자바스크립트의 파생 버전인 "JScript"를 인터넷 익스플로러 3.0에 탑재했다. 이는 자사 브라우저의 점유율을 높이기 위해 자사 브라우저 외에는 동작하지 않도록 만들어져 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했다. (IE에서의 자바스크립트의 사용은 실제로는 J스크립트의 사용을 의미하는 것이었다..!)..