자바스크립트 기초의 마지막 관문인 프로그래밍과 데이터를 시작하였다. 크게 객체, 배열, 자료형 심화, 과제로 복습하기 4가지 파트로 나눠있으며 오늘은 객체형을 공부 하였다.
오늘 공부한 객체형은 크게 4가지로 나눌수 있다.
객체와 프로퍼티
지금까지는 변수를 문자, 숫자, 불린 각각 따로 지정을 했지만, 여러가지 값을 한번에 지정하고 싶다면 객체라는걸 사용하면 된다.
위 사진처럼 중괄호 안에 형식에 맞게 작성한다면 한번에 지정이 가능하다. 왼쪽을 Key, 오른쪽을 Value라고 부르며 전체를 Property라고 한다. 왼쪽 Key의 경우 문자이기 때문에 ‘ ‘로 묶어줘야 하지만, JS는 이것을 자동으로 인식하기 때문에 사용할 필요가 없다.
다만 위 사진처럼 Key(Property Name이라고도 한다)의 이름 작성에는 위와같은 룰이 있다. 주의해서 사용 하도록 하자
객체에서 데이터 접근하기
위 그림과 같이 객체 데이터에 접근을 하는 방법으로는 점 표기법이 있다. Console.log 코드 작성 후 객체이름 + 마침표 + Property name을 쓰면 된다. 하지만 이 방법은 Property name이 ‘ ‘ 형식으로 되있을때 불러오지 못한다는 단점이 있다.
점 표기법이 불러오지 못하는 데이터는 위와같이 대괄호 표기법으로 해결이 가능하다. Property name을 대괄호로 묶어주는 방식인데, 대괄호와 따옴표를 사용해야하는 벙거로움이 있지만 Property name을 조금더 자유롭게 사용할수 있다는 장점이 있다.
객체 안의 객체에 접근 하는 방법으로는 Property name을 계속해서 연결 하면 접근이 가능하다.
위와같은 실습 문제는 아래의 코드로 풀이가 가능하였다.
let myObject = {
function: '함수',
variable: '변수',
constant: '상수',
local: '지역의',
global: '전반적인'
};
console.log(myObject);
console.log(myObject.local);
console.log(myObject.constant);
console.log(myObject.function);
객체 다루기
위와 같이 Codeit.name = “새로운Value”를 지정 해줌으로써 새로운 결과 값을 도출해낼수 있다.
또한 존재하지 않은 Key에 새로운 Value를 지정해 줌으로써 원하는 값을 얻어내는 것도 가능하다.
값을 삭제하는 것도 방법도 있다. 위 사진처럼 delete 문을 사용하면 Value를 삭제 하는것도 가능하다.
- ’ Console.log(codeit.name !== undefined)’
- ‘Console.log(‘name’ in cadeit);’
위 두 코드를 통해 객체 속에 Property가 존재하는지 알하볼수 있다.
첫번째 방식의 경우에도 원하는 값을 받아올수 있지만, in 방식이 간편하고 정확성이 더 좋다.
아래의 예시에서 볼수 있듯이 만약 Value의 값이 undefined라면 false로 값이 나와 정확성 면에서 불완전 할수 있다.
위 문제는 Property 삭제 및 추가를 응용한 문제이다. 아래와 같이 해결할 수 있다.
// 1. 이미 외운 단어 3개를 삭제해 주세요.
let myVoca = {
function: '함수',
variable: '변수',
constant: '상수',
local: '지역의',
global: '전반적인',
};
delete myVoca.function
delete myVoca.constant
delete myVoca.local
console.log(myVoca);
console.log(myVoca.constant);
// 2. 오늘 외울 단어 4개를 추가해 주세요.
// 여기에 코드를 작성해 주세요.
myVoca.extend = '확장하다'
myVoca.export = '내보내다'
myVoca.import = '불러오다'
myVoca['default value'] = '기본값'
console.log(myVoca);
console.log(myVoca.export);
// 3. default value의 뜻을 출력해 주세요.
// 여기에 코드를 작성해 주세요.
console.log(myVoca['default value'])
객체와 매소드
연관된 여러 값을 하나로 묶고싶을때 객체를 활용했던 것처럼 연관성있는 여러 함수를 하나로 묶을때 사용하는것이 메소드 이다.
위에 보이는 코드처럼 Property 값으로 함수를 정의하고 있다.
메소드를 사용하지 않고 기존 함수를 작성하는 방법도 있지만, 위 사진처럼 메소드를 활용 함으로써 다른 함수와의 이름 중복을 피할수 있고, 조금 더 객체의 이름에 집중하여 함수의 동작 부분을 작성할 수 있다. 또한, 하나의 함수로 작성을 하게 될 경우 상황에 따라 값이 다르게 내부를 복잡하게 고민 해야하지만 메소드는 그럴 필요가 없다.
메소드를 사용하여 단어를 추가, 삭제, 문장 출력 을 하는 문제이다. 아래와 같은 코드로 해결이 가능했다.
// 코드를 작성해 주세요.
let myVoca = {
addVoca: function (key, value) {
myVoca[key] = value
},
deleteVoca: function (key) {
delete myVoca[key]
},
printVoca: function (key) {
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');
2022.07.01 객체 파트 나머지 마무리 시작
For…in 반복문
아래의 코드 형식 대로 작동하는 문장이다. 위 사진 처럼 임의로 변수 k를 지정한 후 in 안에 객체 이름을 지정 그리고 동작부분에 변수 k를 호출하면 codeiit객체 내부의 모든 프로퍼티 이름이 호출 된다.
또한, console.log(codeit[k]); 코드를 통해 객체 codeit내부의 모든 프로퍼티 값을 호출 할 수 있다.
For (변수 in 객체) {
동작부분
}
For…in 반복문 주의사항
객체를 작성할 때는 알고리즘의 정석, 컴퓨터 개론, 자바스크립트 프로그래밍 기초 순서로 작성했는데, 작성한 순서와 다르게 for in 반복문이 수행되었다.
위 사진처럼 객체는 정수형 프로퍼티 이름을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있다.
자동으로 정렬되는 특성이 장점처럼 느껴질 수도 있지만 대부분의 경우에는 의도치 않은 결과를 가져올 수도 있기 때문에, 일반적으로 정수형 프로퍼티는 잘 사용되지 않는다.
그래서 불가피한 경우에는 이런 객체의 정렬방식을 잘 이해한 상태에서 사용하고, 가급적 명확한 의미가 있는 프로퍼티 네임을 사용하는걸 권장한다.
참고 사항으로 이렇게 예외적인 프로퍼티 네임은 접근할 때도 대괄호 표기법으로만 접근이 가능하다.
파라미터로 객체를 전달받고, 두 객체의 과목들의 점수를 각각 합산해주는 함수를 작성하는 문제이다.
합산점수가 60점 이상이면 합격, 미만 이면 불합격 이라는 문장을 결과값으로 출력하면 된다.
우선 주어진 객체 두개를 입력한다.
let hyesoonScore = {
'데이터 모델링의 이해': 10,
'데이터 모델과 성능': 8,
'SQL 기본': 22,
'SQL 활용': 18,
'SQL 최적화 기본 원리': 20,
};
let minsoonScore = {
'데이터 모델링의 이해': 14,
'데이터 모델과 성능': 8,
'SQL 기본': 12,
'SQL 활용': 4,
'SQL 최적화 기본 원리': 16,
};
다음 객체를 파라미터로 전달받을수 있고 과목점주를 합산해주는 함수를 아래와 같이 작성해 준다.
function passChecker(scoreObject) {
let totalScore = 0;
for (let subject in scoreObject) {
totalScore += scoreObject[subject];
}
if (totalScore >= 60) {
console.log('축하합니다! 합격입니다!');
} else {
console.log('아쉽지만 불합격입니다..');
}
}
임의로 subject라는 변수를 만들어주고 scoreObject 로 각 객체를 넣을 파라미터를 작성해줬다.
마무리로 아래와 같이 함수 이름과 파라미터로 각 객체의 이름을 넣으면 원하는 값이 도출된다.
passChecker(hyesoonScore);
passChecker(minsoonScore);
Date객체
Java Script에는 내장 객체라는 것이 있는데 Java Script가 기본적으로 가지고 있는 객체를 뜻하며 대표적으로 console.log가 있다.
Date객체도 내장 객체중 하나이다. 위 사진처럼 코드를 작성하면 요일 월 일 년도 시간 으로 결과값이 나온다.
괄호가 뜻하는 의미는 1970년 1월 1일 00:00:00 시 에서 1000 밀리초, 즉 1초가 지난 시간을 값으로 가지라는 것을 뜻한다.
밀리초를 입력하는 방식으로는 너무 큰 숫자를 넣게 되는 경우가 생길수 있다.
위 사진처럼 문자열 형식의 년-월-일 을 괄호로 넣어주면 날짜가 표시되는데, 시간 까지 지정울 해주고 싶은 경우에는 날짜 뒤에 T를 넣어주고 시: 분: 초 를 입력해주면 된다.
괄호에 날짜를 입력해주는 다른 방법은 년, 월, 일, 시간, 분, 초, 밀리초 순으로 입력해주면 되는데 여기서 년 월 까지는 필수로 입력을 해야한다.
여기서 주의할 점은 컴퓨터가 인식하기에 0을 1월로 인식하기 때문에 위 사진처럼 4로 입력한 값이 결과로는 5월로 나오는것을 볼 수 있다.
Date 매소드
가장 먼저 살펴봐야하는 매소드는 getTime가 있다.
위 사진처럼 사용하는 것인데, myDate객체가 1970년 1월 1일 00:00:00 부터 몇 밀리초 지났는지를 알려주는 매소드이다. 그리고 이것을 타임스탬프 라고 한다.
이런 데이터를 어디에 쓰냐는 의문이 들 수 있지만, 만약 지금 순간을 나타내는 객체를 만들어서 값을 비교하면 위 사진처럼 지금으로부터 얼마의 시간이 흘렀는지 계산할 수 있다.
위 사진처럼 그 밖에도 다양한 메서드를 통해서 다양한 값을 얻어낼 수 있다.
여기서 주의해야할 점은 일자와 요일을 명확히 해줘야하는 것인데, 요일을 0부터 6까지 있으며 일요일 = 0 으로 시작한다.
위 사진처럼 다양한 Set 메서드를 통해 date객체 정보를 수정할 수 있다.
위 toLocaleDateString(), toLocaleTimeString(), toLocaleString() 메서드를 통해 간단하게 시간 정보를 알 수 있다.
위 사진처럼 Java Script에는 없는 날짜가 등록될 경우 자동으로 수정해주는 기능도 있다.
간단히 date.now 메서드를 사용하면 새로운 객체를 만들고 getTime을 사용하지 않아도 된다. 코드를 간단히 만들수 있고 실향될때 메모리의 부담을 줄일수 있다는 장점이 있다.
날짜를 String, Number, Boolean 등 다양한 형태로 변환 하는것이 가능하다.
Number 타입의 경우 단순한 숫자값이 아니라 getTime 메서드를 활용한 것과 똑같은 수치이다. 즉 객체끼리 사칙연산도 가능하다는 것을 뜻한다.
날짜 간의 사칙연산을 통해 객체들 사이의 시간차이를 확인할 수 있다.
날짜를 표현하는 방식은 다양하다. 하지만 이런 방식을 사용하다보면 컴퓨터를 사용하는 위치의 시간대에 따라 다른 결과 값이 나올수도 있다.
IETF 호환 RFC 2822 타임스탬프와 ISO8601의 한 버전의 형식을 준수하는 문자열로 Date객체를 생성하는 것을 권장한다.
더 많은 내용이 알고싶다면
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
일수의 차이를 구하는 문제이다. 아래의 코드로 해결이 가능했다.
let today = new Date(2112, 8, 24);
let jaeSangStart = new Date(2109, 7, 1);
let timeDiff = today.getTime() - jaeSangStart.getTime();
let secondDiff = timeDiff / 1000;
let minuteDiff = secondDiff / 60;
let hourDiff = minuteDiff / 60;
let dayDiff = hourDiff / 24;
console.log(오늘은 입사한 지 ${dayDiff}일째 되는 날 입니다.);
오늘 공부는 여기까지!
할수 있는 만큼! 대신 꾸준히 나아가는 개발자가 되겠다.😊
