JavaScript 6

[JS] reduce() 사용법

JavaScript로 백준 문제풀이를 하는데 다른 사람들은 reduce()를 사용해서 배열을 처리했다. 그런데 코드를 봐도 무슨 말인지 이해할 수 없었다. reduce 함수를 좀 더 잘 이해하고 사용하기 위해서 정리해보기로 했다. 찾아보다 보니까 reduce 함수는 덧셈을 할 때만 사용하는 함수인 줄 알았는데 생각보다 다양한 활용이 가능하다. reduce 간단 설명 reduce는 기본적으로 배열을 하나의 값으로 감소시키는 역할을 한다. reduce 로 map,filter 등의 다양한 메서드를 구현 가능하다. reduce 메서드의 기본적인 사용법은 다음과 같다. acc - 누적 값 cur - 현재 값 idx - 현재 요소의 인덱스 >> 초기값을 제공하면 0부터, 아니면 1부터 시작한다. src - redu..

JavaScript 2021.08.28

[JS] All about Function

function sub-program이라고도 불리며, 같은 기능을 여러번 재사용하기 위해 태어났다. JavaScript에서 함수는 다음과 같은 기본형을 가진다. function add(a,b){ //a,b 매개변수(parameter) return a+b } add(2,5); //2,5 인수(argument) 함수 이름 - 한 가지 함수는 한 가지 일을 하도록 만드는 것이 좋다. - 함수의 이름은 함수가 어떤 일을 하는지 나타내는 동사나 명령어 형태로 짓는다. first-class function(일급 함수) JS에서 function은 first-class function(일급 함수)으로 - 변수에 값으로 함수를 할당할 수 있고(값으로서의 함수) - 매개변수(parameter)로서 함수를 전달할 수 있고 ..

JavaScript 2021.07.31

[JS] forEach()와 map() 차이점

어렴풋이 forEach와 map 모두 배열의 원소들을 입맛대로 조종하는 함수라는 것을 기억하고 있었다. 그러나 백준에서 문제를 푸는데 map()을 사용하면 맞고, forEach()를 사용하면 틀리는 문제가 나왔다. 이참에 두 함수의 차이점을 알아보기로 했다. 함수형 프로그래밍 일단 두 함수 모두 함수형 프로그래밍을 위한 메서드이다. 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. Array.prototype.forEach forEach 메서드는 for문을 대체할 수 있는 함수다. forEach 메서드는 자신의 내부에서 반복문을 실행한다. 즉, forEach 메서드..

JavaScript 2021.07.27

[JS] JavaScript Operator

Increment operators preIncrement let counter = 2; const preIncrement = ++counter; // counter = counter + 1 // preIncrement = counter console.log(preIncrement) //3 PostIncrement let counter = 2; const postIncrement = counter++; // postIncrement = counter // counter = counter + 1 console.log(postIncrement) //2 Logical operators or 연산자 || and 연산자 && not 연산자 ! || 연산자의 경우 true가 하나라도 나오면 그 다음 연산을 수행하지..

JavaScript 2021.07.24

[JS] 'use strict' 사용 이유와 변수선언 const, let, var

use strict 자바스크립트는 매우 유연한 언어로 개발자가 코드상 오류를 범해도 브라우저에서는 오류로 표시하지 않고 넘어가는 경우가 많다. 이러한 유연성은 개발자가 오류를 정확히 인지하지 못하는 위험으로 다가오기 때문에 항상 'use strict'모드를 JavaScript 파일 맨 윗줄에 사용하여 안전한 코드 작성을 하도록 하자. 예를 들어 자바스크립트에서는 선언되지 않은 변수에 값을 할당해도 브라우저상에서 문제가 발생하지 않는다. 그러나 use strict 모드를 사용하면 브라우저에 error를 띄워서 잘못된 점을 찾아준다.(내 잘못을 컴퓨터가 찾아줄 수 있다.) let vs var let과 var은 둘다 변수를 선언하기 위해 사용된다. block-level scope 기본적으로 javascript..

JavaScript 2021.07.22

[JS] HTML에서 JavaScript를 불러오는 4가지 방법

브라우저의 동작방식 위는 사파리 브라우저에서 처리되는 webkit 렌더링엔진의 처리과정이다. Browser의 동작과정은 보통 이런 과정을 거친다. HTML을 parsing해서 DOM Tree를 만들고, CSS를 parsing해서 CSS Object Model을 만든다. 그리고 이 둘을 합쳐서 rendering 해서 web page로 보여준다. 이 때, HTML코드에서 JavaScript를 언제, 어떻게 불러올지에 따라 웹페이지의 실행속도와 성능이 차이날 수 있다. 기본적으로 HTML에서 JS를 불러오면 js fetching(다운) js executing(실행)의 과정을 거쳐서 모든 HTML parsing이 끝나면 web page가 보여질 준비를 마치게 되고, js executing까지 끝나야 페이지가 정..

JavaScript 2021.07.21