본문 바로가기

Programming/Javascript25

자바스크립트 전개 연산자 (...) 전개연산자는 ES6에서 추가된 기능으로 배열이나 객체를 분해된 값으로 전달하는 기능입니다. 배열 등 모든 순환 가능한 것들은 펼쳐서 가져올 수 있습니다. 1. 배열 예 const arr1 = ['a', 'b', 'b']; const arr2 = ['d', 'e', 'f']; const arr3 = ['g', 'h', 'i']; const sum_array = [...arr1, ...arr2, ...arr3]; console.log(sum_array); // ['a', 'b', 'b', 'd', 'e', 'f', 'g', 'h', 'i'] 2. 객체배열 예 const obj_array=[ { name: "one", age: 1, }, { name: "two", age: 2, }, { name: "three.. 2023. 6. 22.
자바스크립트 화살표 함수 (=>) 오늘은 자바스크립트 ES6에서 추가된 주요 기능 중 화살표함수( => )에 대해 알아보겠습니다. [ 목차 ] 1. 화살표 함수 기존의 function으로 함수를 표현하는 방식을 좀 더 간결하게 표현하기 위해 화살표( => ) 함수가 도입되었습니다. 아래의 두 함수는 모두 동일한 역할을 하는 함수입니다. const test1 = function(a,b){ return a+b; } const test2 = (a,b) => { return a+b; }; const test3 = (a,b) => a+b; 2. 화살표 함수 주의점(this) 일반적인 자바스크립트 함수에서의 this는 - 전역 객체 - 메소드 호출시 호출한 해당 객체 를 나타냅니다. // 일반 함수 const obj1 = { name: '홍길동',.. 2023. 6. 22.
자바스크립트 filter 사용법 자바스크립트 filter 메소드에 대해 알아보겠습니다. Filter 메소드는 배열 내부를 순환하면서 특정 조건에 부합하는 요소들을 새로운 배열에 담아 반환합니다. 1. 기본사용법 result = my_array.filter (a => { return [조건]; }); const my_array = [1,2,3,4,5,6,7,8,9,10] const result = my_array.filter(a => { return a % 2 == 0; // a중 2로 나눈 나머지가 0(즉, 짝수)인 요소 }); console.log(result); // [ 2, 4, 6, 8, 10 ] 2. 객체 다루기 const my_array = [ {name:'홍길동', age:28}, {name:'이순신', age:37}, {.. 2023. 6. 20.
자바스크립트 Reduce사용법 reduce 함수는 자바스크립트에서 배열 또는 리스트 안의 요소들을 정렬하거나 특정 조건에 부합하면 합계나 평균 등을 계산하는데 사용되는 함수입니다. 개인적으로 자주 쓰지는 않지만 잘 알고있으면 많이 유용하게 쓸 수 있을것 같아서 정리해놓겠습니다. 1. 기본사용법 result = my_array.reduce((acc, cur, i) => { return (acc~연산~cur); }, acc초기값); - acc: accumulate(누적값) - cur: current(현재값) - acc초기값: 누적하기 전에 시작값을 지정 const my_array = [1,2,3,4,5] const result = my_array.reduce((acc, cur, i) => { console.log(acc, i); retu.. 2023. 6. 17.
자바스크립트 Map사용법 - 객체 배열(object array) 요소 변경하기 Javascript에서 객체배열(Object Array) 내부의 요소를 변경해야할 경우가 자주 발생합니다. 예를 들면 아래와 같은 객체 배열이 주어질 경우 특정 요소 또는 전체 요소의 age값을 변경할 필요가 있습니다. const obj_array=[ { name: "one", age: 1, }, { name: "two", age: 2, }, { name: "three", age: 3, } ] 이때 유용하게 사용할 수 있는 함수로 Map 메소드가 있습니다. Map은 내부에서 callback 함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용합니다. 1. 모든 요소의 값 변경하기 // age를 모두 4로 const result = obj_array.map(obj => { return {...obj, .. 2023. 6. 16.
프론트엔드 프레임워크 비교 (Angular / React / Vue / Svelte) 프론트엔드 프레임워크 하면 Angular / React / Vue 그리고 최근 부각되고 있는 Svelte가 있는데요. 전문 개발자는 아니지만 조금은 손대본 경험을 토대로(Angular제외..) 특성을 알아보도록 하겠습니다. Stackoverflow Ranking에서 여러 프로그래밍 언어 및 프레임워크에 대한 점유율, 선호도 등 자세한 정보는 확인하실 수 있습니다. 해당 정보에 따르면 웹 프레임워크의 점유율은 아래 그래프와 같습니다. 이 중에 프론트엔드 프레임워크만 보면 React가 제일 상단에 있고, jQuery, Angular, Vue 그리고 한참 아래쪽에 Svelte가 있네요 역시 Stackoverflow Ranking에 따르면 이번엔 Svelte가 제일 위에 있고, 그다음 React,.. 2022. 11. 1.