Dev Day

Dart 언어 JavaScript와 다른 점

 

저번에 간단히 Dart에 대해 알아보았기 때문에 오늘은 자바스크립트와 다른 점을 알아보려 한다.

나는 Flutter를 사용하기 위해 Dart를 공부하는 것이기 때문에 Flutter 공식 홈페이지를 참고하여 공부하였다.

Flutter에서는 JavaScript와 몇 가지 차이점을 안내해주었다.

진입점

자바스크립트의 경우 진입점이 정해져 있지 않지만 Dart의 경우 진입점인 main() 함수가 반드시 필요하다.

// JavaScript
function startHere() {
  // Can be used as entry point
}

// Dart
main() {
}

콘솔 출력

// JavaScript
console.log('Hello world!');

// Dart
print('Hello world!');

변수

Dart는 타입 검사를 하는(type safe) 언어입니다. Dart는 정적 타입 검사와 런타임 타입 검사를 동시에 사용하여, 변수의 값이 변수의 정적 타입과 항상 일치하는지 검사합니다. 타입이 필수이긴 하지만, Dart가 타입 추론을 하기 때문에 일부 타입 표기는 생략해도 됩니다.

라고 Flutter 홈페이지에 설명이 되어있다. 뭐 한마디로 다트의 경우 명시적으로 타입을 선언해도 관계없고, 자바스크립트처럼 타입을 추론하게 할 수도 있다는 것이다.

 

// JavaScript
var name = 'JavaScript';

// Dart
String name = 'dart'; // 명시적으로 문자열 타입 선언.
var otherName = 'Dart'; // 문자열 타입으로 추론.
// Dart에서는 두 방법 다 가능.

또한 Dart에서는 변수 선언 시 var를 사용하여 변수를 선언하면 타입을 추론하게 된다. var로 변수를 선언하면 참조를 저장하기 때문에 var로 선언된 변수의 타입과 다른 타입을 넣게 되면 오류가 발생한다.

 

실행 결과 아래와 같은 오류가 발생하게 된다.

만약 하나의 변수에 여러 가지 타입이 필요한 경우 dynamic 키워드를 사용할 수 있다.

dynamic name = "daehee"
name = 26

// 에러 없음

 

접근 지정자

Dart는 public private 등의 키워드를 사용하지 않는다. 기본적으로 public이 적용된다.

변수명 앞에 _ 기호를 붙이면 Java의 private 키워드를 붙인 것처럼 된다. 이 private 변수에 접근하려면 getter와 setter 메서드를 작성해주어야 한다. (public으로 선언된 변수는 기본적으로 getter setter가 제공된다.)

private 멤버 변수인 _name에는 직접 접근이 불가능하지만 public인 getter를 통해 접근이 가능하다. 이때 get name에서 name이 접근할 때 사용할 이름이다. set도 get과 마찬가지로 public이라 _name에 값을 할당하기 위해 접근이 가능하며 set name에서 name은 접근할 때 사용할 이름이다. 여기서 name은 setName, getName 등으로 바꿔서 사용해도 무방하다.

기본값

자바스크립트에서 초기화하지 않은 변수는 undefined이다.

Dart에서 초기화하지 않은 변수는 null 값을 가진다. Dart에선 숫자도 객체이기 때문에, 초기화하지 않은 숫자 타입 변수도 null 값을 가진다고 한다. (Dart에서는 모든 것이 객체이다.)

 

// JavaScript
var name; // == undefined

// Dart
var name; // == null
int x; // == null

 

Null이나 0 체크

자바스크립트는 1이나 null이 아닌 객체도 true로 취급하며, Dart는 boolean 값 true만 true로 취급한다.

// JavaScript
var myNull = null;
if (!myNull) {
  console.log('null is treated as false');
}
var zero = 0;
if (!zero) {
  console.log('0 is treated as false');
}

// Dart
var myNull = null;
if (myNull == null) {
  print('use "== null" to check null');
}
var zero = 0;
if (zero == 0) {
  print('use "== 0" to check zero');
}

함수

Dart와 자바스크립트 함수는 대체로 유사하며, 주된 차이점은 선언하는 방법의 차이라고 한다.

// JavaScript
function fn() {
  return true;
}

// Dart
fn() {
  return true;
}
// can also be written as
bool fn() {
  return true;
}

비동기 프로그래밍

Futures

자바스크립트와 마찬가지로 Dart도 단일 스레드 실행을 지원한다. 자바스크립트에서 Promise 객체는 비동기 작업의 최종 완료 (또는 실패)와 결과 값을 나타낸다.

Dart는 이러한 비동기 처리를 위해서 Fetures 객체를 사용한다고 한다.

// JavaScript
class Example {
  _getIPAddress() {
    const url = 'https://httpbin.org/ip';
    return fetch(url)
      .then(response => response.json())
      .then(responseJson => {
        const ip = responseJson.origin;
        return ip;
      });
  }
}

function main() {
  const example = new Example();
  example
    ._getIPAddress()
    .then(ip => console.log(ip))
    .catch(error => console.error(error));
}

main();

// Dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class Example {
  Future<String> _getIPAddress() {
    final url = 'https://httpbin.org/ip';
    return http.get(url).then((response) {
      String ip = jsonDecode(response.body)['origin'];
      return ip;
    });
  }
}

main() {
  final example = new Example();
  example
      ._getIPAddress()
      .then((ip) => print(ip))
      .catchError((error) => print(error));
}

async, await

자바스크립트에서는 async 함수가 Promise를 반환한다. await 연산자는 Promise를 기다리기 위해서 사용한다.

Dart에서는 async 함수가 Future를 반환하고, 함수의 구현된 내용은 나중에 실행되도록 예약된다. await 연산자는 Future를 기다리기 위해서 사용된다.

Promise를 반환하냐 Future를 반환하냐의 차이인 것으로 해석된다.

// JavaScript
class Example {
  async function _getIPAddress() {
    const url = 'https://httpbin.org/ip';
    const response = await fetch(url);
    const json = await response.json();
    const data = await json.origin;
    return data;
  }
}

async function main() {
  const example = new Example();
  try {
    const ip = await example._getIPAddress();
    console.log(ip);
  } catch (error) {
    console.error(error);
  }
}

main();

// Dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class Example {
  Future<String> _getIPAddress() async {
    final url = 'https://httpbin.org/ip';
    final response = await http.get(url);
    String ip = jsonDecode(response.body)['origin'];
    return ip;
  }
}

main() async {
  final example = new Example();
  try {
    final ip = await example._getIPAddress();
    print(ip);
  } catch (error) {
    print(error);
  }
}

 

Flutter 공식 홈페이지와 조금 더 찾아보며 공부를 했다.

다음은 Dart의 Class, Constructor 정도를 알아보면 좋지 않을까 싶다.

Flutter를 공부하면서 Dart를 같이 병행하는 게 좋지 않을까 싶었는데 Flutter를 조금 공부하다 보니 역시나 Dart를 먼저 선행하고 오는 게 맞다는 생각이 들었다.