개발자 Saaad

저번 포스팅 때는 얕은 비교, 깊은 비교에 대해서 알아봤는데요,오늘은 얕은 복사, 깊은 복사에 대해서 알아봅시다.    얕은 복사 Spread Operator 를 이용한 얕은 복사const aArray = [1, 2, 3];// ... (spread operator)를 이용한 얕은 복사const bArray = [...aArray, 4];console.log('aArray', aArray); // [1, 2, 3]console.log('bArray', bArray); // [1, 2, 3, 4]console.log('aArray === bArray', aArray === bArray); // aArray === bArray falseaArray === bArray 가 false 인 이유는 두 배열이 참조..

얕은 비교(Shallow Compare) 란?숫자, 문자열 등 원시 자료형은 값을 비교합니다.배열, 객체 등 참조 자료형은 값 혹은 속성을 비교하지  않고, 참조하는 위치를 비교합니다. 아래는 예시입니다.위 그림처럼 빨간 화살표가 Heap 의 다른 주소를 가리키고 있기 때문에 false가 나옵니다.    깊은 비교란?얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교합니다. 깊은 비교 방법은 다음과 같습니다.Object depth 가 깊지 않은 경우 : JSON.stringify() 사용Object depth 가 깊은 경우 : lodash 라이브러리의 isEqual() 사용  오늘은 얕은비교, 깊은 비교에 대해서 알아봤습니다.감사합니다.

null과 undefined 라고 하면 둘 다 값이 없다.. 존재하지 않는다.. 정의되지 않았다..? 비슷해보이지만 왜 두개로 나뉘어져있는지 몰랐었는데오늘은 그 차이를 한번 알아보도록 하겠습니다공통점둘 다 원시 자료형(Primitive) 입니다.undefined 타입은 undefined 값이 유일하며, null타입은 null 값이 유일합니다.한번 console.log() 메서드를 이용해 확인해볼까요?위 결과를 살펴보면 null의 타입은 object, undefined의 타입은 undefined라고 출력되는 것을 확인할 수 있습니다. 분명 원시 자료형이라고 했는데 왜 null은 object라고 출력이 될까요?이유는 초기에 null 의 타입을 object로 지정해놓았는데 너무 오랜 시간이 흘러 타입을 nul..

JavaScript를 하다보면 정말 많이 쓰게 될 Map, Filter, Reduce메소드를 알아봅시다!Mapmap() 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아새로운 배열을 반환합니다.array1 배열을 map() 메소드를 이용해 각 값에 대하여 곱하기 2 해준 배열을 반환합니다.배열의 값들에 대해 공통적으로 수행할 일이 있을 때 써주면 좋을 것 같네요. Map함수의 구조arr.map(callback(currentValue[, index[, array]])[, thisArg])Filter 메소드filter() 메소드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.words 배열 안의 요소에 대해서 조건을 주고 조건을 충족하는 요소만 re..

전개 연산자?전개 연산자는 ECMAScript(2015) 에서 새롭게 추가 되었으며, 특정 객체 또는 배열의 값을다른 객체, 배열로 복제하거나 옮길 때 사용합니다. 연산자의 모양은 ... 이렇게 생겼습니다. 쓸일이 많으니 한번 알아봅시다. 배열 조합 원래는 concat() 메소드를 이용하여 조합해줘야했지만 ... 연산자를 이용해 간단하게 합쳐주는 모습입니다.  객체 조합 예시)위 코드를 실행하면 아래와 같은 실행결과가 나옵니다.객체 자체가 objWrap 변수에 들어간 모습입니다.  이번에는 전개 연산자(Spread Operator)를 사용해보겠습니다.  전개 연산자를 사용하여 ObjWrap에 저장하였더니 객체의 각각의 값이 할당된 것을 알 수 있습니다.objWrap 객체는 obj1과 obj2의 값들을 모..

11월 중순에 부트캠프를 시작하여 약 2주가 지나 12월이 됐다이제 부트캠프 일정 상 javascript, html 과정은 거의 끝났고 DOM과 react 기초를 들어갈 순서가 다가왔다.솔직히 작심삼일로 열심히 하다가 조금 폰도 만지고쉬엄쉬엄 빈둥빈둥 공부를 하기도 하고 냅다 누워버리기도 많이 했다 집에서 공부하는게 원래 쉽지가 않다그래서 아침 일찍 카페가서 해야지! 라고 맨날 다짐 하고 일어나서역시 집이 최고야.. 하며 집에서 공부하는 일이 다반사 근데 작성하는 지금 시간은 새벽이 지나 월요일이지만,일요일인데도 나름 열심히 블로그 포스팅 예약도 많이 걸어놓고얼추 할일을 하긴 했다! 이 스탠스를 유지해서 진도 쫘악쫘악 빼서 팀프로젝트가보자~~~~~~~~~~~~~~~~~~~~~~~~~~~!

구조 분해 할당이란? (ES6)배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 사용 이유 ? 가독성! 더 쉬운 사용!구조 분해 할당을 이용하면 객체를 정의할 때, 생성할 때 더 편해진다.종류로는 객체 구조 분해 할당과 배열 구조 분해 할당이 있다.// 우리가 흔히 정의하는 함수function buildAnimal(animalData) { let accesory = animalData.accesory; animal = animalData.animal; color = animalData.color; hairType = animalData.hairType; ...}// 가독성이 뛰어나고 작성하기 쉽다! func..