프리노트

fetch() 함수 비동기로 처리된다. fetch('URL'); //Promise 함수 형태로 나온다 Promise 함수 대부분 비동기적으로 동작하는 함수다. 2가지의 메소드를 가지고 있다. (then, catch) then() 메소드 와 catch() 메소드 fetch('URL') .then(function(response){ // 성공적으로 받아왔을 경우 return response.json(); //JSON 형태의 데이터 파일을 script에서 사용 가능한 자료형으로 변형 }) .then(function(data){ }) .catch(function(reason){ // 실패했을 경우 }) 성공적으로 데이터를 가져왔을때 JSON 형태이기 때문에 javascript에서 사용 가능한 자료형으로 변형 시..

Developer/Javascript 2022. 12. 17. 17:14

for-in(객체 순환) : 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성을 반복 for-of(배열 값 순환) : 반복 가능한 객체(Array , Map (en-US) , Set , String , TypedArray , arguments)를 탐색한다 for-in(객체 순환) const obj = { a:1, b:2, c:3, data:{ d:4, e:5, f:6 } }; for(let item in obj){ console.log(item); } //a, b, c, data for(let item in obj.data){ console.log(`${item}: ${obj.data[item]}`); } //d: 4, e: 5, f: 6 for-of(배열 값 순환) let arry = ["가", "..

Developer/Javascript 2022. 11. 29. 22:44

참조 타입의 데이터는 복사 시 데이터의 값이 아닌 '값이 저장된 메모리의 주소'가 저장된다. 따라서 참조 타입의 복사 방법은 얕은 복사(Shallow Copy)와 깊은 복사(deep copy)로 나뉜다. 얕은 복사(Shallow copy)는 참조 타입 데이터가 저장한 '메모리 주소 값'을 복사한 것을 의미 깊은 복사(Deep copy)는 새로운 메모리 공간을 확보해 완전히 복사하는 것을 의미 /* 얕은 복사시 주의❗❗❗ */ let origin = ["a", "b", ["c"]]; let copy = origin.slice(); copy[2].push("d"); console.log(origin); //["a", "b", ["c", "d"]]; // 원본까지 바뀌어버림 console.log(copy); ..

Developer/Javascript 2022. 11. 26. 23:51

배열, 함수, 객체 등을 다루는데 있어서 매우 편리한 기능이다. 배열, 문자열, 객체 등 반복 가능한 객체(Object)를 개별 요소로 분리할 수 있다. 기본 문법 // Array var arr1 = [1, 2, 3, 4, 5]; var arr2 = [...arr1, 6, 7, 8, 9]; console.log(arr2); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] // String var str1 = 'paper block'; var str2 = [...str1]; console.log(str2); // [ "p", "a", "p", "e", "r", " ", "b", "l", "o", "c", "k" ] 스프레드 연산자는 ****연결, 복사 등의 용도로 꽤 활용도가 높은 편이다. 배열..

Developer/Javascript 2022. 11. 25. 03:02

forEach() 반환 값을 항상 저장하지 않으며 리턴값을 받지 못한다. 콜백 함수가 현재 배열을 변경하도록한다. let arr = [1,2,3,4,5]; let a = arr.forEach(function(value){ return value; }); console.log(a); //undefined let data = [10, 15, 20, 25, 30]; data.forEach( (val, idx, arr) => { data[idx] = val - 5; }); console.log(data); //[5, 10, 15, 20, 25] map() 반환값들로 구성된 새로운 배열을 반환한다. 메모리를 할당한다. let arr=[1,2,3,4,5]; let a = arr.map(function(value){..

Developer/Javascript 2022. 11. 20. 16:45

배열의 기초 배열은 값을 순차적으로 저장하는 용도로 사용 var arr = [1, 2, 3]; // 배열 요소에 접근하기 arr[0]; // 1 arr[2]; // 3 // 배열 요소의 개수 확인하기 arr.length // 3 // 마지막 요소에 접근 arr[arr.length - 1]; //=> 3 Array Method 배열 수정(삭제, 추가) 메서드 let arr = [1,2,3]; // 배열의 마지막 요소 제거, 제거된 요소 리턴 arr.pop(); // 3 // 배열 마지막에 요소 추가, 배열의 크기 리턴 arr.push("new"); // 3 console.log(arr); //-> [ 1, 2, 'new' ] // 배열의 첫번째 요소 제거, 제거된 요소 리턴 arr.shift(); // 1..

Developer/Javascript 2022. 11. 19. 21:11

map 함수는 callback 함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다 선언방법 및 구성 array.map(function(currenValue, index, array){ //내용... },thisArg); currentValue : 배열 내 현재 값 index : 배열 내 현재 값의 인덱스 array : 현재 배열 thisArg : callbackFunction 내에서 this로 사용될 값 사용법 1.array 자료 갯수만큼 반복적으로 함수안의 코드 실행해준다. ["사과","banana",3].map(function(){ console.log(1) }) // 결과값 // 1 // 1 // 1 var numbers = [4,9,16,25,36]; var result = numbers..

Developer/Javascript 2022. 11. 18. 22:19