JavaScript204 [JavaScript]변수 선언과 호이스팅(Hoisting) JavaScript의 변수 선언 방법과 호이스팅(Hoisting) 개념에 대해 정리합니다. 변수 선언 방법과 호이스팅은 간단한 개념이지만, 이번 기회에 정확하게 정리하고자 합니다. 목차 변수 선언 방법 전역 변수와 함수 내부의 지역 번수 이름이 동일 호이스팅(Hoisting) 변수 선언 방법 JavaScript에서는 변수를 var 키워드를 이용하여 선언할 수 있습니다. (let과 const 키워드는 추후 정리할 예정입니다.) 변수마다 var 키워드를 사용하여 변수를 선언할 수 있습니다. var value; var name; 콤마( , )를 사용하여 한 줄로 선언할 수도 있습니다. var value, name; 그리고 변수 선언과 동시에 초기화를 할 수도 있습니다. var languane = 'Korean.. JavaScript/JavaScript 문법 2021. 8. 17. [JavaScript]현재 날짜 구하기, yyyymmddhhmmss포메팅 JavaScript에서 날짜와 시간을 나타내는 Date 객체 사용 방법을 정리합니다. 목차 Date 객체 생성하기 Date 객체에서 날짜 정보 가져오기 문자열 변환 함수 및 yyyymmddhhmmss 포메팅 몇 년, 몇 월, 며칠 전후 Date 객체 생성하기 매개변수가 없으면, 생성 시점의 날짜로 Date 객체를 생성합니다. // 현재 날짜 var nowDate = new Date(); console.log(nowDate); // Mon Aug 16 2021 18:17:28 GMT+0900 (한국 표준시) // 년, 월, 일을 전달한 값으로 셋팅 // 2021년 1월 1일의 Date객체 생성 var date1 = new Date(2021, 0, 1); console.log(date1); // Fri Ja.. JavaScript/JavaScript 문법 2021. 8. 16. [JavaScript]함수형 프로그래밍 - 합성(composition) 앞에서 설명한 내용들을 기반으로 필요한 기능 및 로직을 순수 함수로 나누어 개발합니다. 이렇게 나누어진 순수 함수들을 합쳐야 하는 경우가 존재합니다. 예를 들어 A 함수를 실행 후 B 함수를 실행하거나 또는 A 함수를 실행 후 C 함수를 실행해야 하는 경우 (A, B), (A, C)처럼 함수를 조합하는 과정이 필요합니다. 이러한 과정을 함수 합성(function composition)이라고 합니다. 이번 포스팅에서는 함수 합성의 내용을 정리합니다. 메서드 체이닝도 합성의 일부다. 메서드 체이닝을 사용하면, 이전에 호출한 함수의 결과에 다음 함수를 호출할 수 있습니다. 아래 코드는 replace 함수를 사용하여 문자열을 변경하고 변경된 문자열에 또 replace 함수를 사용하는 코드입니다. 따라서, 메서드.. JavaScript/함수형 프로그래밍 2021. 8. 15. [JavaScript]함수형 프로그래밍 - 재귀(Recursion) 재귀(recursion) 함수는 자기 자신을 호출하는 함수를 말합니다. for문과 같은 반복문은 재귀로 변환할 수 있으며, 재귀로 코드를 작성하는 방법이 더 효율적일 수도 있습니다. 이번 포스팅에서는 반복문을 재귀 함수로 변경하는 코드를 기반으로 재귀에 대한 내용을 정리합니다. 재귀에 대한 개념 및 이론적인 설명은 하지 않으며, 함수형 프로그래밍과 연관 지어 설명합니다. 배열의 합계를 재귀 함수로 작성 반복문을 사용하여 5부터 0까지의 합계를 반환하는 코드입니다. var totalValue = function(param) { var sum = 0; for(var loop = param; loop > 0; loop--) { sum += loop; } return sum; } console.log(total.. JavaScript/함수형 프로그래밍 2021. 8. 15. [JavaScript]함수형 프로그래밍 - 고차 함수 함수형 프로그래밍에서 고차 함수(high order function) 통칭 HOF가 존재합니다. 고차 함수는 다른 함수를 인자로 받거나 또는 함수를 반환하거나 방금 말한 두 가지를 모두 수행하는 함수입니다. 이번 포스팅에서는 고차 함수에 대해 정리합니다. 다른 함수를 인자로 받음 다른 함수를 인자로 받는 함수는 Array.map, Array.filter, Array.reduce와 같은 함수들이 존재합니다. 즉, 위 3개의 함수는 고차 함수입니다. filter 함수를 예로 설명합니다. 아래 코드는 배열의 요소에서 'Korean'이 아닌 요소들을 모아서 새로운 배열을 반환합니다. var language = [ 'Korean', 'English', 'German' ]; var filterArr = langua.. JavaScript/함수형 프로그래밍 2021. 8. 14. [JavaScript]함수형 프로그래밍 - 데이터 변환 함수형 프로그래밍에서 순수 함수의 요건을 다시 한번 정리해봅시다. 1. 파라미터를 최소 하나 이상 받으며 파라미터에 의해서만 반환 값이 결정됩니다. 2. 값이나 다른 함수를 반환합니다. 3. 부수 효과가 없어야 합니다. 4. 입출력을 수행해서는 안 됩니다. 즉, 순수 함수는 함수 외부의 값을 변경하지 않아야 하고 값을 반환해야 합니다. 대부분 자바스크립트 개발자들은 기존의 값을 변경하지 않고 새로운 값을 반환하는 순수 함수를 많이 사용해왔습니다. 다만, 그 함수들을 함수형 프로그래밍의 개념과 순수 함수와 관련지어서 생각을 못 했을 뿐이죠. 대표적으로 Array.map 함수와 Array.reduce 함수가 존재합니다. 이번 포스팅에서는 배열에서 지원하는 함수들을 사용하여 어떻게 새로운 값을 반환하는지 정리.. JavaScript/함수형 프로그래밍 2021. 8. 14. [JavaScript]배열에서 최댓값(max), 최솟값(min) 구하기 JavaScript에서 배열의 최댓값(max), 최솟값(min)을 구하는 방법을 정리합니다. 배열에서 최댓값, 최솟값을 구하는 방법은 반복문을 사용하여 구할 수 있으며, 숫자인 경우에는 JavaScript에서 지원하는 Math.max()와 Math.min()을 사용하여 구할 수 있습니다. 단, Math.max()와 Math.min() 함수는 숫자만 가능하기에 제한적입니다. 문자열의 최댓값, 최솟값을 구하고 싶다면, 배열의 프로퍼티 함수인 reduce 함수를 사용하거나 또는 sort 함수를 사용하여 정렬 후 첫 번째 인덱스와 마지막 인덱스의 값을 구하는 방법도 존재합니다. 목차 반복문을 사용하여 최댓값, 최솟값 구하기 Math.max와 Math.min 함수 사용하여 최댓값, 최솟값 구하기 reduce 함수.. JavaScript/배열 2021. 8. 13. [ECMAScript]Set 객체 Set 객체는 ECMAScript 6부터 도입된 JavaScript 객체입니다. Set 객체를 간단하게 설명하자면, 고유한 값을 가지는 객체입니다. 중복 값을 가지지 않고 정렬되지 않은 상태로 생성됩니다. 이번 포스팅에서는 Set 객체의 사용 방법을 정리합니다. 목차 Set 객체 생성 방법 Set 객체 다루기(요소의 개수, 추가, 삭제) Set 객체의 요소를 반복문으로 접근하기 부분집합, 합집합, 교집합, 차집합 Set 객체 생성 방법 빈 Set 객체를 생성합니다. var setObject = new Set(); iterableObject(순회할 수 있는 객체)를 전달하여 Set 객체를 생성하는 방법입니다. 중복되는 값을 가지는 배열을 전달하여 중복 값을 가지지 않은 Set 객체를 생성합니다. var s.. JavaScript/JavaScript 문법 2021. 8. 13. [JavaScript]배열에서 중복값 제거하는 방법 JavaScript에서 배열의 중복 값을 제거하는 방법을 정리합니다. 목차 Set 객체와 spread 연산자 사용 filter 함수와 indexOf 함수 사용 filter 함수와 hasOwnProperty 함수 사용 sort 함수와 filter 함수 사용 sort 함수와 reduce 함수 사용 Set 객체와 spread 연산자 사용 Set 객체는 고유한 값을 가지는 객체입니다. Set 객체를 생성하여 중복 값이 없는 객체를 생성하고 spread( ... ) 연산자를 사용하여 Set 객체를 배열로 변환합니다. var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]; var setObj = new Set(arr); console.log(setObj); var setArr = [...setO.. JavaScript/배열 2021. 8. 11. [JavaScript]객체의 프로퍼티를 접근하는 방법 JavaScript에서 객체의 프로퍼티을 접근하는 방법은 점( . ) 표기법과 대괄호( [] ) 표기법이 존재합니다. 이번 포스팅에서는 객체의 프로퍼티를 접근하는 방법과 표기법 사용 방법을 정리합니다. 목차 객체의 프로퍼티를 접근하는 방법 어떤 표기법을 사용하는 것이 좋은가? 점 표기법의 한계 동일한 이름의 식별자와 속성이 존재하는 경우 결론 객체의 프로퍼티를 접근하는 방법 점( . ) 표기법과 대괄호( [] ) 표기법을 사용하여 접근합니다. var objProperties = 'title' var obj = { title : 'Java' } // 점 표기법 console.log(obj.title); // Java // 대괄호 표기법 1. 문자열로 접근 console.log(obj['title']); /.. JavaScript/JavaScript 문법 2021. 8. 11. [JavaScript]배열의 요소를 추가하는 방법 JavaScript에서 배열의 요소를 추가하는 방법을 정리합니다. 기존 배열을 변경하는 push, unshift, splice 함수 그리고 length 프로퍼티를 사용하여 요소를 추가하는 방법 기존 배열을 변경하지 않고 새로운 배열을 생성하는 concat 함수와 spread( ... ) 연산자를 사용하여 요소를 추가하는 방법이 존재합니다. 목차 push 함수를 사용하여 배열의 마지막 위치에 요소를 추가 unshift 함수를 사용하여 배열의 첫 번째 위치에 요소를 추가 splice 함수를 사용하여 배열 요소를 추가 length 속성을 사용하여 배열 요소를 추가 concat 함수를 사용하여 배열 요소를 추가 spread 연산자를 사용하여 배열 요소를 추가 push 함수를 사용하여 배열의 마지막 위치에 요소를.. JavaScript/배열 2021. 8. 11. [JavaScript]배열의 요소를 삭제하는 방법 JavaScript에서 배열의 요소를 삭제하는 remove 함수가 존재하지 않습니다. remove 함수는 존재하지 않지만, 배열의 요소를 삭제할 수 있는 다양한 방법이 존재합니다. 이번 포스팅에서는 JavaScript에서 배열의 요소를 삭제하는 방법을 정리합니다. 목차 pop 함수를 사용하여 배열의 마지막 요소를 삭제 shift 함수를 사용하여 배열의 첫 번째 요소를 삭제 splice 함수를 사용하여 배열 요소를 삭제 filter 함수를 사용하여 조건에 일치하는 새 배열을 생성 delete 연산자를 사용하여 배열 요소를 삭제 pop 함수를 사용하여 배열의 마지막 요소를 삭제 pop() 함수는 배열의 마지막 요소를 삭제합니다. 반환 값은 삭제된 요소의 값입니다. var arr = ['A', 'B', 'C'.. JavaScript/배열 2021. 8. 11. 이전 1 ··· 12 13 14 15 16 17 다음