Javascript 자바스크립트 데이터 개념정리

객체와 프로퍼티

객체 (object) : 여러 가지 값을 한번에 저장한다.

▶ name: 'hyogi' → 속성 (Property)

property name → name (문자열 string)

property Value → 'hyogi'

▶Property Name 주의 사항

1. 첫 번째 글자는 반드시 문자, 밑줄( _ ), 달러 기호($) 중 하나로 시작

2. 띄어쓰기 금지

3. 하이픈(-) 금지

→ property name에 따옴표 ( ' ) 를 추가하면 숫자도 사용가능 ex) '1stHyogi'

▶Property Value

1. 모든 자료형 사용가능

2. 객제 안에 객체를 넣을 수 있다.

 // 객체(Object)
 
let hyogi = {
    name : 'hyogi',     // name은 key,  'hyogi'는 value(값)
    year: '25',
    'mybirth year': 1999,
    GoodJoob: 'false',
    SoSo: 'null',
    greatCourse: {     // 객체 안에 객체
    	title: 'hello World',
        language: 'Python'
    }
  }

객체에서 데이터 접근

 // 점 표기법 (ObjectName.propertyName)
console.log(hyogi.name);   // hyogi
console.log(mybirth year);   // 불가능 x
console.log(hyogi.greatCourse.title);  // hello World
 
 
 
// 대괄호 표기법 (ObjectName['propertyName'])
console.log(hyogi['mybirth year']);     // 1999
console.log(hyogi['mybirth' + 'year']);      // 1999
console.log(hyogi.greatCourse['title']);  // hello World
 
let propertyName = 'hyogi';
console.log(hyogi[propertyName]);     // hyogi
 
// 존재하지 않는 property에 접근하면 undefined처리가 됨. (오류 x)

객체 다루기

객체의 프로퍼티 수정방법 (변수의 값을 재할당 방법과 유사)

 // 객체(Object)
 
let hyogi = {
  name : 'hyogi',     // name은 key,  'hyogi'는 value(값)
  year: '25',
  'mybirth year': 1999,
  GoodJoob: 'false',
  SoSo: 'null',
  greatCourse: {
    title: 'hello World',
      language: 'Python'
  }
}
 
// 객체의 프로퍼티 수정방법 (변수의 값을 재할당 방법과 유사)
console.log(hyogi.name);    // 수정전 : hyogi
hyogi.name = '효기';
console.log(hyogi.name);     // 수정후 : 효기
 
 
// 객체의 프로퍼티 추가방법
console.log(hyogi.study);     // 객체에 존재하지 않는 프로퍼티 undefined 출력
hyogi.study = 'javascript';
console.log(hyogi.study);     // javascript
 
 
// 객체의 프로퍼티 삭제방법
console.log(hyogi.greatCourse);   // { title: 'hello World', language: 'Python' }
delete hyogi.greatCourse;
console.log(hyogi.greatCourse);   // undefined
 
 
// in 연산자 (안전하게 프로퍼티 유무 확인하려면 in 연산자 사용)
console.log(hyogi.name !== undefined);    // 객체에 프로퍼티 존재 유무 확인 true
console.log('name' in hyogi);    // true
 
if('year' in hyogi){    // hyogi 객체 안에 'year 프로퍼티 존재 유무 확인
  console.log('ok');    // ok
 
} else {
  console.log('not ok');
 
}

객체와 메소드

메소드 : 객체의 고유한 동작으로써 함수의 의미를 부여할 수 있다.

 // 메소드 (Method)
let hyogi = {
  sayA: function (name) {
    console.log(`A ${name}!`);
  },
 
  sayB: function () {
    console.log('B');
  },
 
  sayC: function () {
    console.log('C');
  }
};
 
hyogi.sayA('hyogi');   // A hyogi!
hyogi.sayB();      // B
hyogi['sayA']('hyogi');    // A hyogi!

for..in 반복문

객체의 프로퍼티를 가지고 반복적인 동작을 한다.

▶주의사항

1. 숫자형 (양수) 프러퍼티 네임

숫자형key값은 문자열(string)이며 대괄호 표기법으로만 접근이 가능하다.

2. 정수형 프로퍼티 네임

정수형 네임을 오름차순으로 먼저 정렬하고 추가 순서대로 정렬하는 특징이 있다.

 let hyogi = {
  name : 'hyogi',     // name은 key,  'hyogi'는 value(값)
  year: '25',
  'mybirth year': 1999,
  GoodJoob: 'false',
  SoSo: 'null',
  greatCourse: {
  title: 'hello World',
  language: 'Python'
  }
}
 
for (let key in hyogi){
  console.log(key);
 
}
 
/* 
출력결과
name
year
mybirth year
GoodJoob
SoSo
greatCourse
*/
 
for (let key in hyogi){
  console.log(hyogi[key]);
}
 
/*
출력결과
name
hyogi
year
25
mybirth year
1999
GoodJoob
false
SoSo
null
greatCourse
{ title: 'hello World', language: 'Python' }
*/

Date 객체

▶ month는 0부터 시작

▶틀린 Date객체의 날짜를 수정하면 자동으로 날짜 수정

▶Date.new() 메소드는 이 메소드가 호출된 시점 타임스템프를 반환한다.

 // Date
let my1Date = new Date();
console.log(my1Date);   // 2023-03-22T02:58:35.881Z (오늘시간 출력)
 
 
 
//1970년 1월 1일 00:00:00 UTC + 1000밀리초
let my2Date = new Date(1000);
console.log(my2Date);   // 1970-01-01T00:00:01.000Z
 
 
 
// 문자열로 시간을 할당
let my3Date = new Date('2023-03-22');
console.log(my3Date);   // 2023-03-22T00:00:00.000Z
 
// 시간 분 초까지 할당
my3Date = new Date('2023-03-22T09:11:12');
console.log(my3Date);   // 2023-03-22T00:11:12.000Z
 
// 소괄호 안에 여러 값을 할당 (month는 0부터 시작)
let my5Date = new Date(1999, 08, 06, 12, 11, 50, 12);  // yyyy, MM, DD, hh, mm, ss, ms
console.log(my5Date);   // 1999-09-06T03:11:50.012Z
 
 
 
// Date.getTime() → 몇밀리초가 지났는지 계산
let my6Date = new Date(1999, 08, 06, 12, 11, 50, 12);  // 1970년 1월 1일 00:00:00 UTC 부터 몇 밀리초가 지났는지
console.log(my6Date.getTime());   // 936587510012 (타임스탬프)
 
 
 
// 지금으로부터 몇 밀리초, 초, 분, 시간이 차이나는지 계산
let today = new Date();   // 오늘 시간 출력
let timeDiff = my6Date.getTime() - today.getTime();
console.log(timeDiff + '밀리초');   // -742867634694밀리초
console.log(timeDiff / 1000 + '초');       // -742867712.473초
console.log(timeDiff / 1000 / 60 + '분');     // -12381128.541216668분
console.log(timeDiff / 1000 / 60 / 60 + '시간');   // -206352.14235361113시간
 
let my7Date = new Date(2014, 6, 12, 13, 17, 15);
console.log(my7Date.getFullYear());  // 2014
console.log(my7Date.getMonth());   // 6  (0부터 시작)
console.log(my7Date.getDate());   // 12  (일)
console.log(my7Date.getDay());    // 6   (요일)
console.log(my7Date.getHours());  // 13
console.log(my7Date.getMinutes());   // 17
console.log(my7Date.getSeconds());    // 15
console.log(my7Date.getMilliseconds());   // 0
 
 
 
// set 으로 생성된 Date 객체 정보 수정
 
my7Date.setFullYear(1999);
my7Date.setMonth(2);
my7Date.setDate(30);
console.log(my7Date);    // 1999-03-30T04:17:15.000Z (변경 값)
 
 
 
// 브라우저에 설정된 국가 표기에 맞춰 날짜와 시간을 보여줌
let myDate = new Date();
console.log(myDate.toLocaleDateString()); // 2023. 3. 22. (년. 월. 일)
console.log(myDate.toLocaleTimeString()); // 오후 12:30:19 (시:분:초)
console.log(myDate.toLocaleString()); // 2023. 3. 22. 오후 12:30:19 (년. 월. 일 시:분:초)
 
 
 
// Date객체의 형변환
console.log(typeof myDate); // object
console.log(Boolean(myDate)); // true
console.log(Number(myDate)); // 1679456110776  (타임스탬프 값)
 
 
 
// 두 객체 사이의 시간차이 확인도 가능
let myDate1 = new Date(1999, 8, 6);
let myDate2 = new Date(2023, 3, 22);
 
let timeDiff2 = myDate2 - myDate1;
console.log(timeDiff2); // 745545600000 (ms)
console.log(timeDiff2 / 1000); // 745545600 (sec)
console.log(timeDiff2 / 1000 / 60) // 12425760 (min)
console.log(timeDiff2 / 1000 / 60 / 60) // 207096 (hour)
console.log(timeDiff2 / 1000 / 60 / 60 / 24) // 8629 (date)
 
 
 
// 날짜를 표현하는 다양한 문자열
let date1 = new Date('8/6/1999 06:00:00');
let date2 = new Date('August 6, 1999 06:00:00');
let date3 = new Date('Aug 6 1999 06:00:00');
console.log(date1, date2, date3);  // 1999-08-05T21:00:00.000Z * 3

배열 (Array)

랭킹처럼 순서가 있는 값을 만들때는 객체보다 배열을 활용하는것이 좋다.

▶배열은 객체다.

▶배열은 바뀔 수 있는 자료형, 문자열은 바뀔 수 없는 자료형

 // 배열 (Array)
let foodRanking = [
  '짜장면',      // 요소
  '짬뽕',
  '돼지국밥',
  '한우'
];
 
// 인댁스 == 프로퍼티 이름
console.log(foodRanking[0]);   // 인덱싱(Indexing) // 출력 : 짜장면
console.log(foodRanking[1 + 2]);   // 한우
 
 
 
console.log(foodRanking.length);   // 4 (배열의 요소 총개수) 
console.log(foodRanking['length']);    // 4 (배열의 요소 총개수)
console.log(foodRanking[foodRanking.length - 1]);    // 한우 (배열의 마지막 요소)
console.log(foodRanking[5]);   // undefined
 
 
 
foodRanking[5] = '순대국';   // 요소 값 수정
console.log(foodRanking[5]);    // 순대국 
 
foodRanking[7] = '카레';
console.log(foodRanking[6]);    // 6번이 empty로 비어있음
 
foodRanking[2] = '초밥';
console.log(foodRanking[2]);    // 돼지국밥에서 초밥으로 수정(덮어쓰기)
 
 
 
console.log(foodRanking);   // [ '짜장면', '짬뽕', '초밥', '한우', <1 empty item>, '순대국', <1 empty item>, '카레' ]
delete foodRanking[3];  // 배열 삭제
console.log(foodRanking);  // [ '짜장면', '짬뽕', '초밥', <2 empty items>, '순대국', <1 empty item>, '카레' ]

배열의 메소드

splice : 할당된 숫자 이후부터의 배열의 값을 완벽하게 삭제

 // 배열 (Array)
let foodRanking = [
  '짜장면',      // 요소
  '짬뽕',
  '돼지국밥',
  '한우'
];
 
 
// splice (할당된 숫자 이후부터의 배열의 값을 완벽하게 삭제)
foodRanking.splice(2);
console.log(foodRanking);   // [ '짜장면', '짬뽕' ]
 
 
// splice(StartIndex, DeleteIndex)
foodRanking.splice(2, 1);   // 2번인덱스 부터 1개 완벽하게 삭제
console.log(foodRanking);   // [ '짜장면', '짬뽕', '한우' ]
 
 
// splice(StartIndex, DeleteIndex, Item) 삭제된 index값에 item 추가
foodRanking.splice(2, 1, 'hyogi');   // 2번인덱스 부터 1개 완벽하게 삭제
console.log(foodRanking);     // [ '짜장면', '짬뽕', 'hyogi', '한우' ]
 
 
 
 
// splice 활용 정리
 
// 배열의 첫 요소 삭제
foodRanking.splice(0, 1);
 
// 배열의 마지막 요소 삭제
foodRanking.splice(foodRanking.length - 1, 1);
 
// 배열의 첫 요소에 값 추가
foodRanking.splice(0, 0, 'hyogi');
 
// 배열의 마지막 요소에 값 추가
foodRanking.splice(foodRanking.length, 0, 'hyogi2');
 
 
 
 
// 배열의 첫 요소 삭제
foodRanking.shift();
 
// 배열의 마지막 요소 삭제
foodRanking.pop();
 
// 배열의 첫 요소에 값 추가
foodRanking.unshift();
 
// 배열의 마지막 요소에 값 추가
foodRanking.push();
 
 
 
 
// 배열의 특정 값 찾기 (포함되어 있다면 인덱스 위치가 리턴 없다면 -1)
console.log(foodRanking.indexOf('짜장면'));  //-1 
// 배열의 특정 값 찾기를 뒤에서부터 탐색함.
console.log(foodRanking.lastIndexOf('짜장면'));  //-1
 
 
 
 
// 배열에 특정 값이 있는지 확인 (includes) 있으면 true 없으면 false
console.log(foodRanking.includes('짜장면'));  // false
 
 
 
 
// 배열 뒤집기 (reverse)
foodRanking.reverse();

for...of 반복문

 // 배열 (Array)
let foodRanking = [
  '짜장면',      // 요소
  '짬뽕',
  '돼지국밥',
  '한우'
];
 
 
for (let element of foodRanking){
  console.log(element);   // 짜장면 짬뽕 돼지국밥 한우
}
 
for (let index in foodRanking){
  console.log(foodRanking[index]);  // 짜장면 짬뽕 돼지국밥 한우
}

다차원 배열

 // 다차원 배열 (multidimensional array)
let foodRanking = [[1, 2], [3, 4], [4, 5]];
 
console.log(foodRanking[0]);    // [ 1, 2 ]
console.log(foodRanking[0][1]);  // 2

다양한 숫자 표기법

 // 숫자 표기법
let millionaire = 1000000000;
let num = 1e9;   // 지수 표기법
 
console.log(millionaire);   // 1000000000
console.log(num);     // 1000000000
console.log(millionaire === num);    // true
 
// 숫자 표기법
console.log(13e5 === 1300000);  // true
console.log(4.2e3 === 4200);   // true
console.log(-2.1e8 === -210000000);   // true
 
// 16진법
let hexOne = 0xff;
let hexTwo = 0xFF;
 
// 8진법
let oct = 0o377;
 
// 2진법
let binary = 0b11111111;
 
console.log(hexOne);   // 255
console.log(hexTwo);   // 255
console.log(oct);    // 255
console.log(binary);    // 255

숫자형 메소드

▶JS는 숫자도 객체

 // number
let num = 0.1234;
 
// toFixed(0 ~ 100)
console.log(num.toFixed(3));  // 소수를 다룰때 사용하는 메소드, 숫자만큼 소수점 아래 자리수를 고정해줌 string  0.123
console.log(+num.toFixed(2));   // 0.12   (+ 는 num으로 형변환해줌)
 
// toString (2 ~ 36) 진법으로 숫자를 변환해줌
console.log(num.toString(2));  // 2진수
console.log(num.toString(8));  // 8진수
console.log(num.toString(16));  // 16진수
console.log(4..toString(2));   // 100 (4 숫자 그대로 2진법으로 변환)
console.log((16).toString(8));   // 20

Math 객체

 // 절댓값 (Absolute Number)
console.log(Math.abs(-300));  // 300
 
// 최댓값 (Maximum)
console.log(Math.max(3, 4, 5, 11, 7, 3, 9));  // 11
 
// 최솟값 (Minimum)
console.log(Math.min(5, 6, 11, 32, 12, 1, 2));  // 1
 
// 거듭제곱 (Exponentiation)
console.log(Math.pow(4, 2));   // 16
 
// 제곱근 (Square Root)
console.log(Math.sqrt(81));   // 9
 
// 반올림 (Round)
console.log(Math.round(5.7));   // 6
 
// 버림과 반올림 (Floor and Ceil)
console.log(Math.floor(8.4));   // 8 (버림)
console.log(Math.ceil(4.9));   // 5 (올림)
 
// 난수 (Random)
console.log(Math.random());    // 0.20732508994709398

미세한 값의 차이가 있는 JS

▶컴퓨터는 0과 1로 처리하다 보니까 가끔 오차가 있는 경우가 있는데

toFixed() 를 사용한뒤 형변환을 해주면 해결된다.

▶round() 사용한다.

문자열 심화

 // String
let hyogiString = 'hyogi';
 
// 문자열 길이
console.log(hyogiString.length);  // 5 (공백 포함)
 
// 요소 접근
console.log(hyogiString[2]);  // o 대괄호 표기법
console.log(hyogiString.charAt(3)); // g  charAt 메소드
 
// 요소 탐색
console.log(hyogiString.indexOf('h'));   // 0 0번인댁스에 h가 존재함 (존재하지 않으면 -1 출력)
console.log(hyogiString.lastIndexOf('y'));   //1 뒤부터 접근
 
// 대문자 변환
console.log(hyogiString.toUpperCase());  // 대문자 HYOGI
console.log(hyogiString.toLowerCase());  // 소문자 hyogi
 
// 양 끝 공백 제거
console.log(hyogiString.trim());   // hyogi에 공백이 없으므로 hyogi 출력함
 
// 부분 문자열 접근 slice(start, end)
console.log(hyogiString.slice(0, 3));   // hyo 0~2번 인덱스까지 출력
console.log(hyogiString.slice(2));  // ogi 2번 인덱스부터 출력
console.log(hyogiString.slice());  // hyogi 전부 출력

기본형과 참조형

기본형 : number, string, boolean, null, undefined ( 변수 = 값 )

참조형 : object ( 변수 = 주소값 )

참조형 복사하기

 // 참조형 복사하기
let num1 = [1, 2, 3, 4, 5];
let num2 = num1.slice();
 
num2.push(6);
 
console.log(num1);   // [ 1, 2, 3, 4, 5 ]
console.log(num2);   // [ 1, 2, 3, 4, 5, 6 ]
 
 
 
// 객체
let hyogi = {
  title: 'hyogi blog',
  language: 'Java'
};
 
 
// <1>
let hyogi2 = Object.assign({}, hyogi);
 
hyogi2.title = 'hyogi it blog';
 
console.log(hyogi);   // { title: 'hyogi it blog', language: 'Java' }
console.log(hyogi2);  // { title: 'hyogi it blog', language: 'Java' }
 
 
// <2>
for (let key in hyogi){
  hyogi2[key] = hyogi[key];
}
 
hyogi2.title = 'hyogi tistory blog';
 
console.log(hyogi);   // { title: 'hyogi it blog', language: 'Java' }
console.log(hyogi2);  // { title: 'hyogi tistory blog', language: 'Java' }
 
 
// <3>
function hyogiObject(Object) {
  let temp = {};
 
  for (let key in Object){
    temp[key] = Object[key]
  }
 
  return temp;
};
 
let hyogi1 = {
  title: 'hyogi it blog',
  language: 'python'
}
 
let hyogi3 = hyogiObject(hyogi1);
 
hyogi3.title = 'hyogi tistory blog';
console.log(hyogi3);   // { title: 'hyogi tistory blog', language: 'python' }

const, 변수와 상수 사이

가끔 변수를 상수로 쓰라는 경우도 있는데 그 이유는 변수는 언제 어디서나 변경될 수 있는 위험성이 있기 때문이다.

따라서 상수를 써서 변경 못하게 함으로써 안전성에 확보를 생각한 것이다.

변수 ( variable) : hyogiName

상수 (constant) : HYOGINAME

변수 더 나아가서

var : let과 const처럼 변수 선언할 수 있다.

▶중복된 변수값을 에러발생 시키지 않고 덮어써 버린다.

▶var변수는 scope가 function에서만 구분되어 있다. (전역번수 역할을 하게 된다)

▶끌어올림 : var 변수는 함수 스코프 기준으로 선언되기 이전에도 변수에 접근이 가능하다.

본 포스팅은 codeit; 스터디를 하며 요약했으며
강의에 있는 예제를 저자가 알아보기 쉽도록 변경하여 포스팅 했습니다.

저작자표시

블로그의 정보

감성 개발자 효기

효기’s

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

	// 객체(Object)

	let hyogi = {
	name : 'hyogi', // name은 key, 'hyogi'는 value(값)
	year: '25',
	'mybirth year': 1999,
	GoodJoob: 'false',
	SoSo: 'null',
	greatCourse: { // 객체 안에 객체
	title: 'hello World',
	language: 'Python'
	}
	}

	// 점 표기법 (ObjectName.propertyName)
	console.log(hyogi.name); // hyogi
	console.log(mybirth year); // 불가능 x
	console.log(hyogi.greatCourse.title); // hello World



	// 대괄호 표기법 (ObjectName['propertyName'])
	console.log(hyogi['mybirth year']); // 1999
	console.log(hyogi['mybirth' + 'year']); // 1999
	console.log(hyogi.greatCourse['title']); // hello World

	let propertyName = 'hyogi';
	console.log(hyogi[propertyName]); // hyogi

	// 존재하지 않는 property에 접근하면 undefined처리가 됨. (오류 x)

	// 메소드 (Method)
	let hyogi = {
	sayA: function (name) {
	console.log(`A ${name}!`);
	},

	sayB: function () {
	console.log('B');
	},

	sayC: function () {
	console.log('C');
	}
	};

	hyogi.sayA('hyogi'); // A hyogi!
	hyogi.sayB(); // B
	hyogi['sayA']('hyogi'); // A hyogi!

	// Date
	let my1Date = new Date();
	console.log(my1Date); // 2023-03-22T02:58:35.881Z (오늘시간 출력)



	//1970년 1월 1일 00:00:00 UTC + 1000밀리초
	let my2Date = new Date(1000);
	console.log(my2Date); // 1970-01-01T00:00:01.000Z



	// 문자열로 시간을 할당
	let my3Date = new Date('2023-03-22');
	console.log(my3Date); // 2023-03-22T00:00:00.000Z

	// 시간 분 초까지 할당
	my3Date = new Date('2023-03-22T09:11:12');
	console.log(my3Date); // 2023-03-22T00:11:12.000Z

	// 소괄호 안에 여러 값을 할당 (month는 0부터 시작)
	let my5Date = new Date(1999, 08, 06, 12, 11, 50, 12); // yyyy, MM, DD, hh, mm, ss, ms
	console.log(my5Date); // 1999-09-06T03:11:50.012Z



	// Date.getTime() → 몇밀리초가 지났는지 계산
	let my6Date = new Date(1999, 08, 06, 12, 11, 50, 12); // 1970년 1월 1일 00:00:00 UTC 부터 몇 밀리초가 지났는지
	console.log(my6Date.getTime()); // 936587510012 (타임스탬프)



	// 지금으로부터 몇 밀리초, 초, 분, 시간이 차이나는지 계산
	let today = new Date(); // 오늘 시간 출력
	let timeDiff = my6Date.getTime() - today.getTime();
	console.log(timeDiff + '밀리초'); // -742867634694밀리초
	console.log(timeDiff / 1000 + '초'); // -742867712.473초
	console.log(timeDiff / 1000 / 60 + '분'); // -12381128.541216668분
	console.log(timeDiff / 1000 / 60 / 60 + '시간'); // -206352.14235361113시간

	let my7Date = new Date(2014, 6, 12, 13, 17, 15);
	console.log(my7Date.getFullYear()); // 2014
	console.log(my7Date.getMonth()); // 6 (0부터 시작)
	console.log(my7Date.getDate()); // 12 (일)
	console.log(my7Date.getDay()); // 6 (요일)
	console.log(my7Date.getHours()); // 13
	console.log(my7Date.getMinutes()); // 17
	console.log(my7Date.getSeconds()); // 15
	console.log(my7Date.getMilliseconds()); // 0



	// set 으로 생성된 Date 객체 정보 수정

	my7Date.setFullYear(1999);
	my7Date.setMonth(2);
	my7Date.setDate(30);
	console.log(my7Date); // 1999-03-30T04:17:15.000Z (변경 값)



	// 브라우저에 설정된 국가 표기에 맞춰 날짜와 시간을 보여줌
	let myDate = new Date();
	console.log(myDate.toLocaleDateString()); // 2023. 3. 22. (년. 월. 일)
	console.log(myDate.toLocaleTimeString()); // 오후 12:30:19 (시:분:초)
	console.log(myDate.toLocaleString()); // 2023. 3. 22. 오후 12:30:19 (년. 월. 일 시:분:초)



	// Date객체의 형변환
	console.log(typeof myDate); // object
	console.log(Boolean(myDate)); // true
	console.log(Number(myDate)); // 1679456110776 (타임스탬프 값)



	// 두 객체 사이의 시간차이 확인도 가능
	let myDate1 = new Date(1999, 8, 6);
	let myDate2 = new Date(2023, 3, 22);

	let timeDiff2 = myDate2 - myDate1;
	console.log(timeDiff2); // 745545600000 (ms)
	console.log(timeDiff2 / 1000); // 745545600 (sec)
	console.log(timeDiff2 / 1000 / 60) // 12425760 (min)
	console.log(timeDiff2 / 1000 / 60 / 60) // 207096 (hour)
	console.log(timeDiff2 / 1000 / 60 / 60 / 24) // 8629 (date)



	// 날짜를 표현하는 다양한 문자열
	let date1 = new Date('8/6/1999 06:00:00');
	let date2 = new Date('August 6, 1999 06:00:00');
	let date3 = new Date('Aug 6 1999 06:00:00');
	console.log(date1, date2, date3); // 1999-08-05T21:00:00.000Z * 3

	// 배열 (Array)
	let foodRanking = [
	'짜장면', // 요소
	'짬뽕',
	'돼지국밥',
	'한우'
	];

	// 인댁스 == 프로퍼티 이름
	console.log(foodRanking[0]); // 인덱싱(Indexing) // 출력 : 짜장면
	console.log(foodRanking[1 + 2]); // 한우



	console.log(foodRanking.length); // 4 (배열의 요소 총개수)
	console.log(foodRanking['length']); // 4 (배열의 요소 총개수)
	console.log(foodRanking[foodRanking.length - 1]); // 한우 (배열의 마지막 요소)
	console.log(foodRanking[5]); // undefined



	foodRanking[5] = '순대국'; // 요소 값 수정
	console.log(foodRanking[5]); // 순대국

	foodRanking[7] = '카레';
	console.log(foodRanking[6]); // 6번이 empty로 비어있음

	foodRanking[2] = '초밥';
	console.log(foodRanking[2]); // 돼지국밥에서 초밥으로 수정(덮어쓰기)



	console.log(foodRanking); // [ '짜장면', '짬뽕', '초밥', '한우', <1 empty item>, '순대국', <1 empty item>, '카레' ]
	delete foodRanking[3]; // 배열 삭제
	console.log(foodRanking); // [ '짜장면', '짬뽕', '초밥', <2 empty items>, '순대국', <1 empty item>, '카레' ]

	// 다차원 배열 (multidimensional array)
	let foodRanking = [[1, 2], [3, 4], [4, 5]];

	console.log(foodRanking[0]); // [ 1, 2 ]
	console.log(foodRanking[0][1]); // 2

	// 숫자 표기법
	let millionaire = 1000000000;
	let num = 1e9; // 지수 표기법

	console.log(millionaire); // 1000000000
	console.log(num); // 1000000000
	console.log(millionaire === num); // true

	// 숫자 표기법
	console.log(13e5 === 1300000); // true
	console.log(4.2e3 === 4200); // true
	console.log(-2.1e8 === -210000000); // true

	// 16진법
	let hexOne = 0xff;
	let hexTwo = 0xFF;

	// 8진법
	let oct = 0o377;

	// 2진법
	let binary = 0b11111111;

	console.log(hexOne); // 255
	console.log(hexTwo); // 255
	console.log(oct); // 255
	console.log(binary); // 255

	// number
	let num = 0.1234;

	// toFixed(0 ~ 100)
	console.log(num.toFixed(3)); // 소수를 다룰때 사용하는 메소드, 숫자만큼 소수점 아래 자리수를 고정해줌 string 0.123
	console.log(+num.toFixed(2)); // 0.12 (+ 는 num으로 형변환해줌)

	// toString (2 ~ 36) 진법으로 숫자를 변환해줌
	console.log(num.toString(2)); // 2진수
	console.log(num.toString(8)); // 8진수
	console.log(num.toString(16)); // 16진수
	console.log(4..toString(2)); // 100 (4 숫자 그대로 2진법으로 변환)
	console.log((16).toString(8)); // 20

	// 절댓값 (Absolute Number)
	console.log(Math.abs(-300)); // 300

	// 최댓값 (Maximum)
	console.log(Math.max(3, 4, 5, 11, 7, 3, 9)); // 11

	// 최솟값 (Minimum)
	console.log(Math.min(5, 6, 11, 32, 12, 1, 2)); // 1

	// 거듭제곱 (Exponentiation)
	console.log(Math.pow(4, 2)); // 16

	// 제곱근 (Square Root)
	console.log(Math.sqrt(81)); // 9

	// 반올림 (Round)
	console.log(Math.round(5.7)); // 6

	// 버림과 반올림 (Floor and Ceil)
	console.log(Math.floor(8.4)); // 8 (버림)
	console.log(Math.ceil(4.9)); // 5 (올림)

	// 난수 (Random)
	console.log(Math.random()); // 0.20732508994709398

	// String
	let hyogiString = 'hyogi';

	// 문자열 길이
	console.log(hyogiString.length); // 5 (공백 포함)

	// 요소 접근
	console.log(hyogiString[2]); // o 대괄호 표기법
	console.log(hyogiString.charAt(3)); // g charAt 메소드

	// 요소 탐색
	console.log(hyogiString.indexOf('h')); // 0 0번인댁스에 h가 존재함 (존재하지 않으면 -1 출력)
	console.log(hyogiString.lastIndexOf('y')); //1 뒤부터 접근

	// 대문자 변환
	console.log(hyogiString.toUpperCase()); // 대문자 HYOGI
	console.log(hyogiString.toLowerCase()); // 소문자 hyogi

	// 양 끝 공백 제거
	console.log(hyogiString.trim()); // hyogi에 공백이 없으므로 hyogi 출력함

	// 부분 문자열 접근 slice(start, end)
	console.log(hyogiString.slice(0, 3)); // hyo 0~2번 인덱스까지 출력
	console.log(hyogiString.slice(2)); // ogi 2번 인덱스부터 출력
	console.log(hyogiString.slice()); // hyogi 전부 출력

	// 참조형 복사하기
	let num1 = [1, 2, 3, 4, 5];
	let num2 = num1.slice();

	num2.push(6);

	console.log(num1); // [ 1, 2, 3, 4, 5 ]
	console.log(num2); // [ 1, 2, 3, 4, 5, 6 ]



	// 객체
	let hyogi = {
	title: 'hyogi blog',
	language: 'Java'
	};


	// <1>
	let hyogi2 = Object.assign({}, hyogi);

	hyogi2.title = 'hyogi it blog';

	console.log(hyogi); // { title: 'hyogi it blog', language: 'Java' }
	console.log(hyogi2); // { title: 'hyogi it blog', language: 'Java' }


	// <2>
	for (let key in hyogi){
	hyogi2[key] = hyogi[key];
	}

	hyogi2.title = 'hyogi tistory blog';

	console.log(hyogi); // { title: 'hyogi it blog', language: 'Java' }
	console.log(hyogi2); // { title: 'hyogi tistory blog', language: 'Java' }


	// <3>
	function hyogiObject(Object) {
	let temp = {};

	for (let key in Object){
	temp[key] = Object[key]
	}

	return temp;
	};

	let hyogi1 = {
	title: 'hyogi it blog',
	language: 'python'
	}

	let hyogi3 = hyogiObject(hyogi1);

	hyogi3.title = 'hyogi tistory blog';
	console.log(hyogi3); // { title: 'hyogi tistory blog', language: 'python' }

블로그의 정보

활동하기

공유하기

다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역