[TIL] 210902
📝 오늘 한 것
-
javascript 기초 학습
-
github에 TIL 폴더 만들기
TIL / javascript 안에 학습 노트 commit & push
📖 학습 자료
-
드림코딩 유튜브 '자바스크립트 기초 강의' (4편)
-
사전 학습 가이드 step 2 (logical operators ~ loops)
📚 배운 것
1. 논리 연산자(logical operators)
🔎 본격 학습 전에 기억할 것!
- false로 변환되는 값 :
0 | -0 | false | undefined | null | NaN | "" | '' | ``
- true로 변환되는 값 : 그 외의 값 모두
1) ||
(or)
-
shift + \
를 2번 누르면 ||
이 입력된다.
-
value(값 그 자체)
, expression(표현식)
, function(함수)
등 피연산자들 중 하나라도
true로 변환되는 값이 있으면 console 창에 그 피연산자 값
를 반환한다. 반드시 boolean 값(true/false)을 반환하는 것은 아니다.
-
왼쪽부터 truthy 값을 찾고, 찾은 경우 그 즉시 연산을 중지하고 바로 해당 피연산자 값을 보여준다. 마지막까지 찾지 못한 경우에는(모두 falsy인 경우에는) 마지막에 위치한 피연산자 값
를 반환한다.
console.log(true || false); // true → 이때 true는 boolean 값이다
console.log(`or: ${true || false}`); // or: true → 이때 true는 string이다
console.log(`or: ${"hello" || []}`); // or: hello
console.log(`or: ${[] || "hello"}`);
// or: → []는 falsy가 아니므로 hello가 아니라 처음의 공백을 보여줌
console.log(`or: ${(function foo () {}) || "hello"}`);
// or: function foo () {} → 첫 번째 truthy를 찾으면 그 다음은 보지 않고 해당 피연산자를 반환함
console.log(`or: ${false || false}`);
// or: flase → 마지막까지 값을 찾지 못한 경우 마지막에 위치한 값을 반환
console.log(`or: ${false || ""}`);
// or: → 마찬가지로 둘 다 falsy이므로 마지막의 공백을 보여줌
- 위에서는 이해를 위해 피연산자를 순서에 상관없이 적었으나, 원칙은 연산의 효율성을 높이기 위해
value(값 그 자체)
, expression(표현식)
, function(함수)
순서로 적어야 한다.
ex.
const value1 = true;
const value2 = 4 < 2;
console.log(`or: ${value1 || value2 || check()}`);
function check() {
for (let i = 0; i < 10; i++) {
// waiting time
console.log('ㅠㅠ')
}
return true;
}
// or: true
주의 ❕
console 창에 반환되는 값은 value1
이 아니라 true
이다.
javascript 기초 학습
github에 TIL 폴더 만들기
TIL / javascript 안에 학습 노트 commit & push
-
드림코딩 유튜브 '자바스크립트 기초 강의' (4편)
-
사전 학습 가이드 step 2 (logical operators ~ loops)
📚 배운 것
1. 논리 연산자(logical operators)
🔎 본격 학습 전에 기억할 것!
- false로 변환되는 값 :
0 | -0 | false | undefined | null | NaN | "" | '' | ``
- true로 변환되는 값 : 그 외의 값 모두
1) ||
(or)
-
shift + \
를 2번 누르면 ||
이 입력된다.
-
value(값 그 자체)
, expression(표현식)
, function(함수)
등 피연산자들 중 하나라도
true로 변환되는 값이 있으면 console 창에 그 피연산자 값
를 반환한다. 반드시 boolean 값(true/false)을 반환하는 것은 아니다.
-
왼쪽부터 truthy 값을 찾고, 찾은 경우 그 즉시 연산을 중지하고 바로 해당 피연산자 값을 보여준다. 마지막까지 찾지 못한 경우에는(모두 falsy인 경우에는) 마지막에 위치한 피연산자 값
를 반환한다.
console.log(true || false); // true → 이때 true는 boolean 값이다
console.log(`or: ${true || false}`); // or: true → 이때 true는 string이다
console.log(`or: ${"hello" || []}`); // or: hello
console.log(`or: ${[] || "hello"}`);
// or: → []는 falsy가 아니므로 hello가 아니라 처음의 공백을 보여줌
console.log(`or: ${(function foo () {}) || "hello"}`);
// or: function foo () {} → 첫 번째 truthy를 찾으면 그 다음은 보지 않고 해당 피연산자를 반환함
console.log(`or: ${false || false}`);
// or: flase → 마지막까지 값을 찾지 못한 경우 마지막에 위치한 값을 반환
console.log(`or: ${false || ""}`);
// or: → 마찬가지로 둘 다 falsy이므로 마지막의 공백을 보여줌
- 위에서는 이해를 위해 피연산자를 순서에 상관없이 적었으나, 원칙은 연산의 효율성을 높이기 위해
value(값 그 자체)
, expression(표현식)
, function(함수)
순서로 적어야 한다.
ex.
const value1 = true;
const value2 = 4 < 2;
console.log(`or: ${value1 || value2 || check()}`);
function check() {
for (let i = 0; i < 10; i++) {
// waiting time
console.log('ㅠㅠ')
}
return true;
}
// or: true
주의 ❕
console 창에 반환되는 값은 value1
이 아니라 true
이다.
- false로 변환되는 값 :
0 | -0 | false | undefined | null | NaN | "" | '' | ``
- true로 변환되는 값 : 그 외의 값 모두
||
(or)shift + \
를 2번 누르면 ||
이 입력된다.
value(값 그 자체)
, expression(표현식)
, function(함수)
등 피연산자들 중 하나라도
true로 변환되는 값이 있으면 console 창에 그 피연산자 값
를 반환한다. 반드시 boolean 값(true/false)을 반환하는 것은 아니다.
왼쪽부터 truthy 값을 찾고, 찾은 경우 그 즉시 연산을 중지하고 바로 해당 피연산자 값을 보여준다. 마지막까지 찾지 못한 경우에는(모두 falsy인 경우에는) 마지막에 위치한 피연산자 값
를 반환한다.
console.log(true || false); // true → 이때 true는 boolean 값이다
console.log(`or: ${true || false}`); // or: true → 이때 true는 string이다
console.log(`or: ${"hello" || []}`); // or: hello
console.log(`or: ${[] || "hello"}`);
// or: → []는 falsy가 아니므로 hello가 아니라 처음의 공백을 보여줌
console.log(`or: ${(function foo () {}) || "hello"}`);
// or: function foo () {} → 첫 번째 truthy를 찾으면 그 다음은 보지 않고 해당 피연산자를 반환함
console.log(`or: ${false || false}`);
// or: flase → 마지막까지 값을 찾지 못한 경우 마지막에 위치한 값을 반환
console.log(`or: ${false || ""}`);
// or: → 마찬가지로 둘 다 falsy이므로 마지막의 공백을 보여줌
value(값 그 자체)
, expression(표현식)
, function(함수)
순서로 적어야 한다.ex.
const value1 = true;
const value2 = 4 < 2;
console.log(`or: ${value1 || value2 || check()}`);
function check() {
for (let i = 0; i < 10; i++) {
// waiting time
console.log('ㅠㅠ')
}
return true;
}
// or: true
주의 ❕
console 창에 반환되는 값은 value1
이 아니라 true
이다.
한편,
expression(표현식)
- 리터럴, 식별자, 연산자, 함수 호출 등의 조합 - 값을 만들어내는 코드 단위 - 무엇이든 하나의 값을 반환한다
statement(문)
- 무엇인가를 수행하는 코드 단위 - 값을 만들어내지 못한다
2) &&
(and 연산자)
-
value(값 그 자체)
,expression(표현식)
,function(함수)
등 피연산자들전부가
true로 변환되는 값이라면 console 창에 그 중마지막 피연산자 값
를 반환한다. 반드시 boolean 값(true/false)을 반환하는 것은 아니다. -
왼쪽부터 falthy 값을 찾고, 찾은 경우 그 즉시 연산을 중지하고 바로 해당 피연산자 값을 보여준다. 마지막까지 찾지 못한 경우에는(모두 truthy인 경우에는)
마지막에 위치한 피연산자 값
을 반환한다.
console.log(`${"" && "hello"}`); // 공백 → 첫번째 falsy 값을 보여줌 console.log(`${(function foo () {}) && {}}`); // [object Object] → 둘다 truthy이므로 마지막 truthy 값을 보여줌 console.log(`${false && ""}`); // false → 첫번째 falsy 값을 보여줌
- 이를 이용해 and 연산자는
null 체크
에도 많이 쓰인다.
nullableObject && nullableObject.somthing
앞의 피연산자가 null인 경우 이미 false이므로 뒤의 피연산자는 아예 실행되지 않는다. 앞의 피연산자가 null이 아닐 때만 something이라는 값을 받아온다.
이를 코드로 표현하면, (나중에 배울 것!)
if (nullableObject != null) { nullableObject.something; }
3) !
(not 연산자)
- ! 뒤에 오는 값이 true로 변환되는 값일 경우 false를 반환하고, false로 변환되는 값일 경우 true를 반환한다.
console.log(`${!"abc"}`); // false console.log(`${!""}`); // true console.log(!`${Boolean(' '.trim())}`); /* true → 원래는 공백 문자열이라 true인데 trim() 함수로 문자열 양쪽 공백을 제거해서 false가 됐다가 여기에 not 연산자가 붙어서 다시 true가 됨 */
2. 등호(equlity)
1) ==
(loose equality)
-
동등 비교,
값이 같다
-
!=
: 값이 같지 않다
2) ===
(strict equality)
-
일치 비교,
값과 타입이 모두 같다
-
!==
: 값이나 타입이 같지 않다.
const syong1 = {name: 'syong'}; const syong2 = {name: 'syong'}; const syong3 = syong1 console.log(syong1 == syong2); // false → 메모리에 저장되는 reference가 서로 다르다 console.log(syong1 === syong2); // false → 타입이 똑같든 아니든 간에 메모리에 저장되는 reference부터 서로 다르다 console.log(syong1 === syong3); // true → 메모리에 저장되는 reference가 서로 같다
3. 조건문
1) if / else if / else
- 형식
if (/* 조건(참 거짓으로 평가되는 expression) */) {
// 실행문(statement)
}
-
중첩 가능
그러나 여러 개의 else if 중 '단 한 가지'의 조건부 코드만 실행된다.
(∵ else = 아니면~) -
실행 순서
-
if statement
가 true면, {}안의 내용을 실행한다. -
if statement
가 false면, 그 다음else if
로 넘어간다. -
else if statement
가 true면, {} 안의 내용을 실행한다. -
else if statement
가 false면,else
로 넘어가서 {} 안의 내용을 실행한다.
-
const name = 'sysysy'; if (name === 'sy') { console.log('hello'); } else if (name === 'sysy') { console.log('bye'); } else { console.log('unknown'); } // unknown
2) 조건부 삼항 연산자(ternary operator)
-
간단한 경우에만 사용
-
복잡한 경우에는 if나 switch를 사용할 것
const name = 'sysysy'; console.log(name === 'sy' ? 'yes' : 'no'); // no
?
name이 sy 맞으면 yes 출력
:
name이 sy 아니면 no 출력
3) switch 조건문
-
case문 뒤에는 상수 값만 올 수 있다
-
typescript에서 정해져 있는 타입을 검사할 때 사용
const browser = 'chrome'; switch (browser) { case 'IE': console.log('IE'); break; // 뜻 : 현재 조건문을 종료하겠다 case 'firefox': case 'chrome': console.log('firefox or chrome'); break; case 'mozilla': console.log('mozilla'); break; } // firefox or chrome
해석
: browser의 값이 IE이면 console 창에 IE를 보여주고 현재 조건문을 종료하고, browser의 값이 firefox 혹은 chrome이면 console 창에 firefox or chrome을 보여주고 현재 조건문을 종료하고...
4. 반복문(loop)
1) while 반복문
-
while 조건식이 false가 되기 전까지 무한대로 반복해서 실행한다
-
조건이 true여야만 블록을 실행한다
let j = 3; while (j > 0) { console.log(`while: ${j}`); j--; }
2) do while 반복문
-
일단 블록을 먼저 실행하여 출력을 한 후 블록 바깥의 while 조건식이 참인지 거짓인지 검사해서 false가 되면 멈추도록 한다
-
블록을 먼저 실행하고, 조건이 true인지 검사한다
위의 while 반복문 예제와 이어짐
do { console.log(`do while: ${j}`); i--; } while (j > 0)
3) for 반복문
for (① 시작; ② 조건; ④ 단계) {
③ 실행문;
}
- ① ~ ④ 순서대로 진행
- ①에 지역 변수 선언 가능
ex.
for (var i = 1; i < 11; i += 2) { if (i === 7) { break; // 전체 반복문 종료 } console.log(i); } /* 1 3 5 */ for (var i = 1; i < 11; i += 2) { if (i === 7) { continue; // 그 반복문만 종료 } console.log(i); } /* 1 3 5 9 */
과제
var naming = "ken"; // 과제 1) 역순으로 한 글자씩 출력하는 반복문 작성해보세요. for (var i = 2; i > -1; i -= 1) { console.log(naming[i]); } var longText = "0i1a2m3k4e5n"; // 과제 2) 홀수 번째 글자만 출력하는 코드를 작성해보세요. for (var i = 0; i < 12; i += 2) { console.log(longText[i]); }
4) 중첩(nested) 반복문
while과 for 반복문 모두 중첩이 가능하지만, 되도록이면 하지 않도록 한다.
5) break;
VS continue;
-
break;
→ 거기서부터 전체 반복문 종료 -
continue;
→ 해당 반복문만 종료
과제 1) 0부터 10까지 반복하되 짝수만 출력해라 (continue 이용)
for (a = 0; a < 11; a++) { if (a % 2 !== 0) { continue; } console.log(a); }
과제 2) 0부터 10까지 반복하되 8까지 숫자를 출력해라 (break 이용)
for (b = 0; b <11; b++) { if (b === 9) { break; } console.log(b) }
✨ 내일 할 것
-
자바스크립트 20분짜리 강의를 듣고 추가 검색을 통해 더 알아보고 직접 코드를 작성해보고 이해해서 블로그에 정리하기까지 거의 꼬박 하루가 걸렸다. 진도는 하루에 한 편씩 나가는 걸로 전면 수정해야 할 듯.
-
깃허브에도 TIL을 올리기 시작했다. 내일부턴 소제목별로 나눠서 커밋하려고 한다.
-
오래 걸리긴 했어도 배우는 건 걱정했던 것보다 재밌었는데 마지막으로 연습 문제를 풀어보려니까 잘 안 풀린다. 뭐부터 쓰기 시작해야 할지 잘 모르겠다. 문제를 많이 접해봐야 할 거 같다. 복습 필수.
-
결과적으로 내일 해야 할 건 javascript 복습, exercise 해결, '자바스크립트 기초 강의' 5편 수강!
(211010 복습 중)
와 내가 이렇게 생각했었구나. 불과 한달 전인데...아직도 모르는 게 산더미지만, 이제 for 구문은 무섭지 않다! 😁
Author And Source
이 문제에 관하여([TIL] 210902), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@leesyong/TIL-210902
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
자바스크립트 20분짜리 강의를 듣고 추가 검색을 통해 더 알아보고 직접 코드를 작성해보고 이해해서 블로그에 정리하기까지 거의 꼬박 하루가 걸렸다. 진도는 하루에 한 편씩 나가는 걸로 전면 수정해야 할 듯.
깃허브에도 TIL을 올리기 시작했다. 내일부턴 소제목별로 나눠서 커밋하려고 한다.
오래 걸리긴 했어도 배우는 건 걱정했던 것보다 재밌었는데 마지막으로 연습 문제를 풀어보려니까 잘 안 풀린다. 뭐부터 쓰기 시작해야 할지 잘 모르겠다. 문제를 많이 접해봐야 할 거 같다. 복습 필수.
결과적으로 내일 해야 할 건 javascript 복습, exercise 해결, '자바스크립트 기초 강의' 5편 수강!
(211010 복습 중)
와 내가 이렇게 생각했었구나. 불과 한달 전인데...아직도 모르는 게 산더미지만, 이제 for 구문은 무섭지 않다! 😁
Author And Source
이 문제에 관하여([TIL] 210902), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leesyong/TIL-210902저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)