Pandaman Blog

Javascript 클로저(Closures)란 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. MDN에서는 위와 같이 클로저를 정의한다. 아래 예제를 통해서 클로저가 무엇인지 확인해보고 위의 정의를 이해해보자. function handleSound() { // 1 const sound = '안녕하세요. 반갑습니다.'; // 2 function playSound() { // 3 alert(sound); } return playSound; // 4 } const myFunc = handleSound(); // 5 myFunc(); // 6 위의 예제를 순서대로 살펴보자. handleSound 함수를 선언했다. 함수 내부에는 const키워드의 sound라는 이름의 지역변수를 선언하고 문자열 '안녕하세요..

Javascript Scope(스코프) 컴퓨터 프로그래밍에서 스코프는 변수가 유효성을 갖는 영역을 가리킨다. Scope는 '범위'라는 의미로 사용될 수 있는데요, 즉 '변수에 접근할 수 있는 범위'를 의미합니다. javascript의 Scope 자바스크립트의 Scope의 다음과 같이 구분할 수 있습니다. 1) 전역 스코프 2) 함수 스코프 3) 블록 스코프 전역스코프 전역에 변수를 선언하면 이 변수는 전역 스코프를 갖는 변수가 됩니다. 다시말해서, 블록밖({})이나 함수외부에 변수가 선언되었다면, 이 변수는 전역 스코프를 갖는다고 말합니다. 전역 스코프를 갖는 전역변수는 코드 어디에서든 참조가 가능합니다. 또한 var 키워드로 전역에 선언한 변수는 전역 객체(window)의 프로퍼티가 됩니다. 아래는 전..

Javascript Prototype(프로토타입) JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메서드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다. -MDN- MDN Javascript prototype을 검색하면 위와 같이 프로토타입에 대해 설명합니다. 음.. 그래도 명확하게 이해가 되지 않..

Javascript의 This this란? 무엇인가요?라고 누가 물어본다면 명확하게 말하기 어렵다고 생각했습니다.. 그래서 바로 MDN 공식 문서와 서적을 통해 알아보았습니다. 대부분의 경우 this의 값은 함수를 호출한 방법이 결정한다. 실행하는 중 할당으로 설정할 수 없고 함수를 호출할 때마다 다를 수 있습니다. 위 말은 함수를 호출하는 객체가 무엇인가에 따라 this가 달라진다는 의미입니다. 한번 예제를 통해 알아보겠습니다. // 1) this는 전역객체 Window console.log(this); // Window const obj1 = { f1: function() { console.log(this); } } // 2) this는 f1()메소드를 호출한 객체 obj1 console.log(ob..

Javascript 함수 호이스팅(Hoisting) 호이스팅(Hosting)은 코드 구문이 실행하기 전에 변수 및 함수 선언이 해당 범위의 맨 위로 이동하는 Javascript 메커니즘입니다. 위 설명을 정확하게 이해하기 위해 예제를 만들어 테스트를 해봤습니다. introduce('oyg0420'); // my name is oyg0420 function introduce(name) { console.log(`my name is ${name}`); } 함수가 선언이 되기 전에 호출을 했는데, 결과는 에러 없이 정상적으로 작동합니다. 그렇다면 위와 같은 구문이 작동되는 이유에 대해 알아보겠습니다. 자바스크립트에서는 스코프 전체를 살펴보고 함수 선언을 맨 위로 끌어올리기 때문입니다. 그렇다면 어떤 방식으로 ..

Javascript Arguments arguments객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다. MDN문서에서는 arguments객체를 위와 같이 설명합니다. 저는 문서를 보고 전달된 인수를 Array형태의 객체로 갖고 있는 것일까? 하고 생각이 들었습니다. 문서를 더 보니 It has entries for each argument the function was called with, with the first entry's index at 0라고 나와 있습니다. 한마디로 함수가 호출될 때 파라미터를 arguments객체에 담아 놓는 것입니다. 자 그럼 간단하게 확인해보겠습니다. const f1 = function(a, b, c){ console.log(arguments); } ..

Javascript Function 자바스크립트의 모든 함수는 Function 객체입니다. JavaScript에서, 함수는 다른 객체처럼 속성 및 메서드를 가질 수 있기에 일급(first-class) 객체입니다. MDN 문서를 확인해보면 Function 객체는 일급 객체(first-class)라고 정의합니다. 그렇다면 일급 객체라는 것이 무엇인지 확인해보겠습니다. 변수나 데이터 구조안에 담을 수 있다. 파라미터로 전달할 수 있다. 리턴 값으로 사용할 수 있다. 간단한 예제를 통해 알아보겠습니다. // 1. 변수에 함수를 할당 const multiply = function(a, b){ return a * b }; console.log(sum(1, 2)); // 3 // 2. 파라미터로 전달 const su..

Date Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 생성합니다. Date 객체는 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 밀리초로 나타내는 유닉스 타임스탬프를 사용합니다. Date 객체 사용법 Date 객체는 네가지 형태로 사용될 수 있습니다. 예제를 통해 알아보겠습니다. // 매개변수 없음 new Date(); // Tue Jan 07 2020 22:47:40 GMT+0900 (한국 표준시) // 유닉스 타임스탬프 new Date(1040000300000) // Mon Dec 16 2002 09:58:20 GMT+0900 (한국 표준시) // 시간 구성요소 매개변수 전달 new Date(2020, 0); // Wed Jan 01 2020 00:00:00..