[Dart] 자바스크립트 개발자의 다트 학습 - Part 1

Dart와 JavaScript는 많은 개념을 공유한다. Dart 역시 이벤트 루프에서 실행되고, 비동기 프로그래밍을 위한 Future라는 개념이 존재한다. Future는 자바스크립트의 Promise와 비슷하다. Dart는 정적 타입 언어이기 때문에 타입스크립트를 사용한 경험이 있다면 Dart를 더 쉽게 배울 수 있다.

 

Dart와 JavaScript의 다른 점과 비슷한 점을 Learning Dart as a JavaScript developer 페이지에 자세히 설명돼 있어서 정리해봤다.

 

 

Conventions and linting

---

• Dart 팀에서 공식적으로 코드 스타일 가이드와 Lint 도구를 제공한다.
• dart fix를 통해 코드 이슈를 발견하고 수정할 수 있다.
• dart format을 통해 코드를 포매팅할 수 있다

 

 

Built-in types

---

• Dart는 정적 타입 시스템을 사용하여 변수와 표현식 타입을 컴파일 시점에 결정한다.
• Dart의 빌트인 타입 :
  • Numbers (num, int, double)
  • Strings (String)
  • Booleans (bool)
  • Lists (List) — 배열
  • Sets (Set) — 중복되지 않는 유일한 요소들의 집합(순서 보장 안함)
  • Maps (Map) — 키-값 쌍을 저장하는 컬렉션(객체와 비슷)
  • Symbols (Symbol)
  • null (Null)
• Dart에선 원시 타입이 없다. 모든 값은 객체다.
• number, boolean, null 타입은 정규화 과정을 통해 메모리 상에 오직 하나의 객체로만 존재한다. 예를들어 숫자 1을 다른 변수에서 여러 번 사용해도 메모리엔 오직 하나의 int 객체로만 저장된다.
• == 연산자는 논리적 동등성(같은 값을 가지는지)을 비교하고, identical() 함수는 참조 동등성(같은 인스턴스인지)을 비교한다.

 

Numbers

 

Dart는 숫자를 저장하기 위한 3가지 데이터 유형이 있다

1. int : 소수부가 없는 숫자(정수)
2. double : 64비트(배정밀도) 부동 소수점 숫자(실수)
3. num : int와 double의 상위 타입. 자바스크립트의 number 타입과 동일

 

Dart는 숫자도 객체로 간주하므로, 숫자에서 바로 관련 메서드를 사용할 수 있다.

// JS
const rounded = math.round(2.5);

// Dart
var rounded = 2.5.round();

 

String

문자열 리터럴을 작성하려면 따옴표 ' 혹은 쌍따옴표 " 를 사용한다. 특수 문자 이스케이프는 백슬래시 \ 를 사용한다.

final singleQuotes = 'I\'m learning Dart'; // I'm learning Dart
final doubleQuotes = "Escaping the \" character"; // Escaping the " character
final dollarEscape = 'The price is \$3.14.'; // The price is $3.14.
final backslashEscape = 'The Dart string escape character is \\.';
final unicode = '\u{1F60E}'; // 😎,  Unicode scalar U+1F60E

 

문자열에 표현식을 사용할 땐 ${표현식} 형태로 사용한다. 단일 식별자일 땐 중괄호를 생략할 수 있다.

int a = 5;
int b = 3;
var str = 'The sum of $a and $b is ${a + b}.'

 

Dart에선 문자열이 여러 줄에 걸쳐 있는 경우 인접한 문자열 리터럴을 모두 연결한다.

final s1 = 'String '
    'concatenation'
    " even works over line breaks.";

print(s1); // String concatenation even works over line breaks.

 

자바스크립트에서 벡틱(`)을 이용해 여러 줄의 문자열을 작성하는 것처럼 Dart에선 따옴표 3개(''' 혹은 """)를 사용한다.

final s2 = '''
You can create
multiline strings like this one.
''';

 

Equality

Dart는 두 문자열이 동일한 코드 유닛 시퀀스를 포함하면 같은 값으로 간주한다. 두 문자열이 동일한 시퀀스인지 확인하려면 equal-to == 연산자를 사용한다.

final s1 = 'Hello '
    'World';
print(s1 == 'Hello World'); // true

 

Booleans

자바스크립트와 마찬가지로 다트의 불리언 값은 이진 조건(참/거짓)을 표현한다. true, false 리터럴을 사용하거나 x < 5 같은 표현식을 사용해서 불리언 값을 생성할 수 있다.

var isLoading = false;

 

 

Variables

---

Dart의 모든 변수는 타입이 있다. 자바스크립트의 let, const 처럼 블록 스코프를 가진다. 변수 타입을 직접 정의하거나, Dart 분석기가 타입을 추론하도록 할 수도 있다.

// 변수 선언과 동시에 초기화하면 Dart가 타입을 추론한다
var name = 'bob';
// Error! 추론한 타입만 변수에 할당할 수 있다
name = 5;

 

초기 값을 제공하지 않거나 타입을 별도로 지정하지 않으면 모든 타입을 허용하는 dynamic으로 추론된다. dynamic은 catch-all 타입으로, TypeScript의 any와 비슷하다고 볼 수 있다.

// dynamic type으로 추론
var name; 

name = 'bob'; // OK
name = 5; // OK

 

Final and const ⭐️

자바스크립트와 Dart 모두 const를 사용하지만 작동 방식이 조금 다르다. 자바스크립트의 const는 Dart에서 final 키워드와 더 유사하다. final로 선언된 변수는 한 번 초기되면 값을 변경할 수 없으며, 변수의 값은 런타임 시점에 결정된다.

 

Dart의 const는 컴파일 시점에 생성되는 불변 값으로 사이드 이펙트가 없는 특징이 있다. 정리하면 final은 런타임 시점에, const는 컴파일 시점에 결정되는 불변값이라고 보면 된다. 

 

상수 변수(constant variables) : const 키워드를 사용해서 선언한 변수. 상수 변수는 반드시 상수 값을 포함해야 한다. 상수 값이란 컴파일 시점에 결정되는 값으로 변경할 수 없는 값을 의미한다.

const int a = 10; // 값이 10으로 고정된 상수 변수

 

비상수 변수(non-constant variables) : final 또는 var로 선언한 변수. 비상수 변수도 상수 값을 포함할 수 있다. 상수 값을 포함하는 경우엔 const 키워드를 사용해서 값을 명시할 수 있다.

final int b = 20; // 상수 값 20을 포함한 비상수 변수
var c = const [1, 2, 3]; // 상수 리스트를 포함한 비상수 변수

 

자바스크립트의 const는 변수의 재할당을 막지만, 객체 필드의 수정은 허용한다. 반면 Dart의 const는 해당 객체를 완전한 불변으로 만들어 재할당은 물론 객체 필드도 수정도 금지한다.

 

 

Null safety

---

자바스크립트와 다르게 Dart는 null safety를 지원한다. null safety는 null 참조로 인한 오류를 방지하기 위한 기능이다. Dart에선 모든 변수와 객체가 기본적으로 null을 가질 수 없다(non-nullable).

 

컴파일 타임에(코드 작성 시점) null 참조 예외를 포착하기 때문에 예기치 않은 오류를 방지할 수 있다. 변수가 null 값을 가질 수 있음을 나타내려면 타입 선언에 ?를 추가한다. Dart에서 변수를 초기화하지 않으면(값을 할당하지 않으면) null 값을 가진다(JS는 undefined).

int? nullableInt; // int? nullableInt = null; 와 동일
print(nullableInt); // null

 

Dart는 null을 처리하기 위해 자바스크립트처럼 null 할당 연산자 ??=, null 병합 연산자 ??, 옵셔널 체이닝 연산자 ?.를 지원한다. Nullable 변수나 표현식이 null이 아님을 단언하기 위해 ! 연산자를 사용할 수 있다. 컴파일러의 null 검사 오류를 억제할 때 사용한다.

int? a = 5;

// nullable 타입 a를 non-nullable 타입인 b에 할당 할 수 없다.
int b = a; 
// ! 연산자로 a를 non-nulalble 타입으로 변환했으므로 할당 가능
int b = a!;

 

Functions

약간의 함수 선언 문법 차이를 제외하면 자바스크립트 함수와 거의 비슷하게 작동한다. 자바스크립트 처럼 최상위 레벨, 클래스 필드, 로컬 스코프 등 거의 모든 곳에서 함수를 선언할 수 있다.

// 최상위 레벨
int multiply(int a, int b) {
  return a * b;
}

// 로컬 스코프
void main() {
  int multiply(int a, int b) {
    return a * b;
  }

  print(multiply(3, 4));
}

 

Arrow syntax

Dart 에서도 함수의 화살표 => 구문을 지원하지만, 단일 표현식 또는 리턴문을 포함할 때만 사용할 수 있다. 아래 두 isNoble 함수는 동일하다.

// 일반 함수
bool isNoble(int atomicNumber) {
  return _nobleGases[atomicNumber] != null;
}

// 화살표 함수
bool isNoble(int atomicNumber) => _nobleGases[atomicNumber] != null;

 

Parameters

자바스크립트 함수 파라미터는 순서를 기반으로 전달하며, 이를 위치 매개변수(Positional Parameters)라고 부른다.

function multiply(a, b) {
  return a * b;
}

multiply(3, 5); // 15

 

Dart에선 위치 매개변수와 네임드 매개변수(Named Parameters)를 모두 지원한다. 네임드 매개변수를 사용하면 함수 호출 시 파라미터 순서를 신경쓰지 않아도 된다. 네임드 매개변수는 중괄호 {} 를 이용해 정의하며, required 키워드를 사용하지 않으면 기본적으로 선택적이다. 선택적 매개변수는 null safety를 위해 기본값을 할당하거나 nullable로 지정해야 한다.

multiply({required int a, required int b}) {
  return a * b;
}

multiply(a: 3, b: 5); // 15
multiply(b: 5, a: 3); // 15

 

네임드 매개변수는 필수 위치 매개변수와 같이 사용할 수도 있는데, 이땐 위치 매개변수 뒤에 위치해야 한다.

multiply(bool x, {required int a, int b = 5, int? c}) { ... }

multiply(false, a: 3); // OK
multiply(false, a: 3, b: 9); // OK
multiply(false, c: 9, a: 3, b: 2); // OK

 

위치 매개변수를 선택적으로 만들 땐 [] 대괄호를 사용한다. 선택적 매개변수는 항상 필수 매개변수 뒤에 위치해야 한다. 참고로 위치 매개변수는 기본적으로 모두 필수(required)다.

// b에 기본값을 지정하고 c엔 nullable로 지정했으므로 유효
multiply(int a, [int b = 5, int? c]) { ... }

// 필수 매개변수 c가 선택적 매개변수 b 뒤에 위치하므로 유효하지 않음
multiply(int a, [int b = 5], int c) { ... }

// 선택적 매개변수 b, c가 기본값 혹은 nullable로 지정되지 않았으므로 유효하지 않음
multiply(int a, [int b, int c]) { ... }

 

아래는 선택적 위치 매개변수를 가진 함수 호출 예시.

multiply(int a, [int b = 5, int? c]) { ... }

multiply(3); // OK
multiply(3, 5); // OK
multiply(3, 5, 7); // OK

 

First-class functions

자바스크립트와 마찬가지로 Dart는 함수를 일급 객체(first-class)로 취급한다. 따라서 함수를 다른 함수의 매개변수로 전달하거나 변수에 할당할 수 있다.

void printElement(int element) {
  print(element);
}

var list = [1, 2, 3];
list.forEach(printElement);

 

Anonymous functions

자바스크립트와 Dart 모두 익명 함수를 지원한다.

var blockFunc = optionalCallback ?? (int a, int b) { return a * b; };    

var singleFunc = (int a, int b) => a * b;

 

자바스크립트처럼 익명 함수를 다른 함수에 전달할 수 있다. 참고로 Dart의 map() 메서드는 Iterable을 반환하고, toList() 메서드는 이터러블을 List로 변환한다.

[1, 2, 3].map((e) => e + 3).toList();

 

Generator functions

Dart 역시 제너레이터 함수를 지원한다. 함수 파라미터 뒤에 sync* 키워드를 붙이면 이터러블을 반환한다. 제너레이터 함수에서 yield 키워드를 이용하여 현재 항목을 이터러블에 추가할 수 있다.

Iterable<int> naturalsTo(int n) sync* {
  int k = 0;
  while (k < n) {
    yield k++;
  }
}

print(naturalsTo(5).toList()); // [0, 1, 2, 3, 4]

 

yield* 키워드를 사용해서 다른 이터러블의 모든 값을 한 번에 추가할 수 있다.

Iterable<int> doubleNaturalsTo(int n) sync* {
  int k = 0;
  while (k < n) {
    yield* [k, k];
    k++;
  }
}

print(doubleNaturalsTo(3).toList()); // [0, 0, 1, 1, 2, 2]

 

 

Statements

---

Control flow (if/else, for, while, switch)

Dart의 for-in 문은 자바스크립트의 for-of 처럼 작동한다

for (final i in [1, 2, 3]) {
  print(i); // 1, 2, 3
}

 

자바스크립트의 switch 문은 fall-through 동작이 적용돼서 case에 break, return 문이 없으면 다음 case를 이어서 실행한다. 반면 Dart는 기본적으로 fall-through를 허용하지 않으며, continue 키워드를 사용하거나 case 본문이 비어있을 때만 허용한다.

// JS
const value = 2;

switch (value) {
  case 1:
    console.log("Case 1");
  case 2:
    console.log("Case 2");
  case 3:
    console.log("Case 3");
  default:
    console.log("Default case");
}

// 출력: Case 2, Case 3, Default case

// Dart
var value = 2;

switch (value) {
  case 1: // case 본문이 비어있으므로 다음 case 실행
  case 2:
    print("Case 1 or 2");
  case 3:
    print("Case 3");
  default:
    print("Default case");
}

// 출력: Case 1 or 2

 

Dart의 switch 문에선 case에 레이블을 추가할 수 있는데, continue 문에서 명시한 case 레이블로 바로 이동(일종의 점프)할 수도 있다.

var value = 1;

switch (value) {
  case 1:
    print('Case 1');
    continue three;
  case 2:
    print('Case 2');
  three:
  case 3:
    print('Case 3');
}

// 출력: Case 1, Case 3

 

Operators

Dart는 operator 키워드로 기존 연산자를 오버로딩 할 수 있다(연산자 재정의).

class Vector {
  // 클래스 필드 선언
  final double x;
  final double y;
  final double z;

  // 생성자 초기화
  Vector(this.x, this.y, this.z);

  // 연산자 오버로딩 - 반환타입 operator 연산자(인자타입 인자) { 오버로딩 로직 }
  Vector operator +(Vector other) {
    return Vector(x + other.x, y + other.y, z + other.z);
  }
}

void main() {
  var v1 = Vector(1, 2, 3);
  var v2 = Vector(4, 5, 6);
  // v1의 오버로딩된 + 연산자 호출. other 인자엔 v2가 전달되고 새로운 Vector 인스턴스 반환
  var v3 = v1 + v2;
  // 출력: 5.0, 7.0, 9.0
  print("${v3.x}, ${v3.y}, ${v3.z}"); 
}

 

두 언어의 산술 연산자는 동일하지만 Dart는 나눗셈의 결과를 정수로 반환하는 ~/ 연산자가 존재한다.

의미	JavaScript 연산자	Dart 연산자
덧셈	+	+
뺄셈	-	-
단항 마이너스, 부정	-expr	-expr
곱셈	*	*
나눗셈	/	/
정수 나눗셈		~/
나머지 연산	%	%
전위 증감	++x	++x
후위 증감	x++	x++
전위 감소	--x	--x
후위 감소	x--	x--

 

print(25 == 50.4 ~/ 2); // true

 

자바스크립트와 Dart의 동등/관계 연산자는 거의 동일한 방식으로 작동한다. Dart에선 자바스크립트처럼 강제로 타입을 변환한 후 비교하는 추상적(느슨한) 비교 연산자가 없고 항상 타입을 고려하여 값을 비교한다.

의미	JavaScript 연산자	Dart 연산자
엄격한 동등	===	==
추상적 동등	==
엄격한 부등	!==	!=
추상적 부등	!=
크다	>	>
작다	<	<
크거나 같다	>=	>=
작거나 같다	<=	<=

 

타입 테스트 연산자는 두 언어가 살짝 다르다. Dart의 is 연산자는 특정 타입의 인스턴스인지 혹은 해당 타입을 구현했는지 확인한다(런타임 타입 검사). 예를들어 Dart에선 모든 객체가 Object를 상속 받기 때문에 {} is Object 표현식은 true를 반환한다.

의미	JavaScript 연산자	Dart 연산자
타입 캐스트		x as T
객체가 지정된 타입인지 확인	x instanceof T	x is T
객체가 지정된 타입이 아닌지 확인	!(x instanceof T)	x is! T

 

var num = 42;
// num이 int 타입인지 확인
if (num is int) { /* ... */ }

 

자바스크립트와 Dart의 논리 연산자는 동일하지만 조건문에서 값을 평가하는 방식이 다르다. 자바스크립트에선 모든 값을 불리언 값으로 변환할 수 있다. 예를 들어 빈 문자열 "" 과 숫자 0 은 falsy 값으로 간주돼서 false로 평가된다. 반면 Dart에선 조건문과 논리 연산자의 피연산자는 오직 불리언 타입만 사용할 수 있다.

의미	JavaScript 연산자	Dart 연산자
NOT	!x	!x
OR	||	||
AND	&&	&&

 

var x = "foo";

// x는 불리언 타입이 아니므로 에러
if (x) { /* ... */ }
// String.isNotEmpty는 빈문자열 여부를 불리언으로 반환하므로 OK
if (x.isNotEmpty) { /* ... */ }

 

비트 연산자(Bitwise)는 두 언어가 거의 동일하다.

의미	JavaScript 연산자	Dart 연산자
AND	&	&
OR	|	|
XOR	^	^
NOT	~expr	~expr
왼쪽 시프트	<<	<<
오른쪽 시프트	>>	>>
부호 없는 오른쪽 시프트	>>>	>>>

 

Dart도 표현식을 평가하기 위한 조건부 연산자(삼항 연산자)를 지원한다.

int num1 = 10;
int num2 = 15;
int max = (num1 > num2) ? num1 : num2;
print("The greatest number is $max"); // The greatest number is 15

 

Assignment operators

값 할당은 자바스크립트와 동일하게 = 연산자를 이용한다. Dart도 ??= 널 병합 연산자(null-aware variant)를 지원한다.

int? a;
int b = a ?? 5;
print(b); // 5

 

자바스크립트처럼 변수에 값을 할당함과 동시에 연산을 수행하는 축약형 할당 연산자를 지원한다. ~/= 정수 나눗셈 할당을 제외하고 Dart, JavaScript의 축약형 연산자는 모두 동일하다.

연산자	설명
=	할당
+=	덧셈 할당
-=	뺄셈 할당
*=	곱셈 할당
/=	나눗셈 할당
~/=	정수 나눗셈 할당
%=	나머지(모듈로) 할당
>>>=	부호 없는 오른쪽 시프트 할당
^=	비트 XOR 할당
<<=	왼쪽 시프트 할당
>>=	오른쪽 시프트 할당
&=	비트 AND 할당
|=	비트 OR 할당

 

int num = 5;
num *= 5;
print(num); // 25

 

Cascades (.. operator)

Dart에선 동일한 객체에 여러 메서드 호출이나 속성 설정을 연속적으로 수행하는 Cascades 구문을 지원한다. 객체를 반복해서 참조하지 않고 원하는 작업을 수행할 수 있는 장점이 있다.

 

Cascades 구문은 .. 연산자를 사용한다. 자바스크립트에는 없는 구문이다. .. 연산자를 사용할 때마다 기존 객체를 반환해서 메서드 체이닝을 가능하게 해준다.

Map<String, dynamic> user = {'name': 'John', 'age': 30};

user
  ..['age'] = 31
  ..['city'] = 'Los Angeles';
  
print(user); // {name: John, age: 31, city: Los Angeles}

 

객체가 null일 수도 있는 경우 첫 번째 Cascades 구문에 ?.. 를 사용한다

Map<String, dynamic>? user;

// user가 null일 경우 ?.. 연산자는 null을 반환하고 Cascades 구문은 실행되지 않는다
user
  ?..['age'] = 31
  ..['city'] = 'Los Angeles';

print(user); // null

 

 

Collections

---

Lists

Dart의 List는 자바스크립트 배열과 동일하게 대괄호로 묶고 쉼표로 값을 구분하는 방식으로 작성한다.

// 좌측 List<String> : 리스트 변수 타입을 명시적으로 지정
// 우측 <String> : 리스트 요소 타입을 명시적으로 지정
// final : 리스트의 요소는 변경할 수 있지만 리스트 자체는 다른 리스트로 재할당 불가
final List<String> list1 = <String>['one', 'two', 'three'];

// 리스트 요소 타입만 <String>으로 지정한 예시
final list2 = <String>['one', 'two', 'three'];

// 타입을 지정하지 않았지만 List<String>으로 추론됨
final list3 = ['one', 'two', 'three'];

 

인덱스 연산자로 값을 조회하거나 할당할 수 있다.

final fruits = <String>['apple', 'orange', 'pear'];
final fruit = fruits[1]; // orange
fruits[1] = 'pear';
print(fruits); // [apple, pear, pear]

 

add(), addAll() 메서드로 리스트에 요소를 추가할 수 있다.

final fruits = <String>['apple', 'orange', 'pear'];
fruits.add('peach'); // 1개 요소를 추가할 때
fruits.addAll(['kiwi', 'mango']); // 여러 요소를 추가할 때

 

insert(), insertAll() 메서드로 특정 인덱스에 요소를 추가할 수 있다. 기존 인덱스에 있던 요소는 뒤로 밀려나게 된다.

final fruits = <String>['apple', 'orange', 'pear'];
// 1번째 인덱스에 peach 삽입 -> [apple, peach, orange, pear]
fruits.insert(1, 'peach');
// 2번째 인덱스에 kiwi, mango 삽입 -> [apple, peach, kiwi, mango, orange, pear]
fruits.insertAll(2, ['kiwi', 'mango']);

 

다양한 방법으로 리스트의 요소를 제거 할 수 있다.

final fruits = <String>['apple', 'orange', 'pear'];
// 'pear' 값을 가진 요소 제거
fruits.remove('pear');
// 리스트의 마지막 요소 제거
fruits.removeLast();
// 1번 인덱스에 있는 요소 제거 (2번째 요소 제거)
fruits.removeAt(1);
// 1(포함)~3(미포함) 인덱스에 있는 요소 제거 (1~2번 인덱스의 요소 제거)
fruits.removeRange(1, 3);
// 'p'를 포함하는 모든 요소 제거 (조건을 만족하는 요소 제거)
fruits.removeWhere((fruit) => fruit.contains('p'));

 

length 속성으로 요소 개수를 확인할 수 있다.

final fruits = <String>['a', 'b', 'c'];
print(fruits.length); // 3

 

isEmpty, isNotEmpty 메서드로 리스트가 비었거나 비어있지 않은지 확인할 수 있다.

var fruits = [];
print(fruits.isEmpty); // true
print(fruits.isNotEmpty); // false

 

List.filled() 메서드로 고정된 길이(length)와 초기값을 갖는 리스트를 생성할 수 있다. 이 메서드로 생성한 리스트는 요소 추가/제거는 불가능하고 조회/업데이트만 할 수 있다. 3번째 인자 growable를 true로 설정하면 가변 길이 리스트로 생성돼서 추가/제거도 가능해진다.

// 첫번째 인자: 리스트 길이, 2번째 인자: 채울 값, 3번째 선택적 인자: 고정/가변 길이 여부 
final list1 = List.filled(3, 'a');
list1.removeLast(); // Cannot remove from a fixed-length list
list1[1] = 'b'; // OK

final list2 = List.filled(3, 'a', growable: true);
list2.removeLast();
print(list2); // ['a', 'a']

 

List.generate() 함수는 지정된 길이의 리스트를 생성하고, 생성자 함수(2번째 인자)가 반환한 값으로 채운다. 생성된 리스트는 growable 값에 따라 고정/가변 길이일 수 있다. JS의 Array.from() 메서드와 여러모로 유사한 점이 많다.

// 첫번째 인자: 리스트 길이, 2번째 인자: 생성자 함수, 3번째 선택적 인자: 고정/가변 길이 여부
final list = List.generate(3, (i) => 'a-$i', growable: true);
print(list); // [a-0, a-1, a-2]

 

Sets

Dart는 자바스크립트와 다르게 {} 중괄호를 사용한 리터럴 형식으로 집합을 정의할 수 있다. 자바스크립트의 Set은 삽입 순서를 기억하지만 Dart는 순서를 기억하지 않는 점이 다르다. 요소의 유일성을 보장하는 점은 동일하다.

final abc = {'a', 'b', 'c'};

 

{} 빈 중괄호 리터럴은 기본적으로 Map을 생성한다. Set(집합)을 생성하려면 명시적으로 타입을 지정해야 한다. Set의 제네릭 타입 인자는 1개다. 헷갈릴 수 있으니 주의하자.

final names = {};              // Map<dynamic, dynamic>
final names = <String, int>{}; // Map<String, int>
Map<String, int> name = {};    // Map<String, int>

final names = <String>{}; // Set<String>
Set<String> names = {};   // Set<String>

 

add(), addAll() 메서드로 집합에 값을 추가할 수 있다.

final fruits = {'apple', 'orange', 'pear'};
fruits.add('peach'); // 1개 요소만 추가할 때
fruits.addAll(['kiwi', 'mango']); // 여러 요소를 추가할 때
print(fruits); // {apple, orange, pear, peach, kiwi, mango}

 

다양한 방법으로 집합의 값을 제거할 수 있다.

final fruits = {'apple', 'orange', 'pear'};
// 'pear' 값을 가진 요소 제거 (1개 요소 제거)
fruits.remove('pear');
// 'orange', 'apple' 요소 제거 (여러 요소 제거)
fruits.removeAll(['orange', 'apple']);
// 'p'를 포함하는 모든 요소 제거 (조건을 만족하는 요소 제거)
fruits.removeWhere((fruit) => fruit.contains('p'));

 

length 속성으로 집합의 개수를 확인할 수 있다.

final fruits = {'apple', 'orange', 'pear'};
print(fruits.length); // 3

 

isEmpty, isNotEmpty 메서드로 집합이 비었거나 비어있지 않은지 확인할 수 있다.

final fruits = {'apple', 'orange', 'pear'};
print(fruits.isEmpty); // false
print(fruits.isNotEmpty); // true

 

Maps

Dart의 Map은 자바스크립트의 Map 객체처럼 모든 유형을 키/값으로 지정할 수 있다. Dart의 Map은 해시 테이블을 기반으로 구성된다. 따라서 모든 키는 해시 할 수 있어야 한다. 리터럴을 이용해서 Map을 정의할 수 있다. 키가 문자열이라면 항상 따옴표를 붙여야 한다.

final grades = { 'Alice': 'A', 'Bob': 'B', 'Charlie': 'C' };

 

인덱스 연산자로 원하는 값을 조회/업데이트/수정 할 수 있다. 조회한 키가 없는 경우엔 null을 반환한다.

final grades = { 'Alice': 'A' };

print(grades['Alice']); // A
print(grades['Bob']);   // null

grades['Bob'] = 'B';    // 추가
grades['Bob'] = 'B+';   // 업데이트

 

containsKey() 메서드로 키 포함 여부를 확인할 수 있다.

final grades = { 'Alice': 'A' };
print(grades.containsKey('Alice')); // true

 

addAll() 메서드로 다른 Map을 추가하거나 addEntries() 메서드로 MapEntry 객체(이터러블)를 추가할 수 있다. MapEntry는 Map의 개별 키/값 쌍을 나타내는 객체다.

final grades = { 'Alice': 'A' };

grades.addAll({ 'Bob': 'B' });
print(grades); // {Alice: A, Bob: B}

final charlieGrade = MapEntry('Charlie', 'C'); // MapEntry(Charlie: C)
grades.addEntries([charlieGrade]);
print(grades); // {Alice: A, Bob: B, Charlie: C}

 

remove()로 특정 항목을 제거하거나, removeWhere()로 조건에 부합하는 항목을 제거할 수 있다.

final grades = {'Alice': 'A', 'Bob': 'B', 'Charlie': 'C'};

grades.remove('Alice');
grades.removeWhere((key, value) => value == 'B');
print(grades); // {Charlie: C}

 

length 속성으로 항목의 개수를 확인할 수 있다.

final grades = {'Alice': 'A', 'Bob': 'B', 'Charlie': 'C'};
print(grades.length); // 3

 

isEmpty, isNotEmpty 메서드로 Map이 비었거나 비어있지 않은지 확인할 수 있다.

final grades = {'Alice': 'A', 'Bob': 'B', 'Charlie': 'C'};
print(grades.isEmpty); // false
print(grades.isNotEmpty); // true

 

Unmodifiable

자바스크립트는 기본적으로 불변성을 지원하지 않지만 Dart는 불변성으로 만드는 여러가지 방법을 제공한다. 수정하면 안 되는 컴파일 상수 컬렉션은 const 키워드를 사용한다(추가/제거 불가).

const fruits = <String>{'apple', 'orange', 'pear'};

 

final 키워드로 정의한 집합은 재할당 할 수 없지만 요소의 추가/제거는 허용한다.

final fruits = <String>{'apple', 'orange', 'pear'};
fruits.remove('apple'); // OK
fruits.add('banana'); // OK

 

unmodifiable 생성자를 사용하면 런타임 불변성을 보장할 수 있다(추가/제거 불가).

final _set = Set<String>.unmodifiable(['a', 'b', 'c']);
final _list = List<String>.unmodifiable(['a', 'b', 'c']);
final _map = Map<String, String>.unmodifiable({'foo': 'bar'});

 

Spread operator

Dart도 자바스크립트처럼 ... 전개 연산자를 지원한다.

final list1 = [1, 2, 3];
final list2 = [0, ...list1];
print(list2); // [0, 1, 2, 3]

 

컬렉션이 null 일 수 있는 경우엔 ...? 널 인식 전개 연산자를 사용해서 런타임 오류를 방지할 수 있다.

final list1 = null;
final list2 = [0, ...?list1];
print(list2); // [0]

 

전개 연산자는 List, Set, Map 등 이터러블에서 사용할 수 있다. Dart의 문자열은 Iterable 인터페이스가 구현되어 있지 않지만 split() 메서드 등을 활용해서 이터러블처럼 다룰 수 있다. 참고로 자바스크립트의 문자열은 Iterable 인터페이스가 구현되어 있는 이터러블이어서 전개 연산자를 사용할 수 있다.

// Map에서 전개 연산자 사용 예시
final map1 = { 'a': 1, 'b': 2 };
final map2 = { ...map1, 'c': 3 };
print(map2); // {a: 1, b: 2, c: 3}

// Set에서 전개 연산자 사용 예시
final set1 = {1, 2, 3};
final set2 = {0, ...set1};
print(set2); // {0, 1, 2, 3}

 

Collection if/for

Dart는 컬렉션(List, Set 등) 내부에서 if-else, for 문을 사용하여 요소를 동적으로 구성할 수 있다.

bool isLoggedIn = true;

final userMenu = [
  'Profile',
  'Settings',
  if (isLoggedIn) 'Logout' else 'Login',
  if (isLoggedIn) 'Edit'
];

print(userMenu); // [Profile, Settings, Logout, Edit]

 

컬렉션 안에서 for 문을 활용하면 다른 컬렉션을 매핑할 수 있다.

final keys = ['one', 'two', 'three'];
final values = [1, 2, 3];

final map = {
  'zero': 0,
  for (var i = 0; i < keys.length; i++) keys[i]: values[i]
};

print(map); // {zero: 0, one: 1, two: 2, three: 3}

 

for, if 문을 함께 사용할 수도 있다.

final numbers = List.generate(5, (i) => i + 1); // [1, 2, 3, 4, 5]
final doubledEvenNumbers = [
  for (var number in numbers)
    if (number % 2 == 0) number * 2 else number
];
 
print(doubledEvenNumbers); // [1, 4, 3, 8, 5]

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요