📝 오늘 한 것

1. javascript 기초 학습

2. github에 TIL 폴더 만들기
   TIL / javascript 안에 학습 노트 commit & push

📖 학습 자료

1. 드림코딩 유튜브 '자바스크립트 기초 강의' (4편)

2. 사전 학습 가이드 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이다.

한편,

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)
}

✨ 내일 할 것

1. 자바스크립트 20분짜리 강의를 듣고 추가 검색을 통해 더 알아보고 직접 코드를 작성해보고 이해해서 블로그에 정리하기까지 거의 꼬박 하루가 걸렸다. 진도는 하루에 한 편씩 나가는 걸로 전면 수정해야 할 듯.

2. 깃허브에도 TIL을 올리기 시작했다. 내일부턴 소제목별로 나눠서 커밋하려고 한다.

3. 오래 걸리긴 했어도 배우는 건 걱정했던 것보다 재밌었는데 마지막으로 연습 문제를 풀어보려니까 잘 안 풀린다. 뭐부터 쓰기 시작해야 할지 잘 모르겠다. 문제를 많이 접해봐야 할 거 같다. 복습 필수.

4. 결과적으로 내일 해야 할 건 javascript 복습, exercise 해결, '자바스크립트 기초 강의' 5편 수강!

   (211010 복습 중)
   와 내가 이렇게 생각했었구나. 불과 한달 전인데...아직도 모르는 게 산더미지만, 이제 for 구문은 무섭지 않다! 😁