자바스크립트 += 연산자 사용법: 복합 대입 연산자의 개념과 활용 예제

자바스크립트의 += 연산자는 두 값을 더한 결과를 변수에 저장하는 복합 대입 연산자(addition assignment operator)입니다. 일반적인 variable = x + y 형식보다 훨씬 간결하고 가독성이 뛰어나 실무 코드에서 널리 활용됩니다.

플러스 기호(+)와 등호(=)가 나란히 붙어 있으면 오타로 생각할 수도 있습니다. 하지만 자바스크립트에서 이 조합은 고유한 의미를 지니며, 바로 앞서 언급한 복합 대입 연산자를 나타냅니다.

이 글에서는 += 연산자의 개념과 동작 원리를 살펴보고, 실제 예제를 통해 활용법을 익혀보겠습니다.

자바스크립트 += 연산자의 기본 개념

+= 연산자는 연산자 오른쪽의 값을 왼쪽 변수에 더한 뒤, 그 결과값을 왼쪽 변수에 다시 할당합니다.

먼저 기본 문법부터 확인해 보겠습니다:

let welcome = "Hello there, ";

console.log(welcome += "Sophie.");

위 예제에서는 값이 "Hello there, "인 변수 welcome을 선언했습니다. 그다음 += 연산자로 "Sophie." 문자열을 추가했는데, 이때 두 값이 합쳐진 결과가 다시 welcome 변수에 저장됩니다.

실행 결과는 다음과 같습니다:

Hello there, Sophie.

+= 연산자는 크게 두 가지 용도로 사용됩니다. 첫째, 두 숫자를 더할 때 사용합니다. 둘째, 두 문자열을 하나로 합칠 때 사용합니다.

사실 += 연산자는 아래 식의 축약형이라고 볼 수 있습니다:

x = x + y

즉, 복합 대입 연산자는 코드를 더 읽기 쉽게 만들어 줍니다. 두 값을 더해 변수에 할당하는 과정을 variable = x + y처럼 길게 쓰는 것보다 += 한 번으로 처리하는 것이 훨씬 간결합니다.

특히 반복문에서 실행 횟수를 세는 카운터(counter) 변수를 증가시킬 때 += 연산자를 매우 자주 접하게 됩니다.

숫자 덧셈에 += 연산자 활용하기

+= 연산자를 사용하면 두 숫자를 간단히 더할 수 있습니다. 예제로 도서 모임의 '올해의 책' 설문 결과 목록에서 "The Count of Monte Cristo"가 몇 번 등장하는지 세는 프로그램을 만들어 보겠습니다.

먼저 책 이름이 담긴 배열을 선언하고, 찾고자 하는 책의 등장 횟수를 추적할 변수를 만듭니다:

var books = ["The Count of Monte Cristo", "All My Sons", "Of Mice and Men", "The Count of Monte Cristo", "To Have and Have Not"];
var count = 0;

다음으로 for 반복문으로 배열을 순회하며 해당 책이 몇 번 등장하는지 세어 보겠습니다:

for (b in books) {
	if (books[b] === "The Count of Monte Cristo") {
		count += 1;
	}
}

console.log(`The Count of Monte Cristo was voted Book of the Year ${count} times.`);

이 반복문은 books 배열을 처음부터 끝까지 순회하면서, 각 요소의 제목이 "The Count of Monte Cristo"와 일치하는지 검사합니다. 일치하면 += 연산자로 count 값을 1 증가시키고, 그렇지 않으면 아무 작업도 수행하지 않습니다.

반복문이 종료되면 프로그램은 해당 책이 목록에 몇 번 등장했는지 출력합니다. 직접 실행해 보면:

The Count of Monte Cristo was voted Book of the Year 2 times.

코드가 목록 속 해당 도서의 등장 횟수를 정확히 세어 낸 것을 확인할 수 있습니다.

문자열 연결에 += 연산자 활용하기

+= 연산자는 두 문자열을 하나로 합치는 데에도 사용할 수 있습니다. 역시 variable = x + y 형식보다 훨씬 편리합니다.

예를 들어 사용자의 이름과 성이 각각 다른 문자열로 되어 있다면, += 연산자로 이 둘을 하나의 문자열로 합칠 수 있습니다.

이번에는 리스트에서 이름이 "B"로 시작하는 케이크만 골라 새 문자열에 추가하는 프로그램을 만들어 보겠습니다. "B"로 시작하지 않는 케이크는 무시됩니다.

먼저 리스트와 빈 문자열 변수를 선언합니다:

var cakes = ["Babka", "Raspberry Ganache", "Strawberry Cheesecake", "Baked Alaska"];
var start_with_b = "| ";

start_with_b 변수는 "B"로 시작하는 모든 케이크를 담게 되며, 초기값은 "| "입니다.

다음은 for 반복문으로 모든 케이크를 순회하며 "B"로 시작하는지 확인하는 코드입니다:

for (cake in cakes) {
	if (cakes[cake].startsWith("B")) {
		var message = cakes[cake] + " | ";
		start_with_b += message;
	}
}

console.log(start_with_b);

여기서는 startsWith() 메서드로 각 케이크 이름이 "B"로 시작하는지 검사합니다.

"B"로 시작하는 케이크가 발견되면 if문 내부가 실행됩니다. if문 안에서는 message라는 변수를 선언하고, 케이크 이름 뒤에 " | " 구분자를 붙여줍니다. 이렇게 하면 여러 케이크 이름이 문자열 안에서 서로 구분되어 표시됩니다.

그다음 += 연산자로 message의 내용을 start_with_b 변수 끝에 계속 이어 붙입니다.

실행 결과는 다음과 같습니다:

| Babka | Baked Alaska | 

"B"로 시작하는 케이크들만 골라 깔끔하게 출력된 것을 볼 수 있습니다.

참고로 문자열을 합치는 다른 방법으로는 + 연산자(연결 연산자)나 concat() 메서드가 있습니다. 이에 대해 더 알고 싶다면 자바스크립트 문자열 연결 관련 가이드를 함께 참고해 보세요.

마무리

복합 대입 연산자(+=)는 어떤 값에 다른 값을 더한 결과를 변수에 할당하는 연산자입니다. 주로 문자열 끝에 새 값을 추가하거나 숫자 값을 누적할 때 많이 사용되며, 반복문과 함께 쓰면 특히 유용합니다.

자바스크립트 학습을 더 깊이 있게 진행하고 싶다면, 온라인 강좌와 도서 추천 등 체계적인 학습 로드맵을 담은 자바스크립트 학습 가이드도 함께 참고해 보시기 바랍니다.