FIF's 코딩팩토리

자바스크립트에서 배열을 다룰 때 자주 사용하는 map, filter, some, every 함수에 대한 정리 map()map 함수는 배열 내의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.원본 배열은 변경되지 않습니다. 사용법const newArray = array.map(callback); 매개변수callback: 배열의 각 요소에 대해 호출할 함수. 이 함수는 세 가지 인수를 받습니다.currentValue: 처리할 현재 요소index (선택적): 처리할 현재 요소의 인덱스array (선택적): map을 호출한 배열 자체예제const numbers = [1, 2, 3, 4]; const doubled = numbers.map(num => num * 2); console..

Spread Operator - ... 연산자 스프레드의 사전적인 뜻은 '펼치다' 정도 이다. 스프레드 오퍼레이터는 자바스크립트 표현식을 확장(펼칠 수 있는)할 수 있는 연산자 이다. 배열이나 객체에서 주로 사용하고 표현은 점3개 ... 로 한다. 아래는 사용 예이다. array1 배열에 1,2,3 값이 있다. array2 배열요소 안에 ...array1 이라고 하면 [1,2,3] 값을 일일이 쓸 필요 없이 사용할 수 있다. array1를 콘솔에 출력해보면 [1,2,3,4,5] 가 나온다. 펼치다(spread)는 것은 객체 혹은 배열의 속성을 가져올 수 있다는 것을 의미한다. const array1 = [1, 2, 3]; const array2 = [...array1, 4, 5]; console.log(..

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용한다. const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할 수 있다.`; console.log(template); 일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백(white-space)를 표현하기 위해서는 백슬래시(\)로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용하여야 한다. ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 ..

Ajax 소개 Ajax는 'Asynchronous JavaScript and XML'의 약자입니다. Web에서 화면을 갱신하지 않고 Server로부터 Data를 가져오는 방법입니다. Ajax의 동작원리는 Browser에서 서버로 보낼 Data를 Ajax Engine을 통해 Server로 전송합니다. 이 때 Ajax Engine에서는 JavaScript를 통해 DOM을 사용하여 XMLHttpRequest(XHR) 객체로 Data를 전달합니다. 이 XHR을 이용해서 Server에서 비동기 방식으로 자료를 조회해 올 수 있습니다. Server에서 Data를 전달 할 때 화면전체의 HTML을 전달하지 않고 Text 또는 Xml형식으로 Browser에 전달합니다. 왜 Ajax인가? 물론 Ajax는 Browser의..

클로저란? MDN에서는 클로저를 다음과 같이 정의하고 있다. 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’. 흔히 함수 내에서 함수를 정의하고 사용하면 클로저라고 한다. 하지만 대개는 정의한 함수를 리턴하고 사용은 바깥에서 하게된다. 말로 설명하면 설명하기가 복잡하니 우선 코드를 보자. function getClosure() { var text = 'variable 1'; return function() { return text; }; } var closure = getClosure(); console.log(closure()); // 'variable 1' 위에서 정의한 getClosure()는 함수를 반환하고, 반환된 함수는 get..

올해 봄에만 해도 코딩에 대해서 지금보다 더 아무것도 모를때 "자바스크립트는 '자바'라는 글자가 들어가니까 '자바'의 일종(스크립트)인 언어구나!" 라고 오해했었다. 공부한지 시간이 몇 달 지난 지금에서 보면 왜 이름에 자바가 들어가는지 이해가 안된다. 최초 이름은 Mocha 모카였고 단 10일만에 만들어낸 언어라고 한다. 그 당시에 가장 핫한 언어가 자바였기 때문에 어떻게든 연관 시키고 싶어서 그렇게 되었다고 선생님이 말씀해주셨다. 자바스크립트가 처음 출현했을때는 한참 브라우저 별로 각자 다른 기능을 제공하던 시기여서 근본 없는 언어라는 오명을 받았지만 2005년에 Ajax가 발표되고 동적 웹사이트가 인기를 끌면서, 자바스크립트가 다시 뜨게되었고, jQuery, Prototype.js 와 같은 라이브러..

DOM 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 H..

자바스크립트는 프로토타입 기반 언어라고 불립니다. 자바스크립트 개발을 하면 빠질 수 없는 것이 프로토타입인데요,프로토타입이 거의 자바스크립트 그 자체이기때문에 이해하는 것이 어렵고 개념도 복잡합니다. 하지만 프로토타입이 무엇인지 깨우친 순간 자바스크립트가 재밌어지고, 숙련도가 올라가는 느낌을 팍팍 받을 수 있습니다. 그럼 지금부터 프로토타입을 이해해봅시다. Prototype vs Class 클래스(Class)라는 것을 한 번쯤은 들어보셨을겁니다. Java, Python, Ruby등 객체지향언어에서 빠질 수 없는 개념이죠. 그런데 중요한 점은 자바스크립트도 객체지향언어라는 것입니다. 이게 왜 중요하냐구요? 자바스크립트에는 클래스라는 개념이 없거든요. 대신 프로토타입(Prototype)이라는 것이 존재합니다..