화살표 함수(() => {})는 함수를 간단하게 표현할 수 있는 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란? - 네트워크 상에서 접근할 수 있는 프로그램으로서 어떤 자료들에 대한 관리나 접근을 제어해주는 프로그램 (일반적으로 사용..
실무에서 하드 코딩을 하다가 배열 안에서 중복되는 값들을 count 해야 하는 상황이 왔다. 찾아보니 reduce()라는 기능을 가진 녀석이 있었는데 글을 적으며 이해하기 위해 노력해본다. ex) arr = {"김동수","김동수","김영희","김영희"} 라는 녀석이 있는데 중복 값을 count 해야 한다. 얼핏 정리한 글들을 봤는데 자바스크립트 내장 메서드 중에서 제일 강력하다는 글을 보았다. 먼저 map()을 살펴보자. map()이란? map의 기본 원리는 간단한데, 반복문을 돌며 배열 안의 요소들을 1:1로 짝지어 주는 것이다. 어떻게 짝지어줄 것인가 정의한 함수를 메서드의 인자로 넣어주면 된다. // map 활용 const arr = [1,2,3]; let result = arr.map( (resu..