기술 창고/Javascript(3)
-
[Javascript] Object, Array Destructuring (분해)
자바스크립트에서 Object, Array 에 들어있는 데이터들을 Destructure 하여 사용하는 방법에 대해서 알아보겠습니다. 이렇게 사용하는 방법은 api를 연동하여 json 형식의 데이터들을 불러올 때 매우 유용하게 사용할 수 있습니다. animals.js const animals = [ { name: "cat", sound: "meow" }, { name: "dog", sound: "woof" } ]; export default animals; index.js import animals from "./data" // (1) console.log(animals); // 결과 : [Object, Object] // (2) const [cat, dog] = animals; console.log(cat..
2023.08.03 -
[Javascript] Arrow function (화살표 함수)
자바스크립트 ES6의 화살표 함수에 대해서 알아보겠습니다. 화살표 함수는 특정한 동작을 수행하는 함수가 아니라 기존에 사용하던 함수의 양식을 함축하여 줄여줄 수 있는 함수입니다. 기존 방식 var numbers = [3, 56, 2, 48, 5]; const newNumbers = numbers.map(function (x) { return x * x; }) 기존에 사용하던 방식대로 함수를 사용하게 되면 위와 같은 형식으로 사용할 수 있을 것입니다. 특정 함수에 수행되는 함수를 직접 기입하고 넣어줌으로서 동작되는 형식으로 주로 사용합니다. 화살표 함수를 사용하면 안에 작성된 function 부분을 없애줌으로서 코드의 양을 줄여줄 수 있습니다. 화살표 함수 적용 var numbers = [3, 56, 2,..
2023.08.01 -
[Javascript] Javascript ES6 Map(매핑) / Filter(필터) / Reduce(감소) / find(찾기) / findIndex(인덱스 찾기)
배열을 다룰 때 유용한 Javascript 함수들을 알아보겠습니다. 대표적으로 Map, Filter, reduce, find, find index 와 같은 함수들이 있습니다. (1) Map Map 은 배열의 각 데이터들에 명령이나 반영할 내용들을 매핑시켜 적용하고자 할 때 사용하는 함수입니다. Map() 함수 내부에는 동작되는 내부 함수가 존재하므로 Map 에 반영할 내용들을 넣기만 하면 모든 데이터에 동일하게 적용되게 됩니다. 예시 var numbers = [3, 56, 2, 48, 5]; function double(x){ return x * 2; } console.log(numbers.map(double)); 배열의 데이터가 존재하고, 매개변수를 두 배로 만들어주는 함수를 만들어 map을 통해 모든..
2023.08.01