2023.01.30
0. 시작하기전
오늘은 타입변환과 단축평가, 객체 리터럴에 관해 공부해보자 !
1. 타입 변환과 단축 평가
1-1 타입 변환이란?
값의 타입은 개발자의 의도에 다라 다른 타입으로 변환 할 수 있다.
❓ 타입변환이란? - 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성
✔ 암묵적 타입 변환(타입 강제 변환) = 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환
✔ 명시적 타입 변환(타입 캐스팅) = 개발자가 의도적으로 값의 타입을 변환
1-2 암묵적 타입 변환
✔ 문자열 타입으로 변환(pg.111)
0+'' // 숫자타입 ->"0"
true + '' // 불리언 타입 ->"true"
null + '' // null 타입 ->"null"
undefined + '' // undefined 타입 ->"undefined"
(Symbol()) + '' // typeerror
[] + '' // 객체타입 => ""✔ 숫자 타입으로 변환(pg.112)
산술연산자, 비교 연산자, +단항 연산자
✔ 불리언 타입으로 변환
false로 평가되는 값 = false, undefined, null, 0, -0, NaN, ''(빈문자열)
위를 제외한 나머지는 true 값
1-3 명시적 타입 변환
✔ 문자열 타입으로 변환
1. String 생성자 함수를 new 연산자 없이 호출
2. Object.Prototype.toString 메서드를 사용
3. 문자열 연결 연산자 사용
// 1번
String(1); //숫자->문자 "1"
String(true); //불리언->문자 "true"
// 2번
(1).toString(); //숫자->문자 "1"
(NaN).toString(); //숫자->문자 "NaN"
(false).toString(); //불리언->문자 "false"
// 3번
1 + ''; //숫자->문자 "1"
Infinity + ''; //숫자->문자 "Infinity"
true + ''; //불리언->문자 "true"✔ 숫자 타입으로 변환
1. Number 생성자 함수를 new 연산자 없이 호출
2. parseInt, parseFloat 함수를 사용(문자열만 숫자타입으로 변환 가능)
3. + 단항 산술 연산자
4. * 산술 연산자
// 1번
Number('0'); //문자->숫자 0
Number(true); //불리언->숫자 1
// 2번
parseInt('-1'); //문자->숫자 -1
parseFloat('10.53'); //문자->숫자 10.53
// 3번
+'0'; //문자->숫자 0
+'-1'; //문자->숫자 -1
+false; //불리언->숫자 0
// 4번
'0' * 1; //문자->숫자 0
'10.53' * 1; //문자->숫자 10.53
true * 1; //불리언->숫자 1✔ 불리언 타입으로 변환
1. Boolean 생성자 함수를 new 연산자 없이 호출
2. ! 부정 논리 연산자를 두 번 사용
// 1번
Boolean('x'); //문자->불리언 true
Boolean(''); //문자->불리언 false
Boolean(0); //숫자->불리언 false
Boolean(null); //null->불리언 false
Boolean(undefined); //undefined->불리언 false
Boolean({}); //객체->불리언 true
// 2번
!!'x'; //문자->불리언 true
!!'false'; //문자->불리언 true
!!1; //숫자->불리언 true
!!NaN; //숫자->불리언 false
!!Infinity; //숫자->불리언 true
!!null; //null->불리언 false
!!undefined; //undefined->불리언 false
!![]; //객체->불리언 true1-4 단축평가
✔ 논리 연산자를 사용
1. true || anything = true
2. false || anything = anything
3. true && anything = anything
4. false && anything = false
✔ 옵셔널 체이닝 연산자(?.) - 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항 프로퍼티 참조
var elem = null;
var value = elem?.value;
console.log(value); //undefined✔ null 병합 연산자(??) - 좌항의 피연산가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자 반환
변수에 기본값을 설정할 때 유용
var foo = null ?? 'default string';
console.log(foo); //"default string"2. 객체 리터럴
2-1 객체란?
✔ 객체 = 변경 가능한 값
✔ 프로퍼티 = 객체의 상태를 나타내는 값
✔ 메서드 = 프로퍼티를 참조하고 조작할 수 있는 동작
✔ 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성
var counter = {
num: 0, //프로퍼티 num=프로퍼티 키, 0=프로퍼티 값
increase:function(){//메서드
this.num++;
}
}2-2 객체 리터럴에 의한 객체 생성
✔ 객체 리터럴은 가장 일반적인 객체 생성 방법
✔ 중괄호{...}내에 0개 이상의 프로퍼티 정의
✔ 객체 리터럴의 끝은 세미클론(;)
✔ 객체 리터럴 외의 객체 생성 방식은 모두 함수를 사용
2-3 프로퍼티
✔ 프로퍼티 키 = 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
✔ 프로퍼티 값 = 자바스크립트에서 사용할 수 있는 모든 값
✔ 프로퍼티를 나열할 때는 쉼표로 구분
✔ 프로퍼티 접근
1. 마침표 표기법
2. 대괄호 표기법 - 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감산 문자열이어야 함
var person = {
name: 'Lee'
}
console.log(person.name); //1번 Lee
console.log([person['name']); //2번 Lee
person.name = 'Kim'; //프로퍼티 값 갱신
console.log(person); // {name: "Kim"}
person.age = 20; //프로퍼티 동적 생성
delete person.age; //프로퍼티 삭제2-4 메서드
✔ 객체에 묶여있는 함수
3. To be continued..
다음에는 함수, 스코프, 전역 변수의 문제점, let,const 키워드와 블록 레벨 스코프에 관해 공부해보자 :)
이전 포스트 JavaScript-2 https://velog.io/@jiyoon2/JavaScript-2
다음 포스트 JavaScript-4
