JavaScript204 [JavaScript]1급 시민(First Class Citizen) 자바스크립트에서 함수형 기법을 사용하여 코드를 작성해보셨을 겁니다. 그리고 본인이 함수형 기법을 사용했는데, 함수형 기법이 무엇인지 모르는 분들도 계실 겁니다. 이번 포스팅에서는 함수형 프로그래밍의 1급 시민에 대해 설명을 하며, 예제 코드를 통해 확인을 해봅니다. 함수형 프로그래밍의 역사 「 1930년대 발견한 람다 계산법(lambda calculs)이 함수형 프로그래밍의 시작이라고 할 수 있습니다. 람다 계산법 발견 후 여러 가지 연구를 진행하여 1950년대 존 맥카시(Jonh McCarthy)는 람다 계산법을 활용한 리스프(Lisp)라는 프로그래밍 언어를 만들었습니다. 리스프는 고차 함수라는 개념과 함수가 1급 시민 또는 1급 멤버라는 개념을 구현했습니다. 」 고차 함수 - 다른 함수를 조작하는 함.. JavaScript/함수형 프로그래밍 2021. 7. 17. [JavaSciprt]Warning : You provided a `value` prop to a form field without an `onChange` handler. 경고 『 Warning: You provided a 'value' prop to a form field without an 'onChange' handler. This will render a read-only field. If the field should be mutable use 'defaultValue'. Otherwise, set either 'onChange' or 'readOnly' 』 해석 'onChange' 이벤트 핸들러 없이 form 내부에서 'value' prop를 사용하였습니다. value를 사용한 Element는 읽기 전용으로 렌더링 될 것입니다. 만약 값을 수정하고 싶다면, defaultValue를 사용해야 합니다. 그렇지 않으면, 'onChage' 또는 'readOnly'로 설.. JavaScript/JavaScript 문법 2021. 7. 14. [JavaScript]Warning : Excepted to return a value at the end of function.(array-callback-return) 경고 『 Expected to return a value at the end of function. (array-callback-return) 』 경고 원인 if 문에서 val === 'A'인 경우에만 return을 하여 경고가 발생합니다. find() 메소드의 callback() 함수에서 if 문에 대응되는 else 문이 존재하지 않아서 경고를 발생합니다. const arrTest = ['A', 'B', 'C']; const testdata = arrTest.find(function (val) { if (val === 'A') { return true; } }); console.log('result : ' + testdata); // result : A 경고 해결 else 문을 추가하면, 경고가 사라집.. JavaScript/JavaScript 문법 2021. 7. 12. [JavaScript]자바스크립트 타입 변환 자바스크립트는 타입 변환에 대해 유연하게 동작합니다. 다른 프로그래밍 언어와는 다르게 변수를 boolean, int, float로 타입을 선언하지 않아도 자동으로 타입 변환이 가능합니다. 아래는 문자열 '100' 이랑 숫자 2를 곱하는 코드입니다. 타입이 다르기 때문에 에러 또는 경고가 발생할 거라 예상했지만, 문자열 '100'이 숫자로 변환이 되어 결과는 200이 출력이 되었으며, 타입도 숫자형이라는 것을 알 수 있습니다. console.log('100' * 2); // 200 console.log(typeof ('100' * 2)); // number 자바스크립트에서 타입 변환은 2가지 유형이 존재합니다. 1. 암시적 변환(implicit conversion) : 자동으로 타입이 변환됩니다. → 자바.. JavaScript/JavaScript 문법 2021. 6. 24. [JavaScript]얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 포스팅합니다. 자바스크립트의 데이터 유형 얕은 복사와 깊은 복사에 대해 설명하기 전에 자바스크립트의 데이터 유형에 대해 간단하게 알아봅시다. 자바스크립트에서 기본 데이터 타입(원시 타입)으로는 string, number, null, undefined, symbol이 존재합니다. 참조형 데이터 타입으로는 Array와 Object가 존재합니다. 아래 코드에서는 기본 데이터 타입에 대해 복사 후 값을 변경합니다. var a = 10; var b = a; b = 5; console.log('a : ' + a); console.log('b : ' + b); var b = a; 의 코드에서 a의 값을 b에 복사합니다. 그리고 b의 값을 5로.. JavaScript/JavaScript 문법 2021. 6. 22. [ECMAScript]구조 분해(destructuring)의 활용 자바스크립트뿐만 아니라 대부분의 프로그래밍 언어에서 객체 및 배열에 접근은 빈번하게 작업됩니다. 자바스크립트의 구조 분해(destructuring)는 객체 및 배열에 접근하는 방법을 쉽고 코드를 간결하게 해줍니다. 이번 포스팅에서는 구조 분해를 활용하는 방법에 대해 작성합니다. 값 교환(Swap) 두 개의 변수의 값을 교환하기 위해서는 임시 변수가 필요합니다. var a = 10; var b = 20; var temp; temp = a; a = b; b = temp; 구조 분해는 임시 변수가 없어도 값을 교환할 수 있습니다. var a = 10; var b = 20; [a, b] = [b, a]; console.log(`a : ${a} / b : ${b}`); // "a : 20 / b : 10" 3개 .. JavaScript/JavaScript 문법 2021. 5. 29. [ECMAScript]구조 분해(destructuring) 구조 분해(destructuring)는 객체와 배열 안에 있는 값을 추출하여 변수에 대입하는 편리한 방법입니다. 객체의 속성을 추출하여 변수에 대입하는 기존의 방식 var person = { name: 'Kang JaeSeong', age: 29 }; var name = person.name; var age = person.age; console.log(`name : ${name} / age : ${age}`); // "name : Kang JaeSeong / age : 29" person.name의 값이 name변수에 할당되었습니다. 동일한 방식으로 persone.age의 값이 age 변수에 할당되었습니다. 만약, person 객체의 속성이 10개일 경우 10개의 변수에 값을 할당해야 합니다. 이러한 .. JavaScript/JavaScript 문법 2021. 5. 29. [JavaScript]배열 정렬 sort() JavaScript에서 배열의 요소들을 정렬하기 위해 sort() 메서드를 사용합니다. sort() 메서드를 사용하면 배열의 요소를 오름차순 또는 내림차순으로 정렬할 수 있으며, 기존 배열의 요소들을 정렬합니다. sort() 메서드의 특징 기본적으로 오름차순으로 정렬합니다. 배열 요소를 문자열로 캐스팅하고 변환된 문자열을 비교하여 순서를 결정합니다. 배열의 요소가 undefined인 경우에는 문자열로 변환되지 않습니다. 배열의 요소가 undefined인 경우에는 배열의 맨 끝으로 정렬이 됩니다. var numbers = [1, 10, 2, 20, 3, 30]; numbers.sort(); console.log(numbers); // [1,10,2,20,3,30] 정렬 순서를 1, 2, 3, 10, 20,.. JavaScript/JavaScript 문법 2021. 5. 28. [ECMAScript]디폴트 파라미터(Default Parameter) ES6에서 C++ 나 파이썬처럼 함수에서 인자로 디폴트 값을 설정할 수 있습니다. 함수를 호출하는데 매개 변수가 존재하지 않더라도 함수가 디폴트 값으로 매개변수를 초기화하는 기능입니다. 매개 변수를 생략하고 함수를 호출하는 경우 function add(a,b) { return a + b; } console.log(add()); // NaN 매개 변수를 undefined 체크하는 경우 ES6 이전에는 매개 변수를 생략하고 함수가 호출되는 경우를 방지하고자 매개 변수의 undefined를 체크하는 방식을 사용하였습니다. 이러한 방식의 단점은 함수에 전달할 파라미터가 많아질수록 typeof을 체크하는 코드도 많아지며, 파라미터 순서도 신경을 써야 하는 문제점이 있습니다. function add(a,b) { a.. JavaScript/JavaScript 문법 2021. 5. 27. [ECMAScript]템플릿 리터럴(template literal) ES6 이전에는 작은따옴표(')나 큰따옴표(")를 사용하여 문자열을 생성하였습니다. 하지만, ES6에서 제공하는 템플릿 리터럴(template string)을 사용하면 더 안전하고 깔끔한 방식으로 문자열에 대해 작업이 가능합니다. 템플릿 리터럴은 여러 줄 문자열, 문자열 형식화, HTML 이스케이프, 태그가 지정된 문자열 등 다양한 기능을 제공합니다. 기본 구문(syntax) 템플릿 리터럴은 작은따옴표나 큰 따옴표를 사용하는 대신 백틱(`)을 사용합니다. ※ 백틱(`) : 키보드 Tab 위와 1의 왼쪽에 있는 ` 문자 var str = `ECMAScript Template Literal`; console.log(str); // "ECMAScript Template Literal" console.log(s.. JavaScript/JavaScript 문법 2021. 5. 27. [JavaScript]래퍼 객체(Wrapper Object) 래퍼 객체(Wrapper Object) 이번 포스팅은 JavaScript의 래퍼 객체에 대해 소개합니다. 기본 타입(Primitive Types) 이번 포스팅에서 소개하는 래퍼 객체를 이해하기 전에 JavaScript의 기본 타입(Primitive Types)에 대해 이해할 필요가 있습니다. JavaScript의 기본 타입이란 객체(Object)가 아니며, 메서드와 프로퍼티가 존재하지 않는 데이터입니다. 총 7개의 기본 타입을 제공합니다. - string - number - bigint - boolean - undefined - symbol - null 포스팅 작성일자 기준으로 mozilla에서 언급하고 있는 JavaScript의 기본 타입은 총 7개입니다. Primitive - MDN Web Docs .. JavaScript/기초 2021. 5. 27. [JavaScript]null과 undefined 차이점 null과 undefined 차이점 이번 포스팅은 JavaScript에서 null과 undefined의 차이점을 소개합니다. null null은 변수에 "값이 없음"을 의미합니다. 개발자가 변수에 null을 할당할 수 있으며, 변수에 값이 없다는 것을 의도적으로 보여주기 위한 용도로 사용됩니다. var name = null; console.log(name); // null undefined 이름에서 알 수 있듯이 undefined는 "정의되지 않음"을 의미합니다. 따라서, 변수를 선언하였지만 값을 할당하지 않으면 undefined입니다. 값이 할당되지 않은 변수, 배열의 특정 요소에 값이 할당되지 않은 경우, 존재하지 않는 프로퍼티를 접근하는 경우 undefined를 확인할 수 있습니다. [변수는 선언되.. JavaScript/기초 2021. 5. 19. 이전 1 ··· 14 15 16 17 다음