객체 및 속성
개체: 여러 값을 한 번에 저장합니다.
▶ name: ‘hyogi’ → 속성(Property)
속성 이름 → name (문자열 문자열)
인기글
property Value →「히오기」
▶Property Name 주의사항
1. 첫 문자는 반드시 문자, 밑줄( _ ), 달러 기호($) 중 하나로 시작합니다.
2. 부동 쓰기 금지
3. 하이픈(-)금지
→ 속성 이름에 따옴표(‘)를 추가하면 숫자도 사용할 수 있습니다.
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값은 문자열이며, 대괄호 표기법으로만 액세스가 가능하다.
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.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
상수: HYOGINAME
더 변수
var:let과 const와 같이 변수를 선언할 수 있습니다.
▶중복 변수 값을 오류없이 덮어 씁니다.
▶var 변수는 scope가 function으로만 구분된다.
(글로벌 번호의 역할을 수행)
▶ 풀: var 변수는 함수 범위를 기반으로 합니다.
선언되기 전에 변수에 액세스할 수도 있습니다.
이 게시물은 코드입니다.
공부하고 정리했습니다.
레슨의 예를 저자가 알기 쉽게 변경하여 게시했습니다.