[ codeit ] 프로그래밍 기초 in JS - 프로그래밍과 데이터 in JS (1)

 객체 

1강. 객체와 프로퍼티

객체(Object) : 연관된 여러 값을 한번에 저장

'자바스크립트의 모든 것이 객체다!'

{   
   brandName : '코드잇',
   bornYear : 2017,
   isVeryNice : true,
   worstCourse : null,
   bestCourse: {
   		title :'자바스크립트',
        language : 'javascript'
   }
   
   //(property)key    :    (property)value = property(객체의 속성)
   // └ string 문자열이지만    └ 문자열, 숫자, 불린, null 가능, 객체내 객체 가능
   //  따옴표 생략가능, 생략시 1,2,3
   //  1. 첫글자는 반드시 문자, 밑줄(_), 달러기호($) 중 하나로 시작
   //  2. 띄어쓰기 x
   //  3. 하이픈 - 금지
   //1,2,3을 하지않으려면 따옴표로 감싸야함!
}


//▽
//객체 안의 객체
console.log(typeof {   
   brandName : '코드잇',
   bornYear : 2017,
   isVeryNice : true,
   worstCourse : null,
   bestCourse: {
   		title :'자바스크립트',
        language : 'javascript'
   }
}
//object

 

2강. 객체와 프로퍼티 익히기

3강. 객체에서 데이터 접근하기

let codeit = {
   name:'코드잇',
   'born Year': 2017,
   bestCourse : {
      title: '자바스크립트',
      'use-language': 'javascript'
   }
};

//점 표기법으로 property출력가능, key값이 ''로 표기된 경우는 대괄호[] 표기법
console.log(codeit.name); //코드잇 
//: 점표기법 -> (codeit.born Year)로 출력x
// (objectName.propertyName);

console.log(codeit['born Year']); //2017 
//: 대괄호표기법
// (objectName.['propertyName'];

console.log(codeit.bestCourse.title); //자바스크립트
console.log(codeit.bestCourse[use-language]); //javascript

console.log(codeit.bestCourse.teacher); //undefined

 

4강. 영어 단어장I

 

5강. 객체 다루기

let codeit = {
   name:'코드잇',
   'born Year': 2017,
   day : undefined,
   isVeryNice : true,
   worstCourse : null,
   bestCourse : {
      title: '자바스크립트',
      'use-language': 'javascript'
   }
};

//property 재할당
console.log(codeit.name); //코드잇
codeit.name = 'codeit';
console.log(codeit.name); //codeit

//property 추가
console.log(codeit.ceo); //undefined
codeit.ceo = 'John';
console.log(codeit.ceo); //John

//property 삭제
console.log(codeit.worstCourse); //null
delete codeit.worstCourse;
console.log(codeit.worstCourse); //undefined

//property 존재여부 확인
console.log(codeit.day !== undefined); //false
//'propertyName' in object - 안전한 확인 ex.value가 undefined인 경우
console.log('day' in codeit); //true

if('name' in codeit){
  console.log(`name값은 ${codeit.name}입니다.`);
}else({
  console.log(`name 프로퍼티는 존재하지 않습니다.`);
}

 

6강. 영어 단어장 II

 

7강. 객체와 메소드

메소드(method) : 연관된 여러함수를 하나로 묶을 때 / 객체의 고유한 동작으로 함수에 의미부여 가능

= greeting

let greeting = {
   sayHello: function (){
   		console.log('Hello!');
   },
   sayHi: function (name){
   		console.log(`Hi! ${name}`);
   },
   sayBye: function (){
   		console.log('Bye!');
        //console이라는 객체와
        //log라는 메소드
   }
}
greeting.sayHello(); //Hello!
greeting.sayHi('Codeit!'); //Hi! Codeit!
greeting['sayHi']('Codeit!'); //Hi! Codeit! - 대괄호 표기법

let rectAngle = {
   width: 30,
   height: 50,
   getArea: function(){
   	return rectAngle.width * rectAngle.height;
   }
}

let triAngle = {
   width: 30,
   height: 50,
   getArea: function(){
   	return triAngle.width * triAngle.height /2;
   }
}

 

8강. 영어 단어장 III 

Q. 단어를 추가하는 addVoca메소드 생성(단어, 뜻의 문자열 값을 파라미터로 전달받아 myVoca객체에 프로퍼티 추가),

단어를 삭제하는 deleteVoca 메소드 생성 ( " 삭제),

단어를 출력하는 printVoca 메소드 생성, 콘솔에 출력

let myVoca = {
  // 코드를 작성해 주세요.
  
  //addVoca의 메소드
  addVoca : function(key, value){
    myVoca[key] = value; 
    //key는 문자열이 아니라 변수이기 때문에 변수안에 담겨진 값을 딕셔너리의 key값으로 넘기려면 "로 감싸지 않아야
    //객체[key] = value 와 같이 쓰면 key: value 쌍으로 객체에 저장
    //객체[key] = [value] 와 같이 쓰면 value로는 배열이 들어감
 },
  //deleteVoca의 메소드
  deleteVoca : function(key, value){
    delete myVoca[key];
  },
  //printVoca의 메소드
  printVoca : function(key, value){
    console.log(`"${key}"의 뜻은 "${myVoca[key]}"입니다.`)
  }
};

// addVoca메소드 테스트 코드
myVoca.addVoca('parameter', '매개 변수');
myVoca.addVoca('element', '요소');
myVoca.addVoca('property', '속성');
console.log(myVoca);

// deleteVoca메소드 테스트 코드
myVoca.deleteVoca('parameter');
myVoca.deleteVoca('element');
console.log(myVoca);

// printVoca메소드 테스트 코드
myVoca.printVoca('property');




//{
//  addVoca: [Function: addVoca],
//  deleteVoca: [Function: deleteVoca],
//  printVoca: [Function: printVoca],
//  parameter: '매개 변수',
//  element: '요소',
//  property: '속성'
//}
//{
//  addVoca: [Function: addVoca],
//  deleteVoca: [Function: deleteVoca],
//  printVoca: [Function: printVoca],
//  property: '속성'
//}
//"property"의 뜻은 "속성"입니다.


//function A(){
//   console.log('a');
// }
 
// console.log(A); //[Function: A];

한 가지 조심해야 될 부분은 파라미터로 다른 변수에 담긴 값을 가져올 때는 대괄호 표기법을 사용해 주어야 한다는 겁니다.

위 메소드에서 만약 점 표기법으로 key값에 접근을 하게 되면, 파라미터 key를 가리키는 것이 아니라,

myVoca에 문자 그대로 key라는 프로퍼티 이름을 가진 프로퍼티 값에 접근하는 것과 같은 의미가 되기 때문

/ 꼭 쉼표로 각 프로퍼티를 구분  -ok, 이해완료

 

9강. for...in 반복문

//for..in
for(변수 in 객체){
   동작부분
}

let codeit = {
   name : '코드잇',
   bornYear : 2017,
   isVeryNice : true,
   worstCourse : null,
   bestCourse : '자바스크립트'
}

//i)
for(let key in codeit){
   console.log(key);
}

//name
//bornYear
//isVeryNice
//worstCourse
//bestCourse

//ii)
for(let key in codeit){
   console.log(codeit[key]);
}

//name
//코드잇
//bornYear
//2017
//isVeryNice
//true
//worstCourse
//null
//bestCourse
//자바스크립트


for (let key in codeit) {

  console.log(key); 
  console.log(codeit['key']); //undefined - name이 key인 객체의 value를 구하라는 의미
  console.log(codeit.key); //undefined - name이 key인 객체의 value를 구하라는 의미
  console.log(codeit[key]); 

}

 

10강. for..in 주의사항

let myObject = {
  '2': '알고리즘의 정석',
  '3': '컴퓨터 개론',
  '1': '자바스크립트 프로그래밍 기초',
};

for (let key in myObject) {
  console.log(myObject[key]);
}

//자바스크립트 프로그래밍 기초
//알고리즘의 정석
//컴퓨터 개론

 

- 숫자형(양수) 프로퍼티 네임 : name에 숫자가 사용될 경우 object[' ']으로 접근 (object.숫자 : error!)

- 정수형 프로퍼티 네임 : 객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있음 -> 권장x

 

11강. 순이들의 시험 결과

let hyesoonScore = {
	'데이터 모델링의 이해': 10,
	'데이터 모델과 성능': 8,
	'SQL 기본': 22,
	'SQL 활용': 18,
	'SQL 최적화 기본 원리': 20,
};

let minsoonScore = {
	'데이터 모델링의 이해': 14,
	'데이터 모델과 성능': 8,
	'SQL 기본': 12,
	'SQL 활용': 4,
	'SQL 최적화 기본 원리': 16,
};



function passChecker(scoreObject) {

  let total = 0; //함수밖에서 선언하면 왜 누적이되지?      ?????
	
  for( let score in scoreObject){
    total += scoreObject[score];
  }
  if(total >= 60){
    console.log('축하합니다! 합격입니다!');
  }else {
    console.log('아쉽지만 불합격입니다..');
  }
}

passChecker(hyesoonScore);
passChecker(minsoonScore);

 

12강. Date객체

: 내장객체(Standard built-in objects)

//Date
let myDate = new Date();
console.log(myDate);

//Sun May 16 2021 14:08:00 시간대

//new Date(milliseconds);
let myDate = new Date(1000); //현재시간 +1000밀리초(1초)

//new Date('YYYY-MM-DD');
let myDate1 = new Date('2020-01-01'); //2020년 1월 1일 00:00:00

//new Date('YYYY-MM-DDThh:mm:ss');
let myDate2 = new Date('2020-01-01T20:00:00'); //2020년 1월 1일 20:00:00

//new Date(YYYY, MM, DD, hh, mm, ss, ms);
           //필수    //선택사항
let myDate3 = new Date(2020,4,18); //4 ->컴퓨터 숫자로 5의미 : may
//Thu May 18 00:00:00 

getTime : myDate객체가 (1970년 1월 1일 00:00:00인) UTC표준시부터 몇 밀리초 지났는지 : 타임스탬프(time stamp)

//Date.getTime()
let myDate = new Date(2020, 4, 18, 19, 11, 16);
console.log(myDate.getTime());


let myDate = new Date(2020, 4, 18, 19, 11, 16);
let today = new Date();

let timeDiff = myDate.getTime() - today.getTime();

console.log(timeDiff + '밀리초');
console.log(timeDiff + '초');
console.log(timeDiff / 1000 / 60 + '분');
console.log(timeDiff / 1000 / 60 +'시간');

console.log(myDate.getFullYear()); //2020
console.log(myDate.getMonth()); //4
console.log(myDate.getDate()); //18 : 일자
console.log(myDate.getDay()); //4 : 0~6 요일
console.log(myDate.getHours()); //19
console.log(myDate.getMinutes()); //11
console.log(myDate.getSeconds()); //16
console.log(myDate.getMilliseconds()); //0

 

13강. Date객체 Tip

Date객체 정보 수정하기

set으로 시작하는 다양한 메서드를 활용하면, 생성된 Date객체의 정보 수정가능

setFullYear(year, [month], [date])
setMonth(month, [date])
setDate(date)
setHours(hour, [min], [sec], [ms])
setMinutes(min, [sec], [ms])
setSeconds(sec, [ms])
setMilliseconds(ms)
setTime(milliseconds) //1970년 1월 1일 00:00:00 Utc부터 밀리초 이후를 나타내는 날짜 설정

간단하게 시간 정보 알아내기 _ 사용자의 브라우저에 설정된 국가의 표기에 맞춰 날짜와 시간을 보여줌

let myDate = new Date();

console.log(myDate.toLocalDateString()); // myDate가 가진 날짜에 대한 정보 (년. 월. 일)
console.log(myDate.toLocaleTimeString()); // myDate가 가진 시간에 대한 정보 (시:분:초)
console.log(myDate.toLocaleString()); // myDate가 가진 날짜와 시간에 대한 정보 (년. 월. 일 시:분:초)

범위를 벗어나는 값을 설정하려고 하면 자동으로 날짜를 수정하는 기능

let myDate = new Date(1988, 0, 32); // 1988년 1월 32일은 없습니다

// 2월 1일로 자동고침 되는걸 확인할 수 있습니다.
console.log(myDate) // Mon Feb 01 1988 00:00:00

 

현재시점 Date.now()

let myDate = new Date();

console.log(Date.now() === myDate.getTime()); // true

Date객체의 형변환, 사칙연산 가능

let myDate = new Date(2017, 4, 18);

console.log(typeof myDate); // object
console.log(String(myDate)); // Thu May 18 2017 00:00:00 GMT+0900 (Korean Standard Time)
console.log(Number(myDate)); // 1495033200000
console.log(Boolean(myDate)); // true

날짜를 표현하는 문자열 (브라우저나 위치에 따라 다른 결과값이 나올수 있어 권장x)

let date1 = new Date('12/15/1999 05:25:30');
let date2 = new Date('December 15, 1999 05:25:30');
let date3 = new Date('Dec 15 1999 05:25:30');

 

14강. 우수사원 재상이

let today = new Date(2112, 8, 24);
let jaeSangStart = new Date(2109, 7, 1);

function workDayCalc(startDate) {
  let timeDiff = today.getTime() - jaeSangStart.getTime();
  let secondDiff = timeDiff / 1000;
  let minuteDiff = secondDiff / 60;
  let hourDiff = minuteDiff / 60;
  let dayDiff = hourDiff / 24 +1;
	console.log(`오늘은 입사한 지 ${dayDiff}일째 되는 날 입니다.`)
    //console.log(`오늘은 입사한 지 ${dayDiff + 1}일째 되는 날 입니다.`);
}

workDayCalc(jaeSangStart);