모던자바스크립트 1(1장~9장)

자바스크립트 특징

1. 인터프리터 언어

인터프리터 언어vs 컴파일러 언어

인터프리터 언어 : 한 줄씩 중간코드인 바이트코드로 변환한 후 실행한다. 실행 파일을 생성하지 않고, 인터프리터 단계와 실행 단계가 구분되어 있지 않고 반복 수행된다. 그래서 실행 속도가 비교적 느리다. 장점은 수정이 편하다.

컴파일러 언어 : 소스코드 전체를 한번에 머신 코드로 변환한 후 실행한다. 실행 파일을 생성하고, 컴파일 단계와 실행 단계가 분리되어 있다. 그래서 실행 속도가 빠르다. 장점은 속도.

그런데 대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합해 속도가 빠르다.

2. 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어

자바스크립트는 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어다.

 

DOM(Document Object Model) : 웹 페이지에 대한 인터페이스.

 

자바스크립트 실행방법 : 웹 브라우저, 콘솔, 자바스크립트 런타임(nodejs)

* 자바스크립트 > ECMAScript  (자바스크립트는 ECMAScript의 표준 사양을 가장 잘 구현한 언어)

 

변수

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

식별자 : 어떤 값을 구별해서 식별할 수 있는 고유한 이름(변수 이름, 함수). 식별자는 값이 아니라 메모리 주소를 기억

변수 선언 : 변수 선언문은 변수 이름을 등록하고 값을 저장할 메모리 공간을 확보한다. => 초기화(undefined를 할당)

변수 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

값의 할당 : 변수 선언과 값의 할당을 하나의 문으로 표현해도 자바스크립트 엔진은 2개의 문으로 나누어 실행한다.

아래처럼 변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 할당 값 80을 새롭게 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그곳에 할당 값 80을 저장한다. 재할당도 마찬가지

표현식과 문

값(value) : 식(expression)이 평가(evaluate)되어 생성된 결과

리터럴(literal) : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(notation)

표현식(expression) : 값으로 평가될 수 있는 문(statement)

문(statement) : 프로그램을 구성하는 기본 단위이자 최소 실행 단위

표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단한 방법은 변수에 할당해 보는 것이다.

표현식인 문은 할당가능하지만 표현식이 아닌문은 할당이 가능하지 않다.

데이터 타입

원시타입 : 숫자, 문자열, 불리언, undefined, null, 심벌

객체타입 : 자바스크립트는 객체 지반 언어, 자바스크립트를 이루고 있는 거의 모든 것이 객체

 

심벌은 리터럴로 생성할 수없고 Symbol 함수를 호출해 생성한다. 심벌 값은 유일한 값이므로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.

 

데이터 타입이 필요한 이유

값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해

값을 참조할 때 한번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해

메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

 

동적 타이핑

정적 타입 언어 : 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 선언이라 한다. 정적 타입 언어는 컴파일 시점에 타입 체크를 수행한다.  ex) c

동적 타이핑 : 자바스크립트의 변수는 선언이 아닌 할당에 의해 데이터 타입이 결정된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다.

동적 타입 언어 : 자바스크립트를 정적 타입 언어와 구별하기 위해 동적 타입 언어라고 부른다. ex) 파이썬, php, 루비

동적 타입 언어는 편하다. 하지만 변수 값이 언제든지 변경될 수 있기 때문에 복잡한 프로그램에서는 변화하는 변수 값을 추적하기 어렵다. 그리고 변수는 값의 변경에 의해 타입도 언제든지 변경될 수 있다.

주의사항 => 변수는 필요한 경우만 사용, 스코프를 좁게 만들기, 전역 변수 사용 자제, 상수 사용, 네이밍 잘하기

가독성이 좋은 코드가 좋은 코드다.

연산자

산술 연산자, 할당 연산자, 비교 연산자, 삼항 조건 연산자, 논리 연산자, 쉼표 연산자, 그룹 연산자, typeof 연산자, 지수 연산자, 등등(?., ??, delete, new, instanceof, in)

비교 연산자에서 ==은 암묵적 타입 변환을 통해 타입을 일치시킨 후 값을 비교, ===은 값과 타입을 비교

 NaN은 자신과 일치하지 않는 유일한 값이다. 따라서 NaN을 확인하려면 isNaN으로 확인해야 한다.(Object.is도 가능)

삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if...else문은 값처럼 사용할 수 없다.

.typeof 연산자 null은 object이다. 따라서 ===으로 비교하자

지수 연산자. 2**2 or Math.pow(2,2)

제어문

블록문({}), 조건문(if...else, switch), 반복문(for, while, dowhile), break문, continue문

 

switch문 사용 방법

swtich(표현식){
  case 표현식1:
    ~~
    break;
  case 표현식2:
    ~~~
    break;
  default:
    ~~~
}

swtich(표현식){
  case 1: case3: case:5
    ~~
    break;
  case 4: case 6: case 8:
    ~~
    break;
  default:
    ~~
}

중첩된 for문에서 원하는 위치로 탈출하고 싶다면 레이블 문 사용

outer:for(let i=0;i<3;i++){
  for(let j=0;j<3;j++){
    if(i+j===3) break outer;
    console.log(i,j);
  }
}

 

continue문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다.

타입변환과 단축평가

타입변환

값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다.

명시적 타입 변환 또는 타입 캐스팅 :  개발자가 의도적으로 값의 타입을 변경하는 것

암묵적 타입 변환 또는 타입 강제 변환 : 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 변환

 

false로 평가되는 Falsy값

false, undefined, null, 0, -0, NaN, ''(빈 문자열)

 

단축평가

논리 연산자를 사용한 단축평가(&&, ||)

논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환. 논리곱 연산자는 좌항에서 우항으로

ex) 'cat' && 'dog' => 'dog

논리합(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환. 논리합 연산자도 좌항에서 우항으로

ex) 'cat' || 'dog' => 'cat'

     false || 'dog' => 'dog'

* 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

var elem=null
var value=elem.value; //error

var elem=null;
var value=elem && elem.value; //null

* 함수 매개변수에 기본값을 설정할 때

function getStringLength(str=''){
  return str.length;
}
getStringLength(); //0
getStringLength('hi'); //2

 

옵셔널 체이닝 연산자(?.) (ES11)

옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 앟으면 우항의 프로퍼티 참조를 이어간다.

var str='';
var length=str && str.length;
console.log(length); //''

var str='';
var length=str?.length;
console.log(length); //0

 

null 병합 연산자(??)

null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. 변수에 기본값을 설정할 때 유용

var foo='' || 'default string';
console.log(foo); // 'default string'

var foo='' ?? 'default string';
console.log(foo); // ''