웹 개발 정보

Date 객체 생성하기

// let now = new Date("2022-03-28");	2022년 3월 28일 Date 객체 생성  
// let now = new Date(year, month, date, hours, minutes, seconds, ms);	// 입력 데이터 날짜 Date 생성 
let now = new Date();								// 현재 날짜 Date 객체 생성

Date 객체 날짜 관련 데이터 가져오기 내장 함수

let now = new Date();				// 현재 날짜 Date 객체 생성 
console.log(now);					// Mon Mar 28 2022 14:20:55 GMT+0900 (한국 표준시)
console.log(now.getFullYear());		// 2022
console.log(now.getMonth());		// 2
console.log(now.getDay());			// 1
console.log(now.getDate());			// 28
console.log(now.getHours());		// 14
console.log(now.getMinutes());		// 20
console.log(now.getSeconds());		// 55
console.log(now.getMilliseconds());	// 155

getFullYear() : 객체의 연도 가져옴
getMonth() : 객체의 월 가져옴 (※주의 월 0부터 시작(0~11))
getDay() : 객체의 요일 가져옴 (※주의 0이 일요일(0~6))
getDate() : 객체의 일 가져옴
getHours() : 객체의 시간 가져옴
getMinutes() : 객체의 분 가져옴 
getSeconds() : 객체의 초 가져옴
getMilliseconds() : 객체의 밀리초 가져옴

Date를 이용한 작업 걸리는 시간 구하기

let start = Date.now();	// 작업 시작 전 시간 
// 작업 시간을 구하는 기능 정의 ...
let end = Date.now();	// 작업 종료 후 시간 
console.log(`처리 : ${end-start} 밀리초 소요`);

자바스크립트 Date 객체를 이용한 기능이 처리되기 까지 걸리는 시간을 간단하게 만들 수 있다. 

1. Set 자주 사용하는 내장함수

//let set = new Set(["사과","토마토","키위","키위"]);		// set 객체 생성
let set = new Set();		// set 객체 생성
set.add("사과");
set.add("토마토");
set.add("키위");
set.add("키위");				//	키위가 존재하기 때문에 저장되지 않음

console.log(set.size);			// 3 
console.log(set.has("사과"));	// true

set.delete("키위");
console.log(set.size);			// 2

set.clear();
console.log(set.size);			// 0

Set 객체는 자료형에 상관없이 데이터를 저장한다 하지만 중복 값은 허용하지 않습니다. 

new Set() – Set 객체를 생성합니다. 또는 배열을 초기에 넣을 수 있습니다. 
set.add(value) – Set 객체에 value가  없다면 값을 저장합니다. 
set.delete(value) – Set 객체에 value값을 삭제합니다. 
set.has(value) – Set 객체에 value가 있으면 true, 없으면 false 리턴
set.clear() – Set 객체에 들어있는 데이터를 삭제합니다.
set.size – Set 객체에 들어있는 데이터의 개수를 리턴합니다. 

2. Set 객체 반복 작업 관련 내장함수 

let set = new Set();		// set 객체 생성
set.add("사과");
set.add("토마토");
set.add("키위");

for (let value of set){
	console.log(value);	// 사과, 토마토, 키위
}

1. Map 자주 사용하는 내장함수

let map = new Map();		// map 객체 생성
map.set(1,"사과");
map.set(2,"포도");

console.log(map.has(1));	// true
console.log(map.get(1));	// 사과
map.delete(1);
console.log(map.size);		// 1
map.clear();
console.log(map.size);		// 0

map.size; // map에 담겨있는 카운트를 리턴
map.set(key, value); // key, value 쌍으로 map에 저장 key값이 있을 시 value 값이 덮어짐
map.has(key); // key 값이 존재하는지 유무 true, false 리턴
map.get(key); // key 값에 해당하는 value 값을 리턴 
map.delete(key); // key 값과 해당하는 value 값을 삭제 
map.clear(); // map에 담겨있는 전재 요소를 삭제 

2. Map 객체 반복 작업 관련 내장함수 

let map = new Map();
map.set(1,"사과");		// key 1에 value 사과라는 값을 
map.set(2,"포도");

// map.keys() map에 담겨있는 요소의 key 이터리블 객체가 리턴합니다.
for (let key of map.keys()) {
  console.log(key); // 1,2
}

// map.values() map에 담겨있는 요소의 value 이터리블 객체가 리턴합니다.
for (let value of map.values()) {
  console.log(value); // 사과, 포도
}

// map.entries() map에 담겨있는 요소의 key, value 쌍 이터리블 객체가 리턴합니다.
for (let item of map.entries()) {
  console.log(item); // [1,사과],[2,포도]
}

map.keys() // map에 담겨있는 요소의 key 이터리블 객체가 리턴합니다.
map.values() // map에 담겨있는 요소의 value 이터리블 객체가 리턴합니다.
map.entries() // map에 담겨있는 요소의 key, value 쌍 이터리블 객체가 리턴합니다.

iterable 객체

let range = {
	form : 0,
	to : 10,
	step : 1,
	current : 0,
	
	// for of 문을 실행시 초기 Symbol.iterator이 실행 후 객체를 반환합니다. 
	[Symbol.iterator](){
		this.current = this.form;
		return this
	},
	
	// for of 문이 반복을 할때 마다 next() 함수가 실행이 됩니다. 
	// next() 리턴은 {done : Boolean, value : value} 형식으로 맞춰야합니다. (done = true 종료, done = false 반복)
	next(){
		if(this.current <= this.to){
			return {
				done : false, 
				value : this.current++
			}
		}else{
			return {
				done : true
			} 
		}
	}
}

for(let num of range){
	console.log(num);	// 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 순으로 출력 
}

iterable 객체는 반복이 가능한 객체를 만드는데 사용합니다. 
반복은 배열로 가능은 하지만, iterable 객체를 사용하면 for of 문을 통해 객체를 반복 시킬 수 있습니다. 

1. for of 문이 실행 시 초기 Symbol.iterator이 실행이 되며 range 객체를 리턴합니다. 
2. 반복을 할때 마다 next() 함수가 실행이 되며 리턴에 done의 값을 보고 반복을 판단합니다. 

자바스크립트 배열 생성, 추가, 수정

// let arr = new Array("사과", "배", "수박");	// 생성자를 활용한 배열 생성
let arr = ["사과", "배", "수박"];	

// 인덱스를 가지고 배열에 값을 가져옴 
console.log(arr[0]);	// 사과
console.log(arr[1]);	// 배
console.log(arr[2]);	// 수박

// 배열 전체 출력 
console.log(arr);	// 사과,배,수박

// 배열 length 구하기 
console.log(arr.length);	// 3

// 배열 값 변경 
arr[0] = '키위';	//["키위", "배", "수박"]

배열은 순서가 있는 컬렉션이 필요한 경우 사용하는데 유용합니다. 

자바스크립트 배열 내장함수 

let arr = ["사과", "배", "수박"];	
arr.push("딸기");			//	 push
arr.unshift("바나나");		// unshift
console.log(arr);			// ['바나나', '사과', '배', '수박', '딸기']

alert(arr.pop());			// pop -> 딸기
console.log(arr);			// ['바나나', '사과', '배', '수박']
	
alert(arr.shift());			// shift -> 딸기
console.log(arr);			// ['사과', '배', '수박']

배열 내장함수 
push : 배열 마지막에 데이터를 추가함 
unshift : 배열 맨 처음에 데이터를 추가함
shift : 배열 맨 처음 데이터를 제거 후 남은 데이터는 이동(제거된 데이터 리턴)
pop : 배열 맨 마지막 데이터를 제거(재거된 데이터 리턴)

1. 일반 함수로 this를 호출한 경우

	function getName() {
	  console.log(this);
	}
	getName();	// object window

2. 객체 내부에서의 this를 호출한 경우

	let info1 = { 
		name: "책상",
		getName() {
			console.log(this);		// object object (info1 객체를 가르킴)
			console.log(this.name);	// 책상
		}
	};
	info1.getName();

3. this일반 함수를 선언 후 객체 프로퍼티에 적용시킨 경우

// 함수 생성
function getName() {
  console.log( this.name );
}

// 객체 생성
let info1 = { name: "책상" };
let info2 = { name: "전화기" };

// 객체에 함수 프로퍼티 넣음
info1.getName = getName;
info2.getName = getName;

// 프로퍼티 호출 
info1.getName();	// 책상
info2.getName();	// 전화기

javascript의 this는 동적(런타임)으로 값이 결정된다. 

this 호출 시 호출시 앞에 객체를 보고 해당 객체가 this로 할당 받습니다. 

참조에 의한 객체 복사 

  let user1 = {
    name : '홍길동'
  }
  
  let user2 = user1;

  user1.name = '강감찬';

  console.log(user1.name);	// 강감찬
  console.log(user2.name);	// 강감찬

javscript는 객체가 할당될 때 참조 값에 의해 복사가 됩니다. 
메모리에 name이라는 프로퍼티가 생성이 되고 각 객체는 메모리에 위치하는 주소 값(참조값)을 할당받게 됩니다.
user1이나, user2는 같은 name주소를 가르키고 있어서 한쪽 객체에서 변경을 시도하면 다른 객체에서도 변경된 값을 보게 됩니다. 

독립적인 객체 복제 Object.assign()

  let user1 = {
    name : '홍길동',
	info : {
	  addr : '서울',
	  age : 20
	}
  }
  let user2 = {}

  Object.assign(user2, user1);
  user1.name='강감찬';
  user1.info.addr='부산';

  console.log(user1.name);	// 강감찬
  console.log(user1.info.addr);	// 부산

  console.log(user2.name);	// 홍길동
  console.log(user2.info.addr);	// 부산

Object.assign을 이용해 객체를 독립적으로 복사가 가능합니다. 
하지만 객체안에 다른 객체가 있다고 하면 그 객체는 주소 값을 참조하기 때문에 주의를 해야 합니다. 

중첩 객체를 복사하기 위해서는 직접 코드를 작성하는 방법도 있겠지만 lodash라이브러리를 이용한 _.cloneDeep(obj)를 활용하는게 빠르고 편리합니다. 

let target = _.cloneDeep(obj);

javascript 객체 생성

	// 객체 생성자 
	let user = new Object();
	// 객체 리터널 
	let user = {};

javascript 객체는 new Object 생성자 또는 {} 중괄호를 통해 만들 수 있다. 
key와 value를 쌍을 가지로 있는 프로퍼티로 구성되어 있고, 이 프로퍼티는 추가, 수정, 삭제, 조회 등이 가능합니다. 

프로퍼티 추가 

let user = {
	name : '홍길동',
	age : 20
}
user.tel = '111-2222';

프로퍼티 추가 방법 생성된 인스턴스에 .을 이용해 추가 가능합니다.

프로퍼티 수정

let user = {
	name : '홍길동',
	age : 20
}
user.tel = '111-2222-3333';

프로퍼티 수정 방법 생성된 인스턴스에 .을 이용해 추가 가능합니다.

프로퍼티 조회

let user = {
	name : '홍길동',
	age : 20
}
console.log(user.name);

프로퍼티 조회 방법 생성된 인스턴스에 .을 이용해 추가 가능합니다.

프로퍼티 삭제

let user = {
	name : '홍길동',
	age : 20
}
delete user.tel;

프로퍼티 삭제 방법 delete키워드를 이용해 프로퍼티를 삭제 가능합니다.