22.11.14 월
DAY 1 - javascript (기초다지기)
계속 느끼고있던, 기본기 부족를 이제서야 제대로 되짚어보게되었다.
아는 부분은 훑고 넘어가고, 헷갈리거나 중요한부분은 따로 정리!!
📌 자바스크립트의 8가지 자료형
- 숫자형(number type) : 정수 및 부동소수점 숫자
NaN: 계산 중에 에러가 발생했다는 것을 나타내주는 값,
부정확하거나 정의되지 않은 수학 연산을 사용해 계산 하면 에러가 난다.
- BigInt : 길이에 상관없이 정수를 나타낼 수 있고, 리터럴 끝에 n을 붙이면 만들 수 있다.
(암호 관련 작업같이 아주 ㅅ큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업해야 할때 사용) - 문자열(string) : 따옴표로 묶인 문자열
- 불린형(논리타입) : true 와 false 두 가지로 표현
- true는 긍정, false는 부정
- null 값 : null은 오직 null만 포함
- undifined 값 : 값이 할당되지 않은 상태, 오직 자신만의 자료형을 형성
- 객체형(object) : 다양한 데이터를 담을 수 있음
객체형을 제외한 다른 자료형은 문자열이든 숫자든 한가지만 표현 할 수있기 때문에 원시 자료형(primitive)이라고 한다. - 심볼형(symbol) : 객체의 고유한 식별자(unique indentifier)를 만들 때 사용
// typeof() 연산자는 인수의 자료형을 반환해준다.
📌 연산자
평소에 쓰던 것 말고, 생소한 연산자를 가져왔다
1. 거듭제곱 연산자 **
a ** b 는 a를 b번 곱한다는 뜻이다.
+를 이용해 숫자형으로 변환
let apples = "2";
let oranges = "3";
console.log(+apples + +oranges) // 5
// 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 변화한다.- 증가 감소 연산자
✔️ 증감연산자는 변수에만 사용 가능
let counter = 2;
counter++ // 2
++counter // 4📖 풀어보기
✏️ 전위형과 후위형
a , b , c , d ?
let a = 1, b = 1;
let c = ++a; // ?
let d = b++; // ?
a = 2, b =2, c = 2, d = 1✏️ 형 변환
"" + 1 + 0 // "10"
// `""+1` : 문자열로 변환
"" - 1 + 0 // -1
// `-`는 숫자자형만을 인수로 받는다.
true + false // 1
6 / "3" // 2
"2" * "3" // 6
4 + 5 + "px" // 9px
"$" + 4 + 5 // $45
"4" - 2 // 2
"4px" - 2 // NaN
7 / 0 // Infinity
" -9 " + 5 // -9 5
" -9 " - 5 // -14
// 뺄셈 연산자는 인수를 숫자형으로 변환
// `"-9"`는 숫자 -9로 변한다.
null + 1 // 1
undefined + 1 // NaN
// undefined는 숫자형으로 변환시 NaN가 된다.
" \t \n" - 2 // -2
// \t \n 공백을 나타내서, 그냥 공백이 된다.💬 생각보다 형변환을 많이 놓치고 있던 거 같아서 깜짝 놀랬다.
타입스크립트를 하려면 자료형에 대해 잘 알고있어야 했는데,
다시 돌아볼 수 있는 기회가 되어서 많은 도움이 되었다.
📌 비교연산자
- 비교 연산자는 불린값을 반환
- 문자열은 문자 단위로 비교되는데, 이때 비교 기준은 '사전순'
- 서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행
null과undefined는 동등 비교(==)시 서로 같지만 다른 값과는 같지 않습니다.null이나undefined가 될 확률이 있는 변수가 > 또는 < 의 피연산자로 올 때는 주의 하자
📖 풀어보기
✏️ 비교
5 > 4 // true
"apple" > "pineapple" // false
// 사전순이면, p가 더 크다.
"2" > "12" // true
// 2와 1의 비교라, true
undefined == null // true
undefined === null // false
// `===`는 형도 체크!
null == "\n0\n" // false
null === +"\n0\n" // false✔️ === 일치 연산자는 형도 체크한다!!
💬 그냥 넘어갔던 부분을 다시 체크했다.
몰랐던 사실도 알게 되었다!
📌 if 와 '?'
📖 풀어보기
✏️ if와 문자열 0
아래 코드에서 alert은 실행될까요?
if ("0") {
alert( 'Hello' );
}➡️ yes!
모든 문자열은 true 를 반환
📌 논리 연산자
✔️ &&의 우선순위가 ||보다 높습니다.
AND 연산자 &&의 우선순위는 OR 연산자 ||보다 높습니다.
따라서 a && b || c && d는 (a && b) || (c && d)와 동일하게 동작합니다.
📖 풀어보기
✏️ AND 연산의 결과는 무엇일까요?
alert( 1 && null && 2 );
// null 출력
// 첫번째 falsy가 출력된다.alert( alert(1) && alert(2) );
// 1 출력 후 undefined 출력➡️ alert 를 호출하면 undefined가 반환
alert는 단순히 얼럿 창에 메세지만 띄어주고, 의미 있는 값을 반환하지 않는다.
그러니까, 1을 출력하고 1을 출력 후 결과가 undefied이기 때문에 undefined를 띄우고 종료
✏️ OR AND OR 연산자
alert( null || 2 && 3 || 4 );
// 3 출력➡️ &&연산자의 우선순위로, 2 && 3 은 3이기때문에, 3 출력 후 종료
💬 제대로 알고있던게 맞나 싶을 정도로, 헷갈렸다....
📌 while과 for반복문
while: 각 반복이 시작하기 전에 조건을 확인do..while: 각 반복이 끝난 후에 조건을 확인for(;;): 각 반복이 시작하기 전에 조건을 확인, 추가 세팅 가능
📖 풀어보기
✏️ while 반복문의 출력값 예상하기
- 전위형 증가 연산자를 사용한 경우(++i)
let i = 0;
while (++i < 5) alert( i );// 1, 2, 3, 4
➡️ 먼저 증가 시키고 비교, 1부터 비교하고 1을 출력
- 후위형 증가 연산자를 사용한 경우(i++)
let i = 0;
while (i++ < 5) alert( i );// 1, 2, 3, 4, 5
➡️ 증가 전 0 부터 비교 시키고, 1을 출력
결국 4를 비교시키고, 5까지 출력시킨다.
✏️ for 반복문의 출력값 예상하기
- 후위형 증가 연산자를 사용한 경우(i++):
for (let i = 0; i < 5; i++) alert( i );- 전위형 증가 연산자를 사용한 경우(++i):
for (let i = 0; i < 5; ++i) alert( i );// 둘 다 0부터 4까지 출력
0부터 비교, 0이 5보다 작으면 alert에 0을 띄운 후, 1을 더하기 때문에
후위형이나 전위형이나 일치한 결과 값이 나온다.
✏️ 'for' 반복문을 'while' 반복문으로 바꾸기
for (let i = 0; i < 3; i++) {
alert( `number ${i}!` );
}➡️
let i = 0;
while ( i < 3) {
alert(`number ${i}!`);
i++
}변수 i 에 0을 할당 시키고,
i 가 3보다 작을때, alert 창을 띄운후,
i를 증가시킨다.
✏️ 사용자가 유효한 값을 입력 할때까지 프롬프트 창 띄우기
let num;
do {
num = prompt("100을 초과하는 숫자를 입력해주세요.",0
} while (num <= 100 && num);두 조건이 모두 truthy인 경우 프롬프트 창이 뜨게 한다.
num이 100보다 작거나, num이 null이면 프롬프트 창이 계속 나와야한다.
📌 switch문
복수의 if 조건문은 switch문으로 바꿀 수 있다.
문법
swith문은 하나 이상의 case문으로 구성
첫번째 case문의 값과 일치 비교후, 두번째 case 값과 일치비교
해당
일치하는 값을 찾으면 해당 case문의 아래 코드가 실행된다.
break문을 만나거나, switch문이 끝나면 코드의 실행은 멈춘다.
📖 풀어보기
✏️ 'switch'문을 'if'문으로 변환하기
switch (browser) {
case 'Edge':
alert( "Edge를 사용하고 계시네요!" );
break;
case 'Chrome':
case 'Firefox':
case 'Safari':
case 'Opera':
alert( '저희 서비스가 지원하는 브라우저를 사용하고 계시네요.' );
break;
default:
alert( '현재 페이지가 괜찮아 보이길 바랍니다!' );
}➡️
if (browser === 'Edge')
alert("Edge를 사용하고 계시네요!")
else if (browser === 'Chrome' ||browser === 'Firefox' || browser === 'Safari' || browser === 'Opera') {
alert("저희 서비그가 지원하는 브라우저를 사용하고 계시네요.")}
else {
alert("현재 페이지가 괜찮아 보이길 바랍니다!")
}✏️ 'if'문을 'switch'문으로 변환하기
let a = +prompt('a?', '');
if (a == 0) {
alert( 0 );
}
if (a == 1) {
alert( 1 );
}
if (a == 2 || a == 3) {
alert( '2,3' );
}➡️
let a = +prompt('a?', '');
switch (a)
case 0:
alert(0)
break;
case 1:
alert(1)
break;
case 2:
case 3:
alert('2,3')
break;
// break 걸어주는걸 까먹었다.
// 조건이 해당하면 결과 나오고 끝이니까
// break!!
💬 오늘의 느낀점
안다고 넘어가서 놓칠 부분이 많았던 거 같다.
차근차근 다시 배웠던걸 상기시키면서 이제 까먹지 말고 꼭 기억하고 자유롭게 쓸 수 있도록 하자!
