Modern Javascript #1

February 25, 2020

1. JavaScript

인터프리터 언어: 프로그램을 한 줄마다 기계어로 번역해서 실행하는 프로그래밍 언어
인터프리터: 프로그램을 번역해서 실행시키는 소프트웨어

자바스크립트는 인터프리터 언어이며, 객체 지향 언어지만 함수형 언어의 특징도 가지고 있는 강력하고 유연한 알고리즘 표현 능력을 갖춘 프로그래밍 언어이다.

인터프리터 언어
동적 프로토타입 기반 객체지향 언어
클래스가 아닌 프로토타입을 상속하며 객체를 생성한 후에도 프로퍼티와 메서드를 동적으로 추가,삭제가 가능
동적 타입 언어 변수 타입이 없어 프로그램을 실행하는 도중에 변수에 저장되는 데이터 타입이 동적으로 바뀔 수 있다
함수가 일급 객체다 자바스크립트의 함수는 객체이며, 함수에 함수를 인수로 넘길 수 있다. 이 특성을 활용하면 고차 함수를 구현할 수 있어 함수형 프로그래밍이 가능하다.
함수가 클로저를 정의한다

1.1.4 ECMAScript 6

ECMAScript 6는 2015년 6월에 권고된 새로운 ECMAScript 버전이다. 다른 프로그래밍 언어가 제공하는 다양한 기능을 추가하면서도 이전 자바스크립트 버전과의 호환성을 보장한다.

3. 변수와 값

변수

let, const, var으로 선언한다.
변수 선언의 끌어올림(hoisting)이 존재한다.
한글과 한자를 사용한 식별자를 만들 수 있다.

데이터 타입

“변수에 모든 타입의 데이터를 저장할 수 있다.” => 동적 타입 언어

4. 객체와 배열, 함수의 기초

자바스크립트에서는 원시 타입을 제외한 모든 값이 객체이며 객체는 자바스크립트에서 가장 중요한 데이터 타입이다.

4.1 객체의 기초 ① 객체 리터럴

객체

객체 : 이름과 값을 한쌍으로 묶은 데이터를 여러개 모은 것

프로퍼티 : 객체에 포함된 데이터 하나

객체 리터럴로 객체 생성하기

var card = {suit: "하트", rank: "A"}

{…} 부분이 객체 리터럴이며, 변수 card에 대입하고 있다.

card.suit // -> 하트
card["rank"] // -> A

card.value = 14;
console.log(card); // -> Object {suit: "하트", rank: "A", value: 14}

없는 프로퍼티 이름에 값을 대입하면 새로운 프로퍼티가 추가된다.

Java와 C++ 등과 달리 Js의 객체는 실행 중 프로퍼티를 자유롭게 추가, 삭제가 가능하다.

in 연산자로 프로퍼티가 있는지 확인하기

var card = {suit: "하트",rank: "A" };
console.log("suit" in card); // -> true
console.log("color" in card); // -> false

메서드 : 함수를 값으로 가진 프로퍼티

4.2 함수의 기초

4.2.2 함수 선언문으로 함수 정의하기

function square(x) { return x * x; }

다음 함수는 인수의 제곱을 계산해서 반환한다.

자바스크립트 엔진은 변수 선언문과 마찬가지로 함수 선언문을 프로그램의 첫머리로 끌어올리기 때문에 함수 선언문은 프로그램의 어떤 위치에도 작성할 수 있다.

변수의 유효 범위

전역 유효 범위와 지역 유효 범위

지역 변수는 모두 선언된 함수 내부에서만 유효하므로 이름이 같아도 충돌하지 않는다.

지역 변수 > 전역 변수

블록 유효 범위 : let과 const

ECMAScript 6부터 추가된 변수 선언자로 모두가 블록 유효 범위를 갖는 변수를 선언한다. 이렇게 선언된 변수는 중괄호({}) 안에서만 유효하다.

[let 선언자] 블록 유효 범위를 갖는 지역 변수를 선언, 사용법은 var 문과 같다.

[const 선언자] 블록 유효 범위를 가지면서 한 번만 할당할 수 있는 변수(상수)를 선언한다. let과의 차이는 반드시 초기화해야 한다는 것이다.

객체의 메서드

var circle = {
    center: { x:1.0, y:2.0 },
    radius: 2.5,
    area: function () { // 원의 넓이를 구하는 메서드
        return Mat.PI * this.radius * this.radius;
     }
  }

메서드는 일반적으로 메서드가 속한 객체의 내부 데이터(프로퍼티 값)의 상태를 바꾸는 용도로 사용한다.

C++와 Java와는 달리 자바스크립트의 메서드는 함수를 값으로 가진 프로퍼티이다. 단지 프로퍼티 값의 데이터 타입만 다를 뿐 객체 안의 데이터와 메서드가 모두 프로퍼티이다. 따라서 자바스크립트에서 프로퍼티는 객체 내부의 데이터와 메서드를 모두 뜻한다.

함수를 사용하면 얻을 수 있는 장점

재사용할 수 있다
만든 프로그램을 이해하기 쉽다
프로그램 수정이 간단해진다

4.3 객채의 기초 ② 생성자

생성자를 이용하여 객채를 생성하면 이름이 같은 메서드와 프로퍼티를 가진 객체 여러 개를 효율적으로 생성이 가능하다.

생성자로 객체 생성하기

Java와 C++ 등과 다르게 JavaScript에는 클래스가 없는 대신 생성자라고 하는 함수로 객체를 생성한다.

function Card(suit, rank) {
    this.suit = suit;
    this.rank = rank;
}

var card = new Card("하트", "A");

생성자 : 위의 예처럼 new 연산자로 객체를 생성할 것이라 기대하고 만든 함수 (첫 글자를 대문자로 쓰는 파스칼 표기법을 사용)

var card = {};
card.suit = "하트";
card.rank = "A";

var card1 = new Card("하트", "A");
var card2 = new Card("클럽", "K");
var card3 = new Card("스페이드", "2");

[생성자를 사용하여 이름은 같지만 프로퍼티 값이 다른 객체(인스턴스) 여러 개를 간단히 생성하고 변수 여러개에 저장]

4.4 객채의 기초 ③ 내장 객체

처음부터 사용할 수 있는 빌트인 오브젝트로, Javascript의 뼈대를 구성한다.

Date 생성자

대표적인 내장 생성자로 날짜와 시간을 표현하는 객체를 생성하며, 계산식 안에서 밀리초 단위 정수로 값의 타입이 바뀐다.

var now = new Date();

now.getFullYear()
now.getMonth()
now.getDate()
now.getDay()
now.getHours()
now.getMinutes()
now.getSeconds()
now.getMilliseconds()
now.toString()
now.toLocaleString()
now.toLocalDateString()
now.toLocaleTimeString()
now.getUTCHours()
now.toUTCString()

[Date 객체가 제공하는 주요 메서드]

Function 생성자

var squard = new Function("x", "return x * x");

기타 내장 객체

전역 객체

자바스크립트 객체의 분류

[네이티브 객체]

[호스트 객체]

[사용자 정의 객체]