🦁_21.11.29 TIL

21년 11월 29일

읽어보기

• JavaScript는 세상에서 제일 잘못 이해되고 있는 언어이다
• 콘솔 모드에서 let 변수만 재선언이 되는 이유

📝 Javascript

출력방법 4가지

window.console.log("hello world");
document.write("hello world");
window.alert("hello world");
document.body.innerHTML = "hello world";

window와 document의 차이점

• window 객체는 브라우저 탭에 존재하는 자바스크립트 전역 최상위 객체
• window 객체 안에 document 객체가 존재하고, document 잠재적으로 보여질 수 있는 DOM에 대한 정보가 저장되어 있다.
  자바스크립트 Window / Document 무슨 차이일까?
  

속성 접근자(Property accessors)

• 점(.) 또는 괄호([]) 표기법으로 객체의 속성에 접근할 수 있도록 한다.

object.property
object['property']

속성 접근자 - MDN

console

• console 객체는 브라우저의 디버깅 콘솔(Firefox 웹 콘솔 등)에 접근할 수 있는 메서드를 제공
• 자주 사용하는 메서드
  • console.log() : 일반 메시지를 출력
  • console.dir() : 주어진 JavaScript 객체의 속성 목록을 상호작용 가능한 형태로 표시
  • console.error() : 오류 메시지를 출력
  • console.table() : 표 형태의 데이터를 표에 그림
    

📎 Javascript의 연산

산술 연산자

사칙연산을 다루는 가장 기본적이면서도 많이 사용하는 연산자
=> 왼쪽 값에 오른쪽 값을 연산

• + : 덧셈
• - : 뺄셈
• * : 곱셈
• ** : 제곱
• / : 나눗셈의 몫
• % : 나눗셈의 나머지

a = a + b일 경우, 왜 a = a가 먼저 연산되지 않고 a + b가 먼저 연산이 되나요?

• 연산자 우선순위 - MDN

우선순위를 외워두는 것이 좋을까요?

• 괄호를 사용하세요.
• 실무에서 상대방이 우선순위를 알든 모르든 상대방이 코드를 읽기 쉽게 작성해야한다.
  => 하지만 회사의 컨벤션에 따라 달라질 수 있습니다.

그렇다면 큰 프로젝트에서는 좋지 못한 코드가 되지 않을까요? 유지보수도 어려울 것 같아요.

• 유지보수 측면에서도 복잡한 것보다 보고 이해하기 쉬운 코드가 더 좋을 것 같아요.

할당(대입) 연산자

• += : 덧셈 후 할당
  a += 4 == a = a + 4
• -= : 뺄셈 할당
• *= : 곱셈 할당
• /= : 나눗셈 할당

증감 연산자

• ++x : 먼저 피연산자의 값을 1 증가시킨 후에 해당 연산을 진행
• x++ : 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 증가
• --x : 먼저 피연산자의 값을 1 감소시킨 후에 해당 연산을 진행
• x-- : 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 감소

비교 연산자

비교 연산자는 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환

• == : 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환
• ===(Strict equality) : 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환
• != : 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환
• !==(Strict-non-equality) : 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환
• < : 작다
• <= : 작거나 같다
• > : 크다
• >= : 크거나 같다

논리 연산자

논리 연산자는 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환

• && : 논리 AND 연산
• || : 논리 OR 연산
• ! : 논리 NOT 연산

typeof 연산자

변수의 데이터 타입을 반환하는 연산자
=> 작성중입니다:)

타입의 형 변환

=> 작성중입니다:)

📎 조건문

• 조건이 참(true)인지 거짓(false)인지에 따라 코드를 수행 여부를 판단

if 문

• 조건이 참이면 코드를 실행, 거짓이면 실행하지 않음

if (조건) {
  // 조건이 참일 경우 실행할 코드
}

if-else 문

• if문 내의 조건이 참이면 if 블록 내의 코드를 실행, 거짓일 경우 else 블록 내의 코드를 실행

// if-else 문
if (조건) {
  // 조건이 참일 경우 실행할 코드
} else {
  // 조건이 거짓일 경우 실행할 코드
}

else if 문

• else if 문을 이용해서 다양한 조건을 설정할 수 있다.
• 중첩된 if문을 좀 더 간결하게 표현 가능

if (조건1) {
  // 조건1이 참일 경우 실행할 코드
} else if (조건 2) {
  // 조건2가 참일 경우 실행할 코드
} else if (조건 3) {
  // 조건3이 참일 경우 실행할 코드
} else { 
  // 위의 조건에 전부 거짓일 경우 실행할 코드
}

삼항 연산자

// 표현식이 참이면 반환값1, 거짓이면 반환값2
표현식 ? 반환값1 : 반환값2

삼항 연산자 대체 용법

true && '완료' || '미완료';

• 삼항 연산자나 이러한 대체 용법은 가독성이 떨어진다.
  => 실무에서는 주의해서 사용하기
• 주석 없이도 읽을 수 있는 코드를 지향

switch 문

• if-else문과 마찬가지로 주어진 조건 값에 따라 프로그램이 다른 명령을 수행할 수 있도록 하는 조건문
• default절은 조건 값이 위에 나열된 어떠한 case절에도 해당하지 않을 때 실행

switch (조건 값) {
  case 값1:
    조건 값이 값1일 때 실행하고자 하는 실행문;
    break;
  case 값2:
    조건 값이 값2일 때 실행하고자 하는 실행문;
    break;
    ...
  default:
    조건 값이 어떠한 case 절에도 해당하지 않을 때 실행하고자 하는 실행문;
    break;
}

📎 반복문

• 반복문 : 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문

for문

• 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문

for (초기식; 표현식; 증감식) {
 표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문; 
}

// 무한루프
for (;;) { ... }

// 구구단 
for (let i = 2; i < 10; i++) {
  for (let j = 1; j < 10; j++) {
    console.log(`${i} X ${j} = ${i * j}`);
  }
}
// 출력 결과
// 2 X 1 = 2
// 2 X 2 = 4
// 2 X 3 = 6
// ...
// 2 X 9 = 18
// ...
// 9 X 9 = 81

참고링크

• TCP SCHOOL - 자바스크립트

---

마무리

• 점점 생각이 많아지는 기분이다? 하하하
  => 단순하게 생각해보기로 한다
• 타자를 빠르게 치도록 의식해야겠다.
• 카페에서 커피를 쏟았다
  => 쏟은 커피 닦느라 정신이 없었다.
  => 다행히 노트북은 전혀 피해가 없는... 휴
• 주문한 책... 오늘 도착할 줄 알았는데 감감무소식
  => 내일은 오겠지 예에에에에-