다다의 프로그래밍

변수에 객체를 할당하고 아래와 같이 변수를 복사하고 첫번째 할당한 변수의 값을 변경하면, 복사한 변수의 값도 함께 변경 된다.

const user = { name: "lee", age: 20, email: ["test@naver.com"] };
const test01 = user;

console.log(user);
console.log(test01);

user.name = "kim";

console.log(user);
console.log(test01);

결과

{name: 'lee', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

{name: 'kim', age: 20, email: Array(1)}age: 20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

{name: 'kim', age: 20, email: Array(1)}
age: 20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

객체의 경우 같은 주소를 참조하기 때문에 원래의 데이터의 값이 바뀌면 복제된 변수도 같은 주소를 참조하기 때문에 같은 값이 출력이 된다.

별도의 주소를 할당 받아 데이터를 복제하는 방법으로 두 변수 사이에 영향을 받지 않게 할수 있다.

1. 얕은 복사(shallow copy)

사용법

const user = { name: "lee", age: 20, email: ["test@naver.com"] };

const test02 = Object.assign({}, user);
const test03 = { ...user }; 

user.name = "kim";

console.log(user);
console.log(test02);
console.log(test03);

결과

{name: 'kim', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"lee"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"lee"
[[Prototype]]:Object

얕은 복사일 경우 객체 내에 존재하는 변수가 변경이 되어도 복사된 변수에서는 다른 메모리 주소를 사용하기 때문에 값이 변경 되지 않는것을 확일할 수 있다.

하지만 얕은 복사내에 객체 변수가 존재할 경우 내부에 추가하는 값은 변경된다.

const user = { name: "lee", age: 20, email: ["test@naver.com"] };

const test02 = Object.assign({}, user);
const test03 = { ...user }; 

user.email.push("test@gmail.com");

console.log(user);
console.log(test02);
console.log(test03);

결과

{name: 'lee', age: 20, email: Array(2)}
age:20
email:(2) ['test@naver.com', 'test@gmail.com']
name:"lee"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(2)}
age:20
email:(2) ['test@naver.com', 'test@gmail.com']
name:"lee"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(2)}
age:20
email:(2) ['test@naver.com', 'test@gmail.com']
name:"lee"
[[Prototype]]:Object

얕은 복사일 경우는 복사가 되었더라도 객체 내에 또 객체가 존재할 경우에는 같은 메모리 주소를 참조하고 있기 때문에 값이 변경이 된다.

이런 경우는 lodash에서 제공하는 깊은 복사를 사용하면 된다.

2. 깊은복사(Deep copy)

사용법

const user = { name: "lee", age: 20, email: ["test@naver.com"] };
const test04 = _.cloneDeep(user);

user.email.push("test@gmail.com");

console.log(user);
console.log(test04);

결과

{name: 'lee', age: 20, email: Array(2)}
age:20
email:(2) ['test@naver.com', 'test@gmail.com']
name:"lee"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(1)}
age:20
email:(2) ['test@naver.com']
name:"lee"
[[Prototype]]:Object

깊은 복사 일 경우는 객체내에  타입이 객체인 변수가 변경되더라도 복사된 변수의 값이 변경되지 않는것을 알 수 있다.

Lodash (https://lodash.com)

→ 모듈성, 성능 및 추가 기능을 제공하는 최신 JavaScript 유틸리티 라이브러리이다

→ 라이센스는 MIT 라이센스로 Object, Array 등의 데이터 구조를 쉽게 변환하는 기능을 제공해준다.

설치

npm i -g lodash

import

import _ from "lodash"

※ 기본적으로 _ 로  명시해주나, _가 아닌 다른 이름으로 하여도 됨.

1. defaultTo

기본값 설정 값이 있으면 해당 값을 저장, 값이 비어있으면(null or undefined) 일 경우 기본값을 저장

사용법

let a = 100;
a = _.defaultTo(a, 1);
console.log("100 default :", a);

a = undefined;
a = _.defaultTo(a, 1);

console.log("undefined default :", a);

a = "";
a = _.defaultTo(a, 1);
console.log('"" default :', a);

a = null;
a = _.defaultTo(a, 1);
console.log("null :", a);

결과

100 default : 100
undefined default : 1
 "" default : 
null : 1

2. uniqBy와 unionBy

중복된 값이 있을 때 중복된 값을 제거

사용법

const fruit1 = [
  { id: 1, name: "apple" },
  { id: 2, name: "banana" },
  { id: 3, name: "cherry" },
];
const fruit2 = [
  { id: 2, name: "orange" },
  { id: 4, name: "apple" },
];

// 두개 배열 병합
const fruit = fruit1.concat(fruit2);
// 중복 제거
const uniqBy = _.uniqBy(fruit, "id");

// 병합 후 중복제거
const unionBy = _.unionBy(fruit1, fruit2, "id");

console.log("fruit1:", fruit1);
console.log("fruit2:", fruit2);
console.log("fruit:", fruit);
console.log("fruit uniqBy:", uniqBy);
console.log("fruit unionBy:", unionBy);

한개의 배열에서 중복을 제거할 때는 uniqBy 두개 이상의 배열을 병합 시 중복제거 할 때는 unionBy를 사용한다.

결과

fruit1: (3) [{…}, {…}, {…}]
0: {id: 1, name: 'apple'}
1: {id: 2, name: 'banana'}
2: {id: 3, name: 'cherry'}
length: 3[[Prototype]]: Array(0)

fruit2: (2) [{…}, {…}]
0: {id: 2, name: 'orange'}
1: {id: 4, name: 'apple'}
length: 2[[Prototype]]: Array(0)

fruit: 
(5) [{…}, {…}, {…}, {…}, {…}]
0:{id: 1, name: 'apple'}
1:{id: 2, name: 'banana'}
2:{id: 3, name: 'cherry'}
3:{id: 2, name: 'orange'}
4:{id: 4, name: 'apple'}
length: 5[[Prototype]]:Array(0)

fruit uniqBy: 
(4) [{…}, {…}, {…}, {…}]
0:{id: 1, name: 'apple'}
1:{id: 2, name: 'banana'}
2:{id: 3, name: 'cherry'}
3:{id: 4, name: 'apple'}
length:4[[Prototype]]:Array(0)

fruit unionBy: 
(4) [{…}, {…}, {…}, {…}]
0: {id: 1, name: 'apple'}
1: {id: 2, name: 'banana'}
2: {id: 3, name: 'cherry'}
3: {id: 4, name: 'apple'}
length: 4[[Prototype]]: Array(0)

3. find, findIndex

배열 내에 조건에 해당하는 데이터 찾기 또는 데이터의 인덱스 찾기

사용법

console.log("fruit find :", _.find(uniqBy, { id: 2 }));
console.log("fruit findIndex :", _.findIndex(uniqBy, { id: 2 }));

결과

fruit find : {id: 2, name: 'banana'}
fruit findIndex : 1

4. remove

배열의 조건에 해당하는 데이터 삭제

사용법

_.remove(uniqBy, { id: 2 });
console.log("fruit remove :", uniqBy);

결과

fruit remove : (3) [{…}, {…}, {…}]
0:{id: 1, name: 'apple'}
1:{id: 3, name: 'cherry'}
2:{id: 4, name: 'apple'}
length:3[[Prototype]]:Array(0)

5. shuffle, sortBy, sortBy revers

배열의 순서 랜덤으로 섞기, 배열의 오름차순, 내림차순정렬

사용법

const shuffle = _.shuffle(fruit);
console.log("fruit shuffle :", shuffle);
const sort = _.sortBy(shuffle, "id");
console.log("fruit sortBy :", sort);
const reverse = sort.reverse();
console.log("fruit sortBy revers:", reverse);

결과

fruit shuffle :(5) [{…}, {…}, {…}, {…}, {…}]
0:{id: 2, name: 'banana'}
1:{id: 2, name: 'orange'}
2:{id: 4, name: 'apple'}
3:{id: 1, name: 'apple'}
4:{id: 3, name: 'cherry'}
length:5[[Prototype]]:Array(0)

fruit sortBy :(5) [{…}, {…}, {…}, {…}, {…}]
0:{id: 1, name: 'apple'}
1:{id: 2, name: 'banana'}
2:{id: 2, name: 'orange'}
3:{id: 3, name: 'cherry'}
4:{id: 4, name: 'apple'}
length:5[[Prototype]]:Array(0)

sortBy revers:(5) [{…}, {…}, {…}, {…}, {…}]
0:{id: 4, name: 'apple'}
1:{id: 3, name: 'cherry'}
2:{id: 2, name: 'orange'}
3:{id: 2, name: 'banana'}
4:{id: 1, name: 'apple'}
length:5[[Prototype]]:Array(0)

const timmer = setTimeout(() => {
  console.log("hello");
}, 3000);

clearTimeout(timmer);

- 시간 간격마다 함수 실행 : setInterval(함수, 시간-ms) 

const interval = setInterval(() => {
  console.log("hello");
}, 3000);

- 설정된 Interval 함수를 종료 : clearInterval()

clearInterval(interval);

JavaScript객체 타입을 얻는 방법으로 typeof를 사용하면 된다. 

console.log(typeof "hello world");
console.log(typeof 123);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);
console.log(typeof {});
console.log(typeof []);

결과

string
number
boolean
undefined
object
object
object

결과를 보면, 객체 타입의 값을 출력하지만 null, {}, [] 에 대한 출력값은 모두 objec로 출력된다.

null, {}, []의 정확한 객체의 타입을 얻기위해서는 아래와 같은 방법으로 얻을수 있다.

Object.prototype.toString.call(data);

출력 결과

[object Null]
[object Object]
[object Array]

양쪽의 []와 object라는 문자를 제거하기 위해 slice를 사용하면 깔끔하게 원하는 값을 얻을수 있다.

Object.prototype.toString.call(data).slice(8, -1);

출력결과

Null
Object
Array