[JAVASCRIPT] 얕은 복사 & 깊은 복사
단순복제 - 완전히 동일한 객체 얕은복사(Shallow Copy) 1) Object.assign 2) (...) 스프레드 연산자 사용 깊은 복사 1) JSON.stringify & JSON.parse 사용 JSON.stringify : javascript 오브젝트를 String format으로 변환 JSON.parse : 스트링포맷을 javascript object로 변환 - 이전객체에 대한 참조가 없어지는 원리를 이용하는 것(cf. 깊은 복사가 불가능한 것? functions, Data객체, Infinity 데이터 복사) 2) 재귀적으로 짜기 3) 웹 개발시? Loadsh 사용
Object VS Array - typeof 연산자를 배열에 사용하였을 때 둘다 "Object"로 출력 (1) Object - Index, length Property rk djqtdma - 리터럴 표기법 : {} const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} - Object 값이 있는지 여부 let example = {}; Object.keys(example).length > 0 // false (2) Array const cars = ["Saab", "Volvo", "BMW"]; - 리터럴 표기법 : [] for 반복문 let cars = [ { "color": "purple", "type": "minivan", ..
기존의 객체를 건들이지 않고 새로운 객체를 만드는법 (1) Spread 문법 사용 - 기존의 객체에다가 ... 을 더해주면 새로운 객체를 생성할 수 있음 - 객체의 경우 const flower = { name : '꽃' } const sunFlower = { ...flower, attribute : 'sun'}; - 배열의 경우 const flower = ["해바라기"] const spreadFlower = [...flower, "장미", ...flower]; // (3) ["해바라기", "장미", "해바라기"] 2) rest - 객체, 배열, 함수의 파라미터에서 사용 가능 - Spread 연산자(...)를 사용하여 함수의 파라미터를 작성한 형태 - Rest 파라미터를 사용하면 함수의 파라미터로 오는 값..
[JAVASCRIPT] Object in Array 합치기 & 비교하기
Object in Array concat 하기 DATA let array1 = [ { id: "dream", date: "2021-01-24" }, { id: "love", date: "2020-09-22" } ]; let array2 = [ { id: "dream", name: "peter" }, { id: "hope", name: "rosy" } ]; 1. 일반적인 Data concat (1) concat 함수 사용 let result = array1.concat(array2); (2) 결과 // 0: {id: 'dream', date: '2021-01-24'} // 1: {id: 'love', date: '2020-09-22'} // 2: {id: 'dream', name: 'peter'} // 3..
[JavaScript] 비동기작업 ASYNC AWAIT와 PROMISES
비동기작업 Q. 동기와 비동기적으로 일을 처리? 빨래, 설거지, 청소를 해야한다. 일처리에 대해서 비유를 해보자 동기-> 빨래를 한 뒤(1시간), 설거지 한 뒤(1시간), 청소를 해서 일을 끝내는 것(1시간) -> 약 3시간 비동기 -> 빨래 업체한테 맡기고 (1분), 설거지 업체에 맡기고(1분), 청소하는 업체 맡기고(1분) -> 약 3분 - 순서가 중요하지 않다면 비동기적으로 업무를 실행하는 것이 맞다. Callback - javascript는 synchronous , 하나하나씩으로 동적으로 수행 - hoistring이란? (중요, 면접에서 많이 나옴) 코드가 나타나는 순서대로 실행이 됨 - Asynchronous? 언제 실행될지 알 수 가 없음 - setTimeout 파라미터 안에 전달, 당장 실행..
크롬 개발자 도구
Chrome 개발자 도구의 구성 1) 탭 (Red) - 개발자 도구에서 사용할 수 있는 주요 기능 탭들 - 설정 등의 버튼도 존재 2) Main 패널 (Yellow) - 주요 기능 탭이 바뀔 때마다 해당 기능으로 채워짐 3) Drawer 패널 (Green) - 주요 기능이 아닌 부가 기능이나 정보를 보여주는 영역 Dom Element 탭 - Element - 기본적으로 Dom 요소를 클릭하여 접속 1) 클릭한 노드 - 클릭한 Node 저장 / 최근 클릭순서대로 저장/ Console에서 사용가능 / ex) '$0.value 2) Context Menu 존재 (우클릭) - 복사, 숨김, 상태 변경 가능 - 이벤트 Breakpoint 존재 3) Dom Breakpoint 우클릭 -> Break On -> at..