화살표 함수(() => {})는 함수를 간단하게 표현할 수 있는 ES6문법입니다. 일반 javascript(function ())과 비슷한 방식으로 동작하지만 몇가지 분명한 차이점이 있습니다. 문법(Syntax) // (param1, param2, paramN) => expression // ES5 var add = function(x, y) { return x+y; } // ES6 let add = (x, y) => {return x+y}; 위의 예제에서 보시다시피, 표현법이 다르죠? Regular function(ES5)와 Arrow function(ES6)는 결과는 같은데 타이핑이 절반 가까이 줄어들었습니다. 보기에도 깔끔하구요 또한, 괄호를 생략할 수 있는 경우가 있어서 더 줄어들 수 있죠. in..
클로저는 자바스크립트의 고유 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍언어에서 사용되는 중요한 특성이다. MDN에서는 "클러저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다"라고 설명한다. 자바스크립트는 렉시컬 스코프를 따르는 프로그래밍 언어이다. const x =1; function outerFunction(){ const x =10; function innerFunction(){ console.log(x) //10 } } → innerFunction에서 outerFunction에 있는 x에 접근이 가능하다. 중첩함수 inner의 상위스코프는 외부함수 outerFunction이기 때문이다. 다음은 inner에서 outer 변수에 접근이 불가능하다. const x =1; func..
new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라고 한다. JS는 Object 생성자 함수 이외에도 String,Number,Boolean,Function,Array,Date,RegExp,Promise등의 빌트인 생성자 함수를 제공한다 //String 생성자 함수에 의한 String 객체 생성 const obj = new String('Park'); // String {"Park"} //Function 생성자 함수에 의한 Function 객체(함수) 생성 const func = new Function("x","return x-x"); // f anonymous(x) 생성자 함수에 의한 객체 생성 방식의 장점 생성자 함수에 의한 객체 생성..
Prototype 프로토타입 자바스크립트에서 프로토 타입은 두 가지의 의미를 혼용해서 사용한다. 프로토타입의 두가지 의미 __proto__ : 상위에서 물려 받은 객체의 프로토타입에 대한 정보 prototype : 자신의 프로토타입 객체 즉, 하위로 물려줄 프로토타입의 정보 예시 정의한 Animal 함수의 __ proto __ 는 Amimal 객체를 생성할 때 사용될 원형프로토타입을 가르키고 있다. Animal 함수의 prototype은 Animal의 Prototype가르키고 있다. (두 가지 의미중 두 번째 ) 예시 2 생성한 cat 객체와 dog 객체의 __proto__(prototype link)은, cat 객체와 dog 객체를 생성한 프로토타입 객체를 가르키고 있습니다. 프로토타입 체인(Proto..
클로저는 자바스크립트의 고유 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍언어에서 사용되는 중요한 특성이다. MDN에서는 "클러저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다"라고 설명한다. 자바스크립트는 렉시컬 스코프를 따르는 프로그래밍 언어이다. const x =1; function outerFunction(){ const x =10; function innerFunction(){ console.log(x) //10 } }→ innerFunction에서 outerFunction에 있는 x에 접근이 가능하다. 중첩함수 inner의 상위스코프는 외부함수 outerFunction이기 때문이다. 다음은 inner에서 outer 변수에 접근이 불가능하다. const x =1; funct..
FromData란 ajax로 폼 전송을 가능하게 해주는 FormData 객체입니다. 보통은 Ajax로 폼(form 태그) 전송을 할 일이 거의 없습니다. 주로 JSON 구조로 "KEY-VALUE" (키와 값) 구조로 데이터를 전송합니다. 하지만, form전송이 필요한 경우가 있는데, 이미지를 ajax로 업로드할 때 필요합니다. 이미지는 base64, buffer, 2진 data 형식으로 서버로 전송해도 됩니다. 하지만 추천 드리는 방법은 input[type=file]을 사용해 form(폼)을 통해서 업로드를 하는 것 입니다. 보통, form을 제출하면 action 속성에 의해 지정한 페이지로 이동하면서 데이터를 전송합니다. ajax는 반대로 제출 버튼을 누르면 기본 폼 동작은 e.preventDefaul..
| AJAX로 할 수 있는 것 AJAX라는 네트워크 기술을 이용하여 client - > Server로 Data 요청하고 그에 대한 결과를 돌려받을 수 있다. AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 request한다. 이 경우,JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그 만큼의 자원과 시간을 아낄 수 있다. Client란? -Server에서 정보를 가져와서 사용자에게 보여줄 수 있고 사용자와 상호작용할 수 있는 소프트웨어를 일컫음 ex)web browser, 핸드폰 어플리케이션 Server란? - 네트워크 상에서 접근할 수 있는 프로그램으로서 어떤 자료들에 대한 관리나 접근을 제어해주는 프로그램 (일반적으로 사용..
| encodeURIComponent() ? encodeURIComponent() 함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나,둘 OR 셋의 연속된 이스케이프 문자로 나타냅니다. ※두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네개로 변환됩니다. 다음 문자를 제외한 모든 문자를 이스케이프(유니코드 형식으로 변환) 합니다. 1BYTE 문자는 %XX, 2BYTE 문자는 %uXXXX 형태로 Not Escaped: A-Z a-z 0-9 - _ . ! ~ * ' ( ) //영 대소문자, 숫자 , *-_.,! ~ ' ( ) 은 제외 구문 encodeURIComponent(str); 매개변수 : URI 구성요소 반환 값 주어진 문자열을 URI 구성요소로서 인코딩한 새로운 문자열 | encodeUR..