얕은 비교숫자, 문자열 등 원시 자료형은 값을 비교한다.배열, 객체 등 참조 자료형은 값 혹은 속성을 비교하지 않고, 참조되는 위치를 비교한다. const obj1 = { a: 1, b: 2 };const obj2 = { a: 1, b: 2 };console.log(obj1 === obj2); // false 값 대신 참조 위치를 비교하기 때문에 false가 나온다.     깊은 비교 얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교한다.const obj1 = { a: 1, b: 2 };const obj2 = { a: 1, b: 2 };console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // trueJSON.stringify()를 사용한다...

클로저란? 다른 함수 내부에 정의된 함수가 있는 경우 외부 함수가 실행을 완료하고, 해당 변수가 해당 함수 외부에서 더 이상 액세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스 할 수 있는 것.    function outerFunction(outerVariable){ return function innerFunction(innerVariable){ console.log('Outer Variable: ' + outerVariable); console.log('Inner Variable: ' + innerVariable); }}const newFunction = outerFunction('outside');newFunction('inside');위의 코드에서 ou..

동기와 비동기동기는 이전의 작업이 끝나야 다음 것을 할 수 있지만, 비동기는 여러 작업을 동시에 진행할 수 있다.    자바스크립트는 동기 언어이다.자바스크립트는 한 줄을 실행하고 다음 줄을 실행하는 ‘동기 언어’이다. 그런데 setTimeout 함수처럼 비동기로 작동하는 함수가 있다. 이는 자바스크립트의 부분이 아니다. 브라우저에서 사용을 한다면 브라우저 api를 사용하는 것이고, Node에서 사용한다면 Node api를 사용하는 것. 즉! 자바스크립트는 비동기처럼 사용할 수는 있지만, 결국은 다른 것의 도움을 받아서 비동기처럼 사용할 수 있는 것!    자바스크립트 동작 과정 자바스크립트 코드를 실행하려면 자바스크립트 엔진이 필요하다. 이때 엔진은 두 가지 주요 요소로 구성된다. 메모리 힙 - 메모리..

함수 안에서 this를 사용하면 window 객체를 참조하게 된다. 이때 call, apply, bind를 사용하면 참조하는 객체를 바꿀 수 있다.   1. call 메서드call 메서드는 함수를 호출하는 함수이며, 첫 번째 인수로 값을 전달해 주면, 호출되는 함수의 this는 window 객체가 아닌 전달받은 값을 가리키게 된다. const fullName = function(){ console.log(this.firstName + " " + this.lastName);}fullName();이 상태로 출력하면 undefined가 출력된다. 왜냐하면 함수 내에서 this는 window객체를 가리키는데, 이때 window객체 내에 firstName라는 메서드가 없기 때문이다. 이런 상황에서 call 메서..

this 1. 메서드에 this 사용 시const audio = { title: 'a', play(){ console.log('play this', this); }}audio.play() 메서드에서 this를 사용하면 해당 객체를 가리킨다.    2. 함수에서 this 사용 시function playAudio(){ console.log(this);}playAudio();함수에서 this를 사용하면 window 객체를 가리킨다.     3. 생성자 함수에서 this 사용 시function Audio(title){ this.title = title; console.log(this);}const audio = new Audio('a');생성자 함수에서 this를 사용하면 빈 객체를 가리킨다. ..

id를 반환받지 않아도 지목할 수 있다. id값으로 coffee라는 값을 가진 요소를 반환받아서, 새롭게 만든 p태그를 붙이는 과정이다. 그런데 여기서 id를 그대로 붙여도 오류가 나지 않았다. 신기하게 querySelector를 주석처리하고, id값을 그대로 사용해도 출력이 되는 것을 확인할 수 있다. 왜 그런 것인가? https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-properties Do DOM tree elements with IDs become global properties? Working on an idea for a simple HTMLElement wrapper I stumbled..