본문 바로가기

IT/javascript

 (6)
[javascript] 구조 분해 할당 (destructuring assignment) 1. 구조 분해 할당 배열이나 객체를 분해하여 저장된 값을 개별 변수에 원하는대로 담을 있는 문법입니다. 2. 배열 분해 할당하기 1) 배열 분해 할당 var arr = ["kim", "park", "lee"]; var [a, , c, d = "empty"] = arr; //배열 구조 분해 할당 console.log(a, c, d); // kim lee empty arr 배열에 "kim", "park", "lee" 값이 들어있고, arr 배열을 구조 분해 할당해서 변수 a, c, d에 삽입합니다. 배열에 순서와 선언된 변수 순서에 맞게 분해 할당됩니다. 해당 자리가 비어있다면, 할당되지 않으며, 값이 할당되지 않았을 경우 디폴트 값을 설정할 수 있습니다. 2) "..." 연산자로 나머지 값 저장하기 va..
[javascript ] new 연산자와 생성자 함수 1. 객체를 만드는 두가지 방법 1) 객체 리터럴을 이용한 방법 객체 리터럴은 {...}을 사용해서 객체를 생성합니다. var obj = { name: "kim", getName: function () { console.log(this.name); } }; console.log(obj.name); obj.getName(); 2) 생성자 함수를 이용하는 방법 1) 관례상 함수 이름의 첫글자는 대문자로 시작합니다. 2) 함수 호출 시 "new" 연산자를 붙여서 실행합니다. function Person(name) { this.name = name; this.showName = function () { console.log(`My name is ${this.name}`); }; } var person = new..
[javascript] 프로토 타입(prototype) 1. Prototype이란? 자바스크립트의 모든 객체는 부모 객체와 연결되어 있습니다. 최상위 객체는 Object 객체이며, 해당 객체의 모든 메소드를 상속받습니다. 이 때 부모 객체를 가리켜 Prototype 객체라고 합니다. 2. Prototype을 사용하는 이유 1) 생성자 함수로 생성된 객체에 공통 변수와 메소드를 공유할 수 있습니다. 2) 상속을 구현할 수 있습니다. 3. __proto__ __proto__ 는 prototype 객체를 가리키는 프로퍼티입니다. 모든 객체가 이 프로퍼티를 가지고 있습니다. prototype 객체는 다음과 같은 데이터를 저장하고 있습니다. 1) constructor 생성자 함수에 대한 데이터를 저장하는 객체입니다. 2) 공통 메소드와 공통 변수 해당 프로토타입으로 ..
[javascript] 클로저(Closure)란? 클로저란? 함수 내부에 선언된 변수는 함수 종료 시, 모두 반환되지만, 외부에서 그 값을 계속 참조할 경우 반환하지 않습니다. 클로저는 이러한 특성을 이용해서 사용되는 데, 함수 내부의 변수를 참조하는 함수를 리턴하는 형식으로 사용됩니다. function func() { var num = 1; return function () { return ++num; }; } var closure = func(); closure(); // 2 closure(); // 3 closure(); // 4 func()함수는 num 변수를 선언하고 num 변수를 증가시키는 함수를 반환하는데, func()함수가 종료되어도 num 변수는 사라지지 않고 클로저 함수에서 사용됩니다. 이러한 동작이 가능한 이유는 함수는 1급 객체이고..
[javascript] this 란 1. this javascript의 this는 다른 언어의 this와 동작하는 방식이 조금 다릅니다. javascript에서 대부분의 경우 this는 함수를 호출하는 방법에 따라 결정됩니다. 즉, 함수를 호출 할 때 마다 this가 가리키는 값이 다를 수 있습니다. 2. 전역에서 this를 호출 했을 경우 console.log(this); // window 전역에서의 this는 기본적으로 window 객체를 가리킵니다. 3. 함수 안에서 this를 호출 했을 경우 function doSomething(){ return this; } console.log(doSomething()); // window console.log(window.doSomething()); // window this를 결정하는 건 대..
[javascript] 실행 컨텍스트(Execution Context) 1. 실행 컨텍스트란? 자바스크립트 코드가 실행되고 있는 구역 또는 범위에 대한 정보를 저장하고 있는 객체입니다. 자바스크립트 엔진은 스크립트 혹은 함수를 실행할 때 새로운 컨텍스트를 만들고, 실행 스택에 쌓습니다. 실행 스택이란 실행 컨텍스트가 생성될 때 마다 실행 컨텍스트를 쌓고 마지막으로 쌓인 실행 컨텍스트 부터 차례대로 실행하는 후입선출 자료구조입니다. 2. 실행 컨텍스트의 종류 1) Global Exception Context 자바스크립트 엔진이 실행될 때 가장 먼저 만드는 실행 컨텍스트입니다. 전역 컨텍스트라고 하며, window 객체를 만들고 전역 컨텍스트의 this를 window 객체로 할당합니다. 그리고 이후에 생성되는 모든 전역 변수, 함수는 window 객체에 저장됩니다. 2) Fun..

티스토리툴바