[모던 자바스크립트] - JavaScript 기본 문법

[모던 자바스크립트]는 아래 튜토리얼 과정을 바탕으로 작성하였습니다.

모던 JavaScript 튜토리얼

ko.javascript.info

모던 자바스크립트 Deep Dive 과정으로 가기 앞서 문법으로서의 자바스크립트부터, 브라우저에서 동작하는 자바스크립트까지 한 번 쭉 다뤄봅시다.. 문법적인 내용들은 언어마다 비슷한 부분들이 많기 때문에 기존에 알던 파트들은 요약하거나 생략했다는 점 참고해주세요.

1. Html에서 js 사용하기

script 태그

<!DOCTYPE HTML>
<html>
<body>
  <p>스크립트 전</p>
  <script>
    alert( 'Hello, world!' );
  </script>
  <p>스크립트 후</p>
</body>
</html>

type 속성

<script type="text/javascript"><!--
    ...
//--></script>

HTML4 에서는 <script>에 type을 명시하는 것이 필수였습니다만, 현재 표준에서는 타입명시가 필수가 아니고, 속성의 의미 또한 바뀌었습니다. 요즘은 사용하지 않지만 오래된 코드에서는 type 속성들을 발견할 수 있습니다.

src 속성

자바스크립트 코드의 양이 많은 경우에는 파일로 소분해서 저장할 수 있습니다.

바로 src 속성을 사용해서 말이죠.

<script src="/path/to/script.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

이와 같이 자바스크립트 코드를 html에 직접 보여주지 않고 별도의 파일로 분리한다면 가독성을 올릴 수 있겠습니다.

뿐만 아니라 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 "캐시"에 저장하기 때문에 성능상의 이점도 있습니다. 스크립트 코드가 짧고 단순하지 않다면 별도의 파일로 분리하는 것이 좋겠네요.

src 속성이 있으면 태그 내부의 코드는 무시된다는 점에 주의합시다.
- <script src="file.js"> alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다. </script>

2. 코드 구조

자바스크립트에서는 줄바꿈이 있다면 세미콜론을 생략할 수 있습니다. 물론 생략이 권장되지는 않습니다.

alert('Hello');
alert('World');

위 코드의 세미콜론은 제거해도 에러없이 동작합니다.

alert('Hello')
alert('World')

자바스크립트는 줄바꿈이 있으면 '암시적' 세미콜론으로 해석하고, 이와 같은 방식을 세미콜론 자동삽입이라 부릅니다.

자바스크립트에서 대부분의 경우, 줄바꿈은 '세미콜론'을 의미하지만 매번 그렇지는 않습니다.

예를 들면 이렇게요.

alert(3 +
1
+ 2);

어떤 줄이 +로 끝나면 그 줄은 불완전한 표현식이므로, 세미콜론이 필요하지 않다는 것을 자바스크립트도 알고 있습니다.

위와 같이 줄바꿈문자를 세미콜론으로 대체해서 사용한다면, 세미콜론이 필요하지만 자바스크립트가 이를 추정하지 못하는 상황도 발생할 수 있습니다. 말인 즉슨 세미콜론을 사용하는 것을 권장합니다.

예시로 하나 더 살펴봅시다.

alert("에러가 발생합니다.")
[1, 2].forEach(alert)

alert() 함수 호출 이후 세미콜론이 생략되어 있습니다만. 자바스크립트에서는 대괄호 앞에는 세미콜론이 있다고 가정하지 않기 때문에 실제 호출이 아래처럼 이루어져 에러가 발생합니다.

alert("에러가 발생합니다.")[1, 2].forEach(alert)

줄 바꿈으로 문을 나눴더라도, 문 사이엔 세미콜론을 넣는 것이 좋습니다. 자바스크립트 커뮤니티에서도 이를 규칙으로 정해 권장하고 있습니다.

다시 한번 정리하도록 하겠습니다.

세미콜론은 생략할 수 있습니다.
하지만 세미콜론을 사용하는 것이 더 안전하므로 이를 기억하고 따르도록 합시다.

3. 엄격 모드 ("use strict";)

자바스크립트는 오랫동안 호환성 이슈 없이 발전해왔으며 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었습니다.

하지만 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었는데, 이 때문에 하위 호환성 문제가 발생할 수 있었습니다. 그래서 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었습니다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 활성화되게 해놓았습니다.

사용법은 간단합니다. 단지 "use strict", 'use strict'를 선언해주기만 하면 됩니다.

주의해야 할 점은 반드시 최상단에 위치시켜야 한다는 점입니다.

또한 자바스크립트 엔진을 이전 방식으로 되돌리는 "no use strict"같은 지시자는 존재하지 않아, 일단 엄격 모드가 적용되면 돌이킬 방법은 없다는 점입니다.

alert("some code");
// 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시됩니다.

"use strict";

// 엄격 모드가 활성화되지 않습니다.

자바스크립트 언어가 제공하는 기능들을 하나씩 학습하면서 이 기능들이 엄격 모드와 비 엄격 모드에서 어떤 차이점을 보이는지 알아보겠습니다. 희소식을 알려드리자면 두 모드에서 차이를 보이는 기능이 많지 않다는 점과 엄격 모드를 사용하면 개발자의 삶의 질이 조금 더 높아진다는 점입니다.

4. 변수와 상수

let – 모던한 변수 선언 키워드입니다.
var – 오래된 변수 선언 키워드입니다. 잘 사용하지 않습니다. let과의 미묘한 차이점은 오래된 var 챕터에서 다루도록 하겠습니다.
const – let과 비슷하지만, 변수의 값을 변경할 수 없다는 점에서, const는 상수 선언 키워드입니다.

예전 자바스크립트에서는 let 없이도 값을 할당해 변수를 생성하는 것이 가능했습니다.

하지만, use strict를 쓰지 않으면 과거 스크립트와의 호환성을 유지할 수 있기 때문에 여전히 이 방식을 사용할 수 있습니다.

num = 5; // 변수 'num'이 정의되어있지 않더라도, 단순 할당만으로 변수가 생성됩니다.
alert(num); // 5

"use strict";
num = 5; // error: num is not defined

변수 명명 규칙

변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있습니다.
첫 글자는 숫자가 될 수 없습니다.
예약어는 변수명으로 사용이 불가능합니다. (ex/ let, return,class, function 등)
변수명은 간결하고, 명확해야 합니다. 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 하죠. 물론 네이밍은 누구에게나 어렵습니다.

5. 자료형

자바스크립트에는 8가지 자료형이 있습니다. 8개의 자료형을 모두 개괄적으로 다뤄봅시다.

자바스크립트는 우선 java나 cpp처럼 primitive type의 자료형이 따로 존재하지 않습니다. 자바스크립트에서 변수는 어떤 순간에는 문자열이 될 수도, 숫자형이 될 수도 있는 동적 타입을 가지는데, 이렇게 변수값의 타입을 언제든지 바꿀 수 있는 언어를 '동적 타입 언어'라 부릅니다.

숫자형

숫자형은 일반적으로는 정수와 부동소숫점이 포함되고 추가로 숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 '특수 숫자 값(special numeric value)'이 포함됩니다.

Infinity : 무한대를 나타냄
NaN : 연산 중 에러가 발생했다는 것을 나타내주는 값

alert( "숫자가 아님" / 2 ); // NaN, 문자열을 숫자로 나누면 오류가 발생합니다.
alert( "숫자가 아님" / 2 + 5 ); // NaN

BigInt

자바스크립트에서는 2^53-1 보다 크거나 -(2^53-1)보다 작은 정수는 리터럴로 나타낼 수 없습니다. 따라서 이 범위 밖의 숫자를 나타내기 위해서는 BigInt형을 사용해야 합니다. BigInt형은 표준으로 채택된 지 얼마 안 된 자료형으로, 길이에 상관없이 정수를 나타낼 수 있습니다. BigInt형 값은 정수 리터럴 끝에 n을 붙이면 만들 수 있습니다.

// 끝에 'n'이 붙으면 BigInt형 자료입니다.
const bigInt = 1234567890123456789012345678901234567890n;

문자열

자바스크립트에서는 문자열을 따옴표로 묶습니다. 이 때 따옴표는 큰 따옴표("), 작은 따옴표('), 백틱(`)을 사용할 수 있습니다.

큰 따옴표와 작은 따옴표는 취향차이고 백틱은 변수나 표현식을 감싼 후 ${…}안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습니다.

let name = "John";

// 변수를 문자열 중간에 삽입
alert( `Hello, ${name}!` ); // Hello, John!

자바스크립트에는 글자형(char)이 따로 없습니다. 고로 한 글자도 문자열처럼 사용합시다.

불린형

불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형입니다.

null

자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다릅니다. 다른 언어에선 null을 '존재하지 않는 객체에 대한 참조’나 '널 포인터(null pointer)'를 나타낼 때 사용합니다.
하지만 자바스크립트에선 null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용합니다.

let age = null;

let age = null;은 나이(age)를 알 수 없거나 그 값이 비어있음을 보여줍니다.

undefined

undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다.

let age;

alert(age); // 'undefined'가 출력됩니다.

변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됩니다.

하지만 이렇게 undefined를 직접 할당하는 걸 권장하진 않습니다. 변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 사용하고, undefined는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨둡시다.

객체, 심볼

자바스크립트에서 객체형은 특수한 자료형입니다. 객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라 부릅니다만 객체는 데이터 컬렉션이나 복잡한 개체를 표현할 수 있습니다.

심볼형은 객체의 고유한 식별자를 만들 때 사용합니다. 지금은 이정도까지만 기억하고, 뒤에 자세히 알아보겠습니다.

typeof 연산자

typeof 연산자는 인수의 자료형을 반환합니다.

사용 방법은 두 가지 입니다.

연산자 : typeof x
함수 : typeof(x)

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

마지막 세 줄은 약간의 설명이 필요해 보이네요.

Math는 수학 연산을 제공하는 내장 객체이므로 "object"가 출력됩니다. 내장 객체는 객체형이라는 것을 알려주기 위해 이런 예시를 작성해 보았습니다.
typeof null의 결과는 "object"입니다. null은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황입니다. 언어 자체의 오류이고, null이 객체가 아니라는 것에 주의합시다.
typeof는 피연산자가 함수면 "function"을 반환합니다. 그러므로 typeof alert는 "function"을 출력해줍니다. 그런데 '함수’형은 따로 없습니다. 함수는 객체형에 속합니다. 이런 동작 방식이 형식적으론 잘못되긴 했지만, 아주 오래전에 만들어진 규칙이었기 때문에 하위 호환성 유지를 위해 남겨진 상태입니다. 한편, 실무에선 이런 특징이 매우 유용하게 사용되기도 합니다.

6. alert, prompt, confirm 함수

브라우저는 사용자와 상호작용할 수 있는 세 가지 함수를 제공합니다.

alert : 메시지를 보여줍니다.

alert("Hello");

prompt : 사용자에게 텍스트를 입력하라는 메시지를 띄워줌과 동시에, 입력 필드를 함께 제공합니다. 확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고, 취소 또는 Esc를 누르면 null을 반환합니다.

result = prompt(title, [default]); // [default]에 값을 넣으면 박스안에 값이 default 값으로 채워짐

confirm : 사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여집니다. 사용자가 확인 버튼을 누르면 true를, 취소 버튼이나 Esc를 누르면 false를 반환합니다.

result = confirm(question); // 사용자가 확인 버튼을 누르면 true, 그 외의 경우는 false를 반환

7. 형 변환

자바스크립트는 "동적 타입 언어"로 함수와 연산자에 전달되는 값들도 대부분 적절한 자료형으로 자동변환됩니다. 이런 과정을 "형 변환"이라 부릅니다.

alert 함수가 전달받은 값의 자료형과 관계없이 이를 문자열로 자동 변환하여 보여주는 것이나, 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우가 형 변환의 대표적인 예시.

이 외에, 전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이라고 부릅니다. 이번 단락에서는 원시형의 형변환에 대해 알아보겠습니다.

문자열형 형변환

방금 언급했듯이 alert 메소드는 매개변수로 문자형을 받기 때문에 alert(value)에서 value는 문자열형이어야 하며, 만약 다른형의 값을 전달받으면 자동으로 문자열형으로 변환됩니다. 이 외에도 String() 메소드를 호출해 전달받은 값을 문자열형으로 변경할 수 있습니다.

let value = true;
alert( typeof value ); // boolean

value = String(value);
alert( typeof value ); // string
alert(value); // "true"

숫자형 형변환

숫자형으로의 형변환은 연산이나 표현식에서 자동으로 발생합니다.

숫자형이 아닌 값에 나누기를 적용한 경우와 같이 말이죠.

alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행됩니다.

Number() 함수로 값을 숫자형으로 명시해서 변환할 수도 있습니다. 이 때 value에 숫자가 아닌 문자가 포함된 경우에는 NaN을 반환하게 됩니다.

let age = Number("임의의 문자열 123"); // NaN

문자외에도

undefined를 숫자형으로 변환시도하는 경우 NaN이 리턴
null을 숫자형으로 변환시도하는 경우 0을 리턴
true and false는 1(true), 0(false)을 리턴
string -> 시작과 끝의 공백이 있는 경우 제거, 제거 후 문자열이 없다면("") 0, 있다면 숫자를 읽어 숫자로 리턴, 변환에 실패하면(문자가 남아있는 경우와 같이) NaN을 리턴합니다.

불린형 형변환

불린형 형변환은 비교적 간단합니다.

숫자 0, 빈 문자열, null, undefined, NaN과 같이 "비어있다고 느껴지는 값"들은 false
그 외는 전부 true로 변환됩니다.

그렇다면 문자열 "0"은 true일까요? false일까요?

숫자 0이었다면 false겠지만 문자열 "0"인 경우는 문자열이 비어있지 않기 때문에 true가 되겠죠.

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // 공백이 있는 문자열도 비어있지 않은 문자열이기 때문에 true로 변환됩니다.

아래 표현식들의 결과를 예측해 봅시다.

"" + 1 + 0 // "10"
"" - 1 + 0 // -1
true + false // 1
6 / "3" // 2
"2" * "3" // 6
4 + 5 + "px" // "9px"
"$" + 4 + 5 // "$45"
"4" - 2 // 2
"4px" - 2 // NaN
7 / 0 // Infinity
"  -9  " + 5 // "  -9  5"
"  -9  " - 5 // -14
null + 1 // 1
undefined + 1 // NaN
" \t \n" - 2 // -2

11. 논리연산자 ||, &&, !

자바스크립트에도 ||, &&, !연산자가 있습니다. 불린형에 대해 논리연산자가 어떻게 동작하는지에 대한 설명은 생략하고, 불린형이 아닌 자료형에 대해서 어떻게 동작하는지 알아볼겁니다.

첫 번째 truthy를 찾는 연산자 '||'

OR "||" 연산자를 여러 개 체이닝(chaining) 하면 첫 번째 truthy를 반환합니다. 피연산자에 truthy가 하나도 없다면 마지막 피연산자를 반환합니다.

여기서 말하는 truthy는 "참 같은 값"으로 숫자 0, 빈 문자열(""), null, undefined, NaN이 아닌 값들을 불린형으로 변환 시 true가 반환 되므로 "truthy(참 같은)" 값이라 부르고,
숫자 0, 빈 문자열(""), null, undefined, NaN은 불린형으로 변환 시 모두 false가 반환되며 이런 값들을 "falsy(거짓 같은)" 값이라고 부릅니다.

alert( 1 || 0 ); // 1 (1은 truthy임)

alert( null || 1 ); // 1 (1은 truthy임)
alert( null || 0 || 1 ); // 1 (1은 truthy임)

alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)

|| 연산자는 truthy를 찾기 위해 사용되기도 하지만 short cicuit evaluation(단락 평가) 기능에도 사용됩니다.

위에서 설명했듯 논리 연산자는 왼쪽에서 오른쪽으로 평가를 진행하는데, 평가 도중 truthy를 만나게 되면 평가를 멈추게 됩니다. 이런 프로세스를 단락평가라고 하며, 단락 평가는 아래처럼 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓰입니다.

조건 || alert("printed");

첫 번째 falsy를 찾는 AND 연산자 ‘&&’

&& 또한 왼쪽에서 오른쪽으로 나아가며 평가합니다.

// 첫 번째 피연산자가 truthy이면,
// AND는 두 번째 피연산자를 반환합니다.
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5

// 첫 번째 피연산자가 falsy이면,
// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다.
alert( null && 5 ); // null
alert( 0 && "아무거나 와도 상관없습니다." ); // 0

각 피연산자는 불린형으로 변환되며 변환된 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다.
피연산자 모두가 평가되는 경우(모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자가 반환됩니다.

이제 "|| 연산자는 첫 번째 truthy를 찾기 위해, && 연산자는 첫 번째 falsy를 찾기 위해 사용된다"라는 차이가 느껴지네요.

!! 연산자

Not연산자 !를 두개 연속 사용하면 불린형으로 변환할 수 있습니다.

첫 번째 NOT 연산자는 피연산자로 받은 값을 불린형으로 변환한 후 이 값의 역을 반환하고,

두 번째 NOT 연산자는 첫 번째 NOT 연산자가 반환한 값의 역을 반환합니다.

이렇게 NOT을 연달아 사용하면 특정 값을 불린형으로 변환할 수 있습니다.

alert( !!"non-empty string" ); // true
alert( !!null ); // false

아래 코드들의 결과값을 예측해봅시다.

alert( null || 2 || undefined ); // (1)

alert( alert(1) || 2 || alert(3) ); // (2)

alert( 1 && null && 2 ); // (3)

alert( alert(1) && alert(2) ); // (4)

alert( null || 2 && 3 || 4 ); // (5)


// (1) : 첫번째 truthy를 찾아보고, 없으면 마지막 인자를 리턴하므로 alert(2)가 실행
// (2) : 첫번째 truthy를 찾아보고 없으면 마지막 인자를 리턴하므로 alert(1) -> alert(2) 순서로 실행
// (3) : 첫번째 falsy를 찾아보고 없으면 마지막 인자를 리턴합니다. null이 falsy이므로 alert(null)가 실행
// (4) : 설명 생략.  alert(1)을 호출하면 undefined가 리턴됨 따라서 alert(1) -> alert(undefined)
// (5) : 누가 코드를 이렇게 짰을까요. &&의 우선순위는 ||보다 높습니다. 
// 따라서 &&가 먼저 실행되므로 null || 3 || 4로 치환됩니다. alert(3) 출력

if (-1 || 0) alert( 'first' ); // (1)
if (-1 && 0) alert( 'second' ); // (2)
if (null || -1 && 1) alert( 'third' ); // (3)

// (1) : -1 || 0 은 -1이므로 alert('first') 실행 
// (2) : -1 && 0은 0이므로 실행 X
// (3) : -1 && 1은 1로 치환. 따라서 null(falsy) || true를 평가하면 true이므로 alert('third')실행

12. nullish 병합 연산자 '??'

nullish 병합연산자 '??'는 최근에 추가된 문법으로 이 연산자를 사용하면 짧은 문법으로 여러 피연산자중 그 값이 "확정되어 있는" 변수를 찾을 수 있습니다.

예시를 하나 살펴봅시다.

x = a ?? b

a가 null도 아니고 undefined도 아니면 a
그 외는 b가 x에 할당됩니다.

'??' 없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다.

x = (a != null && a != undefined ) ? a : b;

??는 변수에 기본값을 할당하는 용도로 값이 할당된 변수를 빠르게 찾을 수 있습니다.

다음과 같이 말이죠.

// height가 null이나 undefined인 경우, 100을 할당
height = height ?? 100;

??와 ||의 차이

눈치채셨을지 모르지만 '??'은 단락평가 측면에서 본다면 '||'와 상당히 유사한 것을 알 수 있습니다. 실제로 위 예시에서 ??을 ||로 바꿔도 동일하게 동작하죠. 하지만 두 연산자 사이에는 중요한 차이점이 있습니다.

|| 는 첫번째 truthy를 반환하지만,
?? 는 첫번째 정의된 값을 반환합니다.

정의된 값은 undefined와 null, 숫자 0을 제외한 값으로 이 세 가지 값을 구분지어 다뤄야 할 때 '??'가 중요한 역할을 합니다.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

??를 사용할 때 주의할 점
- ?? 는 대다수의 연산자보다 낮고 ?와 =보다는 우선순위가 높으므로 제약을 피하기 위해 ??를 사용한다면 괄호로 묶어 사용합시다.
- ex) let a = 1 && 2 ?? 3; -> let a = (1&&2) ?? 3;

15. 함수

스크립트를 작성하다보면 유사한 동작을 하는 코드가 여러 곳에서 재사용되는 경우가 있습니다.

이럴 때 사용하는 함수에 대해서 알아봅시다.

함수 선언

함수 선언 방식은 아래와 같이 사용할 수 있습니다.

function showMessage() {
  alert( '안녕하세요!' );
}

showMessage(); // 함수 실행

만약 매개변수가 필요하다면 괄호에 매개변수를 작성해주면 됩니다.

function name(parameter1, parameter2, ... parameterN) {
  // 함수 본문
}

자바와 마찬가지로 자바스크립트에서도 함수 내에서 선언한 지역변수는 함수 안에서만 접근할 수 있습니다.
마찬가지로 외부변수도 함수내부에서 접근할 수 있습니다.
마찬가지로 내부에서 외부와 동일한 변수명을 가진다면 내부변수는 외부변수를 가립니다.

뿐만 아니라, 함수내부에서 외부변수의 값을 변경할 수 있습니다.

let userName = 'John';

function showMessage() {
  userName = "Bob"; // (1) 외부 변수를 수정함

  let message = 'Hello, ' + userName;
  console.log(message);
}

console.log( userName ); // 함수 호출 전이므로 John 이 출력됨

showMessage();

console.log( userName ); // 함수에 의해 Bob 으로 값이 바뀜

자바에서는 기본적으로 값에 의한 호출(call by value)을 사용하기 때문에 메서드 내부에서 (static이 아닌) 외부 변수를 직접 수정할 수 없었는데, 함수에서 전역변수의 값을 바꿀 수 있는 방식이 좋은 건지는 잘 모르겠네요.

기본값

함수 호출 시 매개변수에 인수를 전달하지 않으면 그 값은 undefined가 됩니다. 하지만 '='을 사용해 기본값을 설정해줄 수 있습니다.

showMessage("Ann");

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

기본값은 "함수를 호출할 때" 평가되어 할당됩니다. 고로 아래 예시에서는 text에 인자가 전달되지 "않는"경우에만 anotherFunction()이 호출되어 할당된다는 것이.

function showMessage(from, text = anotherFunction()) {
  // anotherFunction()은 text값이 없을 때만 호출됨
  // anotherFunction()의 반환 값이 text의 값이 됨
}

return 함수

자바스크립트는 동적 언어이기때문에 다른언어에서처럼 return 함수를 선언할 때 자료형을 명시하지 않아도 됩니다.

따라서 반환값을 가져오는 함수를 작성할 때에는 위의 void 함수처럼 작성하고 마지막에 return만 추가해주면 되겠습니다.

function sum(a, b) {
  return a + b;
}

let result = sum(1, 2);
alert( result ); // 3

return문이 없거나 return 지시자만 있는 함수는 undefined를 반환합니다.

function doNothing() { /* empty */ }

alert( doNothing() === undefined ); // true

주의할 점
- return과 값 사이에 절대 줄을 삽입하지 맙시다.
- 자바스크립트는 줄바꿈문자를 세미콜론으로 변환하기 때문에 의도치 않게 동작할 수 있습니다.
- 줄바꿈이 반드시 필요하다면 괄호를 필수로 활용합시다.

return
 (some + long + expression + or + whatever * f(a) + f(b))
 
// 실제 동작
return;
 (some + long + expression + or + whatever * f(a) + f(b))

return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
  );

16. 함수 표현식

자바스크립트는 함수를 "특별한 종류의 값"으로 취급합니다. 다른 언어에서처럼 "특별한 동작을 하는 구조"로 취급되지 않습니다.

함수는 값이기 때문에, 함수를 괄호 없이 값으로서 출력해보면 함수 코드를 보여줍니다.

function sayHi() {
  alert( "Hello" );
}

alert( sayHi ); // 함수 코드가 보임 [Function: sayHi]

함수는 값이기 때문에 복사 또한 가능합니다. 신기하네요.

function sayHi() {   // (1) 함수 생성
  alert( "Hello" );
}

let func = sayHi;    // (2) 함수 복사

func(); // Hello     // (3) 복사한 함수를 실행(정상적으로 실행됩니다)!
sayHi(); // Hello    //     본래 함수도 정상적으로 실행됩니다.

(1) 에서 함수 선언 방식을 이용해 함수를 생성합니다. 생성한 함수는 sayHi라는 변수에 저장됩니다.
(2) 에선 sayHi를 새로운 변수 func에 복사합니다. 이때 sayHi 다음에 괄호가 없다는 점에 유의하시기 바랍니다. 괄호가 있었다면 func = sayHi() 가 되어 sayHi 함수 그 자체가 아니라, 함수 호출 결과(함수의 반환 값) 가 func에 저장되었을 겁니다.

이젠 sayHi() 와 func()로 함수를 호출할 수 있게 되었습니다.

추가로 변수에 함수를 할당하는 함수 표현식에는 함수로서의 값을 할당해주는 작업이기 때문에 함수 선언과 달리 세미콜론을 붙여주어야 한다는 점 기억합시다.

// 함수 선언
function sayHi() { 
  alert('hi');
}

// 함수 표현식
let sayHi = function() {
	alert('hi');
};

콜백 함수

함수를 값처럼 전달하는 예시, 함수 표현식에 관한 예시를 좀 더 살펴봅시다.
그 전에 매개변수가 3개 있는 함수인 아래 ask(question, yes, no)를 먼저 봅시다.

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "동의하셨습니다." );
}

function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);

실무에서 이처럼 재사용 가능성을 고려하여 작성하는 방식은 유용하게 쓰입니다.

함수 ask의 인수, showOk와 showCancel은 "콜백 함수" 또는 "콜백"이라고 불립니다.

showOk()와 showCancel() 함수가 재사용의 여지가 없다면 이렇게 작성할 수도 있겠네요.

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

어떤가요? 조금 더 깔끔해진 것 같네요. 이렇게 외부에 선언하지 않고 이름없이 선언한 함수를 익명 함수 라고 부르는데요. 이 함수는 변수에 할당된 게 아니기 때문에 ask 바깥에서는 접근할 수 없습니다. JS를 사용하다 보면 이렇게 콜백을 활용한 코드를 아주 자연스레 만나게 됩니다. 당황하지 맙시다.

함수 선언문, 함수 표현식 어떤 걸 써야 할까

선언문과 표현식은 아까 말한 것처럼 세미콜론 여부로 보면 문법에서 다릅니다. 뿐만 아니라 스코프 측면에서, JS 엔진이 언제 함수를 생성하는지에서도 차이가 있습니다. 코드를 봅시다.

스코프 차이

let age = prompt("나이를 알려주세요.", 18);

// 조건에 따라 함수를 선언함
if (age < 18) {

  function welcome() {
    alert("안녕!");
  }

} else {

  function welcome() {
    alert("안녕하세요!");
  }

}

welcome(); // Error: welcome is not defined

조건에 따라 함수를 선언하는 경우 블록 내부에서만 해당 함수를 사용할 수 있기 때문에 블록 바깥에서는 welcome() 함수를 사용할 수 없겠네요. 함수 표현식을 사용하는 경우는 어떨까요?

let age = prompt("나이를 알려주세요.", 18);

let welcome;

if (age < 18) {

  welcome = function() {
    alert("안녕!");
  };

} else {

  welcome = function() {
    alert("안녕하세요!");
  };

}

welcome(); // 제대로 동작합니다.

if-else 블럭에서 함수를 변수에 값으로서 할당해주기 때문에 블럭 밖에서도 동작하는 것을 볼 수 있습니다.

자바스크립트 엔진이 언제 함수를 생성하는가?

함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다.

~~ code

let sum = function(a, b) {		//  도달 시점에 생성.
  return a + b;
};

~~ code

함수 선언문은 조금 다릅니다. 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있습니다. 따라서 전역 함수 선언문은 스크립트 어디에 있느냐에 상관없이 어디에서든 사용할 수 있습니다. JS는 다른언어와 마찬가지로 스크립트 실행 전 전역에 선언된 함수 선언문을 찾고 함수를 생성하므로 초기화 단계에서 함수 선언방식으로 정의한 함수가 생성됩니다.

따라서 아래와 같이 선언문으로 작성한 함수는 어디에 선언되어 있던 상관없이 잘 동작하지만,

sayHi("John"); // Hello, John

function sayHi(name) {
  alert( `Hello, ${name}` );
}

이렇게 표현식으로 작성한 코드는 읽지 못하는 것을 확인할 수 있습니다.

sayHi("John"); // error!

let sayHi = function(name) {  // (*) 마술은 일어나지 않습니다.
  alert( `Hello, ${name}` );
};

함수 표현식과 선언문중 어떤 것을 사용해야 할까?

위치에 상관없이 어디서든 사용가능하다는 측면에서 보면 함수 선언문이, 스코프 측면에서는 함수 표현식이 좋아보이네요. 하지만 필자는 아래와 같은 근거로 함수 선언문을 더 권장하고 있습니다. 저 또한 이게 더 익숙한 것 같네요.

함수 선언문으로 함수를 정의하면, 함수가 선언되기 전에 호출할 수 있어서 코드 구성을 좀 더 자유롭게 할 수 있습니다.
함수 선언문을 사용하면 가독성도 좋아집니다. 코드에서 let f = function(…) {…}보다 function f(…) {…} 을 찾는 게 더 쉽죠. 함수 선언 방식이 더 “눈길을 사로잡습니다”.

※ 그렇다고 표현식을 쓰지 말라는 뜻은 아닙니다. 필요하다면 씁시다.

17. 화살표 함수 기본

함수 표현식보다 더 단순하고 간결하게 함수를 만들 수 있습니다. Java에서 람다처럼요.

// 예시 1
let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.
let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

// 예시 2
let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일합니다.

alert( double(3) ); // 6


// 예시 3
let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요!");

welcome();

// 예시 4 : 본문이 여러 줄인 경우
let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

alert( sum(1, 2) ); // 3

이렇게 자바스크립트의 기본 중 기본 문법을 알아보았습니다. 그 중에서도 조건문이나 반복문은 크게 다를 게 없어서 생략했습니다. 부족하면 아래 링크를 참고하시면 됩니다.

문법은 이제 시작입니다. 객체와 클래스부터 JS에서의 자료구조, 함수의 심화, 프로토타입, 에러 핸들링, 프로미스와 async/wait, 제너레이터와 비동기 이터레이션, 모듈까지 아직 갈 길이 멉니다. 하나씩 천천히 해봅시다.

자바스크립트 기본