컴파일 필요 X

Interpreter language

섹션 1. 자바스크립트의 기본적인 사용

콘솔 활용하기

• Console = 입출력창
• console....
  • log~= printf
  • warn 경고
  • error 에러
• 쉼표로 구분하여 원하는 내용 (다른 타입이라도) 출력 가능

주석과 세미콜론

• 콘솔 창에 주석이 포함된 코드를 실행시키면 주석을 제외한 부분의 결과 화면이 출력됨
• 주석 처리 //
• 세미콜론 ; 없어도 Js는 실행 가능함

그러나 있는 게 더 정석적이고 예외적인 상황에서 발생하는 오류를 막아주므로 강의 내용에서는 사용할 예정

변수와 상수

== 데이터를 담는 주머니

• const vs. let

const: 상수

let: 변수

• var을 사용하지 않는 이유

1. 같은 이름의 변수를 중복해서 선언해도 정상적으로 동작함
2. “Hoisting” 호이스팅: 실행 전에 변수와 함수를 미리 실행시킴, 즉 정의된 함수가 실행 시점보다 이전에 동작함
3. 등의 이유

⇒ 변수의 이름을 비슷하게 쓰는 개발자들 사이에서 내 코드가 다른 개발자에게 영향을 주지 않으려면 코드 간의 결합도를 낮춰야 함

섹션 2. 자료형과 연산자

자료형 - 데이터의 종류

• typeof 연산자:

뒤에 오는 값의 자료형을 반환 return

• Primitive data types
  • boolean
  • number
    • Js에서는 정수, 실수의 차이가 없음 2^53-1
    • 더 큰 상수들은 BigInt 속성 사용
  • string
    • "" '' ```` 로 둘러쌓인 0개 이상의 글자(들)
    • 유니코드 문자 - 전 세계 모든 문자
  • undefined
    • 값이 부여되지 않았을 때 undefined라는 값이 있음
    • 초기값 설정이 되지 않았을 경우
    • console.log(아무거나) 를 실행하면 밑에 undefined 가 항상 뜨는 이유도 함수 자체의 반환값이 없기 때문
  • null
    • 의도적인 빈 값
    • object 등이 들어있거나 반환되어야 하지만 없을 때
• Reference data types

자료형과 정적, 동적 타입

문자열(string) - 텍스트 데이터

문자열에 사용되는 연산자

• true나 false를 반환
• == 값이 같다
• === 값도 같고 자료형도 같다
• != 값이 다르다
• !== 값 또는 자료형이 다르다
• x < y 사전순상 x가 먼저 온다
• <= > >=

// 대문자는 소문자보다 먼저 온다

• 주의할 부분 ‘100’ 과 ‘12’ 를 비교 문자 100과 12를 비교 → 10이 12보다 먼저 와서 100이 사전순 상 먼저다 숫자와 문자열 비교하면 숫자로 비교됨
  

숫자(Number)와 관련 연산자

• 무한대

x = 1/0

무한대에는 양음 존재 e.g..) -1/0

z = Infinity

• Not a Number

숫자가 아닌 것과 연산할 때

NaN - 양음 없음

• isNaN과 Number.isNaN
  • isNaN: 숫자 아니다 싶으면 무조건 true
  • Number.isNaN: 숫자 자료형인 주제에 숫자가 아니어야만 true 반환 → 즉 문자열은 false인데 문자열과 숫자를 연산한 값은 true
• 산술 연산자
• ** 제곱
• 문자열 숫자로 바꿈
  • 숫자로 바꿀 수 있는 문자열에 +/- 붙이면 반영됨
  • 바꿀 수 없는 문자열 abc 같은 것은 안됨

부동소수점과 실수계산 오차

• 예전에 유튜브에서 본 내용!!
• 부동 소수점 개념 생각해보면 당연한 일
• 정확한 계산 위해서는 라이브러리 사람

불리언(boolean)과 관련 연산자

• ! 부정 연산자
  • 여러 개 붙일 수도 있음
  • typeof가 undefined 여도 논리 연산 시 확실한 true/false 값을 가지도록 하기 위함
• 단축평가 short circuit
  • && 앞의 것이 false면 뒤의 것 평가 X
  • || 앞의 것이 true면 뒤의 것 평가 X

연산자 마무리

객체와 배열 미리보기

원시 타입 vs 참조 타입

섹션 3 제어문

블록문과 스코프

• 스코프 체인
  • stack: FILO
  • 가장 가까운 블록 안이 우선순위 가장 높다고 이해
  • 메모리 관점에서 이해

    • 전역 변수/상수

      데이터 영역에 위치

      누구나 access 가능

    • 스택

      블록 안에 선언된 변수

      맨 마지막에 들어온 게 가장 먼저 나가는 상황

      결국 마지막에는 전역 스코프의 변수/상수가 남아있음

      ⇒ 즉, 전역변수가 많으면 그만큼 차지하는 공간도 많아지고 프로그램 전체적으로 영향을 줄 수 있는 어떤 변수가 자꾸 변하는 거니까 이 부분이 알 수 없는 오류의 원인이 되기도 함

if / else

• if / else 가 많아지면 가독성이 안 좋아짐
• 이때 필요한 것: 함수 조건문 하나마다 리턴값을 다르게 해주면 가독성 좋아짐
  
• 삼항연산자로 대체하는 것도 가능

switch

• switch문
• break 걸지 않으면 여러 case에 적용 가능

for 루프

while과 do while

섹션 4 함수

함수

• 같은 내용의 연산이 반복될 때
• return이 없으면 undefined 반환
• 인자 vs. 인수

인자: 함수 원형에 명시된 parameter

인수: 인스턴스 함수에서 사용되는 실제 변수 parameter

→ 크게 구분 X

• “Hoisting”
  • 함수 선언문이 실행 부분 아래에 있어도 성공적으로 실행되는 현상
  • 변수/상수 let/const 는 Hoisting X
  • 자바스크립트에서 되는 이유:
    • 문서를 실행할 때 먼저 코드들을 순회하면서 function으로 선언된 함수들을 변수들로 등록해놓기 때문
• 함수 선언 방법:
  • 함수도 객체, 즉 값
  • 아는 내용
  • “화살표 함수” 인자를 받아 무언가를 만들어내 반환하는 경우 많이 사용 마지막에 ; 써줘야 함 리턴문 필요 없음
    
• 1번: function으로 제대로 선언 - 호이스팅 가능
• 2, 3번: const = function & 화살표 함수 - 호이스팅 안 됨

일급 객체

• 함수를 변수/상수의 값과 같이 사용
• 어떤 함수 instanceof Object = TRUE
• 따라서 함수도 하나의 객체구나
• for

for(랜덤한 이름 of function) {

function의 작은 단위를 다룰 수 있게 됨

}

• 객체의 다른 프로퍼티에 접근: this 사용

이거 하려면 function으로 함수 선언해야 함

화살표 함수는 위의 방법으로 정의되는 함수와 기능이 다름

• 고차 함수
  • high-order function
  • 익명 함수
  • callback function
    • 함수 실행 안에 함수 실행
    • 함수 조합하여 사용
• Currying 커링
• 하나의 함수는 한 가지 일만 하도록!

내부적으로 수정할 때 매우 복잡해질 수 있음

객체와 클래스

객체의 기본 사용법들

• 프로퍼티 접근법 . 뒤에 접근하고자 하는 프로퍼티명 작성
• 변수명은 숫자로 시작/-사용 불가했는데
• 객체에서는 가능

  • 숫자도 객체의 key로 사용 가능

  • 숫자가 아니라 문자 포함 시 key도 따옴표로 감싸야 함

  • 이런 경우에는 마침표 프로퍼티 접근 불가

  • [프로퍼티명] 이런 식으로만 접근 가능

  • 이렇게도 가능

    let idx = 0;
    const obj = {
    	['key-'+ ++idx]: 'value-${idx}',
    	['key'+ ++idx]: 'value-${idx}',
    	[idx**idx]: 'POWER'
    }

• 하지만!

  • 객체 OR 배열을 key값으로 만들면?

    제대로 동작을 하는 것처럼 보이지만

    그렇지 않음

    실제로 입력한 객체나 배열이 key값이 되는 게 아니라 이것들이 치환된 문자열 object Object이 key값이 되는 것

• 특정 프로퍼티 없애고 싶을 때 delete 뒤에 대괄호 연산자나 점 연산자 둘 다 가능 만약에 없는 프로퍼티로 접근하면 아무 일도 일어나지 않음 - 오류도 X
  
• 만약에 파라미터로 알 수 없는 key값의 문자열을 받은 경우

점 연산자로는 프로퍼티 새로 생성 불가 - 그니까 의도와 다른 작업 수행하게 됨

따라서 [key] 이렇게 접근해주어야 함

• ESG6에서의 객체 내 method

예전에는 function keyword가 들어간 것도 메소드라 불렀다면

이제는 function keyword 없이

functionname(parameter) {

return function 내용;

}

이런 것만 메소드라 부름

생성자 함수

• constructor

클래스

• syntactic sugar: 문법을 보다 읽기 쉽게 만드는 것 - 다른 언어의 클래스와 비슷한 문법으로 포장
• 하지만 클래스가 생성자 함수와 아주 같지는 않음
• 클래스는 Hoisting X - 구현이 실행 코드보다 밑에 되어 있으면 안됨
• 반면에 생성자 함수는 가능

접근자 프로퍼티와 은닉

• getter, setter
• private field는 # 을 붙임

상속

• extends
• super.method명 : constructor에서는 부모 클래스의 생성자를 가리킴

다른 메소드에서는 부모 클래스에서 만들 인스턴스를 가리킴

객체의 스프레드와 디스트럭쳐

• spread: 완벽하지는 않은 일종의 복사

  • ...

  • const class2 = class1

    이건 같은 곳을 바라보게 만듦

  • const class1 = {
    	a: 1, b: 'A', c: true
    }
    
    const class2 = {
    	d: {x: 10, y: 100}, e: [1,2,3]
    }

  • 이건 class1의 프로퍼티 가져와서 z: 0 프로퍼티 더함

    const class3 = {
    	...class1, z: 0
    }

  • 클래스 2, 3 객체들의 프로퍼티를 가져오고 클래스2의 d도 하나의 객체인데 이것도 가져옴

    const class4= {
    	...class2, ...class3,...class2.d
    }

  • 같은 프로퍼티의 경우?

    • 나중에 온 값으로 덮어씀
• 복사의 깊이
  • 원시값만 복사: 얕은 복사
  • 안에 있는 객체까지 복사되어서 서로 영향을 주지 않는 것: 깊은 복사

→ spread는 얕은 복사

• Destructuring