javascript in udemy #17 ~ #24

#17 String(+ 템플릿 리터럴)

const firstName = 'jonas';

const jonas = firstName + 'is old';
// ES6에서 템플릿 리터럴 기능이 추가됬다. 백틱을 사용한다. ${} 이것도 사용한다.
const jonasNew = `${jonas} is old`

이 두가지는 똑같은 결과가 나온다.

console.log('String \n\
multiple \n\
lines');

>> 한줄로 만들면서 같은 결과를 내고 싶으면 아래와 같이 하면된다. 코드내에서
줄바꿈도 하면서 출력되는 내용에도 줄바꿈이 되야한다면 위와 같이 한다.
그런데 이렇게 되는구나만 이해하고 우리는 템플릿 리터럴에 집중하자.
console.log('String \n multiple \n lines');

console.log(`String
multiple
lines`);

줄바꿈은 이렇게 3가지 방법으로 할 수 있다.

 

 

#18 if / else 문

18세 이상이면 운전이 가능하다라는 조건문을 만든다.
const age = 15;
if(age >= 18;) {
	console.log('Sarah can start driving license👌')	
} else {
	const yearsLeft = 18 - age;
	console.log(`Sarah is too young, wait another ${yearsLeft} years`);
}

이모지를 사용하는 방법은 window키를 누르고 . 를 누른다. 맥북에서는 CMD+CTRL+space

전역변수와 지역변수를 이용해서 마지막에 console.log로 출력해보자.

const birthYear = 2012;

let century;
if(birthYear <= 2000) {
	century = 20;
} else {
	century = 21;
}
console.log(century);

 

 

#19 코딩과제 #2

//BMI FORMULA
function BMI(mass, height) {
    const BMI = mass / height ** 2;
    return BMI;
}

// BMI Comparison
let marksBMI;
let johnBMI;

/* ---------- date1 ----------- */
//marks
marksBMI = BMI(78, 1.69);
console.log('marks BMI : ' + marksBMI);
//john
johnBMI = BMI(92, 1.95);
console.log('john BMI : ' + johnBMI);


/* ---------- date2 ----------- */
//marks
marksBMI = BMI(95, 1.88);
console.log('marks BMI : ' + marksBMI);
//john
johnBMI = BMI(85, 1.76);
console.log('john BMI : ' + johnBMI);

if(marksBMI > johnBMI) {
    console.log(`Mark's BMI is higher than John's!`);
} else {
    console.log(`John's BMI is higher than Mark's!`);
}

 

 

#20 유형 변환 및 강제 변환

const inputYear = '1991';
console.log(Number(inputYear), inputYear); // 보라색 1991  빨간색 "1991"
console.log(inputYear + 18); // 흰색 199118
console.log(Number(inputYear) + 18); // 보라색 2009

console.log(Number('Jonas')) // NaN

console.log(String(23), 23); // 23 23 << 이렇게 나오지만 앞에 23은 문자열이라서
//브라우저 콘솔에서 흰색 23이 나오고 뒤에 23은 숫자라서 보라색이 나온다.

console.log('I am' + 23 + 'years old') // +는 숫자를 문자열로 변환해줘서 하얀색 문자열이 탄생한다.
console.log('23' - '10' - 3); // -는 문자열을 숫자로 만들어준다. 반대로는 안된다.
console.log('23' * '2'); // 숫자 46이 나온다. 나눗셈도 마찬가지.
console.log('23' > '17'); // true가 나온다. 자동으로 숫자로 연산된 것이다.

console.log(2+3+4+'5') // 문자열95가 나온다.
console.log('10'-'4'-'3'-2+'5') // 문자열 15. 왜나하면 -부분이 들어가는 부분은 다 숫자로 계산되서
// 1이되고 마지막 5 문자열과 합쳐져서 문자열 15가 나온다.

브라우저에서 숫자는 보라색, 문자열은 흰색으로 나온다.

이런 강제변환들은 버그를 불러온다. 그래서 이런걸 미리 알고있다면 오류를 방지할 수 있다.

 

 

#21 진실, 거짓된 가치

console.log(Boolean(0)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('Jonas')); // true
console.log(Boolean({})); // true
console.log(Boolean('')); // false

let height;
if(height) {
	console.log('height is defined');
} else {
	console.log('undefined');
}
// undefined

falsy value에 대해서 배웠다. 거짓 값.

 

 

#22 동등연산자. ==, ===

'18' == 18 // true. 문자열18이 숫자 18로 변환된다.
'18' === 18 // false. 타입 변환이 되지 않는다.

===는 완전 항등 연산자다. 유형이 달라도 안되고 완전 동일해야 한다.

항상 === 을 사용하자. 일반적으로 그게 맞다. 대부분 개발자들이 이렇게 권장한다.

값 변환이 필요하다면 수동으로 변환하는 것이 좋다. == 에 의존하지 말자.

강의에서 ==는 존재하지 않는다고 가정하고 강좌를 할 것이다.

const favourite = prompt("what's your favourite number?");
//이렇게하면 브라우저에 입력하는 창이뜨고 값을 입력한다. 예를들어 23을 입력했다면
// 23의 숫자가 아닌 문자열이  변수 favourite으로 들어간다. 확인을 해보면
console.log(typeof favourite); // String이 나온다.

if(favourite === 23) {
	console.log('good');
}
// 이 문장을 실행하려면 어떻게 바꿔야 할까? prompt 부분에서 받을 때
// prompt 받는 부분을 number로 바꾼다.

const favourite = Number(prompt("what's your favourite number?"));

if(favourite === 23) {
	console.log('number 23!');
} else if(favourite === 7) {
	console.log('number 7!');
} else {
	console.log(number is not 23 or 7')
}

===의 반대로는 ! == 이 있다.

 

 

#23 AND, OR, NOT

AND, OR에 대해서 그리고 NOT(!)에 대해서 설명했다.

아는 내용이기 때문에 쭉 훑고 넘어간다.

 

 

#24 논리연산자

const hasLicense = true;
const hasVision = true;

console.log(hasLicense && hasVision); // true
console.log(hasLicense || hasVision); // false
console.log(!hasLicense) // false

//이제 세개로 해볼까?
const isTired = false; // 사라가 피곤하지 않다.

if(hasLicense && hasVision && !isTired) {
	console.log('Sarah is able to Drive'); // 사라가 운전해도 된다.
} else {
	console.log('someone else should drive');
}