본문 바로가기

개발 일기11

호이스팅에 대해서 알아보자(feat. 함수 선언문 & 함수 표현식) in Javascript 호이스팅이란 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 {} 안에서 유효 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화가 없다. // 호이스팅의 대상 var 변수 선언과 함수선언문( function test () {} ) 에서만 호이스팅이 일어난다. var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지.. 2020. 12. 20.
filter, map, reduce in javascript 간단 정리 /** * map, filter * 공통점 : 새로운 배열을 만든다. * 차이점 : filter는 조건을 통해 배열안의 값을 삭제 (걸러내기) * map은 원하는대로 배열안의 값을 변경 (변경하기) */ // 1보다 큰 값만 뽑아내서 새로운 배열 만들기 let arr = [1, 2, 3, 4, -1]; // let filterResult = arr.filter(function(num) { // return num > 1 // }) // error function 사용 let filterResult = arr.filter(num => num > 1); console.log(filterResult); // [2, 3, 4] // 배열에서 1씩 더해주고싶을 때 let mapResult = arr.map(num.. 2020. 11. 4.
다형성, 커링 in javascript /** * 3-2. 외부 다형성 */ console.log('---외부 다형성') console.log( [1, 2, 3].map((val) => { return val * 2; }) ); console.log( [1, 2, 3].filter((val) => { console.log(val); return val % 2; }) ); /** console.log( document.querySelectorAll('*').map(function(node) { return node.nodeName; }) ); // querySelectorAll 의 결과가 array가 아니라서 .map을 사용할 수 없음. */ /** * 3-3. 커링 : 함수와 인자를 다루는 기법 함수에 인자를 하나씩 적용해나가다가 * 필요한 .. 2020. 11. 3.
기존의 코드를 함수형 코드로 전환하기 in javascript DOCTYPE html> Document var users = [ { id: 1, name: 'id', age: 36 }, { id: 2, name: 'bj', age: 35 }, { id: 3, name: 'jn', age: 44 }, { id: 4, name: 'as', age: 33 }, { id: 5, name: 'df', age: 52 }, { id: 6, name: 'gh', age: 21 }, { id: 7, name: 'jk', age: 30 }, { id: 8, name: 'lm', age: 29 }, ] /** * 1. 명령형 코드 */ // 1-1. 30세 이상인 user를 검색 var temp_users = []; for (var i=0; i= 30) { temp_users.push.. 2020. 11. 2.
일급함수 in javascript /** 일급함수 자바스크립트에서는 함수가 일급함수인데 함수를 값으로 다룰 수 있다. 함수를 변수에 담을 수 있고, 변수에 담은 함수가 값으로 다뤄질 수 있다. */ var f1 = function(a) { return a * a; } console.log(f1); var f2 = add; console.log(f2); // 함수가 함수를 인자로 받기 function f3(f) { return f(); } console.log( f3(function() { return 10; }) ); /* add maker 순수함수도 사용되고, a를 기억하고있는 클로저 */ function add_maker(a) { return function(b) { return a + b; } } var add10 = add_mak.. 2020. 10. 28.
함수형 프로그래밍 정리 (Functional Programming) javasciprt 함수형 프로그래밍 함수형 프로그래밍의 조건1. 인풋이 있고, 아웃풋을 return 하는 형태의 함수- 부작용이 없는 순수함 : 함수가 인풋만을 받아서 인풋만을 사용하고 아웃풋을 계산하여 리턴해야 함. 2. 다른함수를 인풋 또는 아웃풋으로 사용 (고차함수)- ex) map, reduce, filter 3. 모든 데이터를 불변으로 생각하기var rooms = ['h1', 'h2', 'h3'];rooms[2] = 'h4' ['h1', 'h2', 'h4'];rooms => ['h1', 'h2', 'h3']; 출처 : youtube jsconf 채널의 Anjana Vakil - JSUnconfhttps://www.youtube.com/watch?v=e-5obm1G_FY DOCTYPE html> Document /.. 2020. 10. 28.