---
description: >-
  이 글은 단순히 두 언어 문법의 차이을 비교한다. 자바스크립트의 문법이 C와 많이 유사한 것 같아서, 약간 다른 표현법 정도만 정리해두면
  쉽게 외울 수 있을 것 같다.
---

# JavaScript & C 문법 비교

이 글은 단순히 **두 언어 문법의 차이**을 비교한다. 자바스크립트의 문법이 C와 많이 유사한 것 같아서, 약간 다른 표현법 정도만 정리해두면 쉽게 외울 수 있을 것 같다.

내가 아직 다루지 못하는 두 언어의 특징이나 기능, 구체적인 동작 원리의 차이점은 [C와 JavaScript의 비교](https://m.post.naver.com/viewer/postView.nhn?volumeNo=17988573\&memberNo=21815) 이 글에 자세히 정리되어 있다.

## 1. 출력

```c
printf("Hi Daehyun lee"); //C
```

```javascript
console.log("Hi Daehyun lee"); //js
```

## 2. 접합 연산자

C에는 없는 **문자열 접합 연산자 `+`**&#xB97C; 자바스크립트는 지원한다. 두 문자열을 합치는 기능을 한다.

```javascript
var str1 = "Hello";
var str2 = "World!";
var str3 = null;

str3 = str3 + str2;
console.log(str3);
```

```javascript
> Hello World!
```

그 외 산술 연산자, 할당 연산자, 비교 연산자, 논리 연산자, 조건 연산자(`(조건)? A:B`) 등은 C와 똑같다.

## 3. 자료형

자바스크립트는 변수를 선언할 때 **별도로 자료형을 명시하지는 않는다.**

C언어가 자료형에 따라 int, char 등을 사용해 변수를 선언하는 반면, 자바스크립트는 `var` 라는 키워드를 사용하여 변수나 객체를 선언한다. `var`에다가 문자를 넣으면 문자형이되고, 정수를 넣으면 정수형이 된다.

> 이런 특징 때문에 자바스크립트를 **느슨한 타입(loosely typed) 언어**, **혹은 동적(dynamic) 언어** 라고 부른다.

입력되는 값을 인터프리터가 알아서 파악한다는 의미인데, 이것이 가능한 이유는 `내장형 객체`라는 개념으로 **기본 자료형(Primitive)**&#xC774; 이미 자바스크립트 내에 존재하기 때문이다. 기본형 외에 `배열`같은 **객체 자료형(Objects)**&#xC774; 있다. \


### 3.1. 기본 자료형 (Primitive values)

* C언어와는 다르게, 기본 자료형의 모든 값은 한번 선언되면 수정이 불가능한 `불변값(immutable value)`이다.&#x20;

#### 1) Number

10진수, 8진수, 16진수와 소수점이 있는 실수 및 지수를 사용할 수 있다.

```javascript
var number = 1;
var float = 5.6;
```

그밖에도 Number 타입에는 3가지 상징적인 값이 정의되어 있다. `+Infinity`, `-Infinity`, 그리고 `NaN(숫자가 아님)`이 있다.

#### 2) String

문자열을 작성할 때는 **큰따옴표**나 **작은따옴표** 모두 사용 가능하다. C언어와 마찬가지로 문자열의 첫 글자는 0번 인덱스로, 그 다음 글자는 1번 인덱스로 참조할 수 있다. 하지만 그 값을 수정할 수는 없다.

원래 문자열에서 일부가 수정된 다른 문자열을 만드는건 가능하다.

* 원래 문자열에서 각각의 글자를 추출하거나 `String.substr()`을 사용해서 만든 부분 문자열
* 접합 연산자 (`+`) 나 `String.concat()` 으로 두 문자열을 합친 문자열

#### 3) Boolean

Boolean 은 논리적인 요소를 나타내고, `true` 와 `false` 의 두 가지 값을 가질 수 있다. true와 false는 예약어로서 따옴표를 쓰지 않으니 주의.

#### 4) Null

NULL 타입은 딱 한가지 값 `null` 을 가진다. 어떤 값이 의도적으로 비어있음을 표현하며 boolean 연산에서는 거짓으로 취급한다.

#### 5) Undefined

값을 할당하지 않은 변수는 `undefined` 값을 가진다.

이 외에도 ECMAScript 6에서 추가된 [Symbol](https://developer.mozilla.org/ko/docs/Glossary/Symbol) 타입이 있다.

### 3.2. 객체 자료형 (Objects)

* 자바스크립트(뿐만 아니라 거의 모든 컴퓨터 개념)에서 `객체`는 `식별자`로 참조할 수 있는, 메모리에 저장된 값이다.
* 자바스크립트 객체는 `키`와 `값`의 매핑이다. `키`는 문자열이고 `값`은 다른 어떤 값도 될 수 있다.
* `new` 함수
  * 객체 자료형과 기본형 자료형의 가장 큰 차이점은 `Reference(참조)`에 있다. 기본형 변수는 다른 변수에 값을 할당하거나 함수 인자로 넘길 때 값을 복사하여 전달하지만, **객체는 메모리 주소를 복사시키며 값 자체는 복사되지 않아 같은 객체를 참조**하게 된다.
  * 즉, 함수를 호출할 때 new을 붙이면 새로운 객체를 만든 후에 이를 리턴한다.

#### 1) Array

자바스크립트의 배열은 `[]`나 `new Array()`로 생성하며, 크기의 제약이 없고, 하나의 배열에 서로 다른 타입의 변수가 들어갈 수 있다.

```javascript
var array1 = [1, 2, 3];
var array2 = new Array(2,4,5,"a",'b');
```

*   배열 연산을 위한 다양한 메소드를 지원한다.

    ```javascript
    var array = new Array(2,4,5,"a",'b');

    array.length() //길이
    array.push(값) //맨 뒤에 요소 추가
    array.pop() //맨 뒤 요소 삭제
    array.unshift(값) //맨 앞에 요소 추가
    array.shift() //맨 앞 요소 삭제
    array.sort() //요소 정렬
    ```

#### 2) Dictionary

* `key:value` 형태로 저장한다.
* 중괄호 `{}` 혹은 `new Object()` 생성자를 사용해 생성한다.
* 콤마 `,` 를 이용해 여러 개의 키-값 쌍을 저장할 수 있다.

```javascript
var me = {'name':'daelee', 'age':24};
console.log(me.age);
```

```javascript
> 24
```

#### 3) Date

* 시간을 나타낼 때 사용하는 객체 자료형
* `new Date()` 생성자를 사용해 생성
* **현재 날짜와 시간**을 가지는 인스턴스 반환 (현재의 기준은 시스템 시계 설정 따름)
* 자세한 사용법은 [이 블로그](https://poiemaweb.com/js-date) 참고.

### 3.3. 참고

* [자바스크립트의 자료형](https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures)
* [Javascript 의 자료형](https://velog.io/@bungouk6829/Javascript-%EC%9D%98-%EC%9E%90%EB%A3%8C%ED%98%95)

## 4. `for-in`문

C언어와 마찬가지로 자바스크립트의 반복문은 `for`문, `while`문, `do-while`문을 지원한다.

그리고, 자바스크립트에는 for문의 다른 형태로 `for-in`문이 존재한다. 이 반복문은 배열의 원소들이나 객체를 쉽게 탐색할 수 있도록 해준다.

```javascript
var a = ['a', 'b', 'c', 'x', 'y', 'z'];
var result = '';

for (var i in a) {
    result += 'index:'+ i + ', value:'+ a[i] + '\n'; 
}

console.log(result);
```

```javascript
> index:0, value:a
index:1, value:b
index:2, value:c
index:3, value:x
index:4, value:y
index:5, value:z
```

## 5. 함수

* C와는 다르게 함수의 **반환값에 대한 자료형 명시하지 않아도 된다.**
* 선언할 때 `function`이라는 키워드 사용
*   자바스크립트에서는 함수도 `객체 자료형`(데이터)로 취급한다.

    * 따라서 변수에 함수를 할당할 수 있다.
    * 즉, 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 **객체를 만드는 창조자**라고 할 수 있다.

    ```javascript
    function sum(a, b) {
        var c = a + b;
        return c;
    }

    var add = sum;
    add(1,2);
    typeof add;
    ```

    ```javascript
    > 3
    > "function"
    ```

### 5.1. 익명 함수(Anonymous Function)

* 다시 사용할 일이 없는, 즉 한 번만 쓰고 버릴 함수의 경우 `익명 함수`로 사용할 수 있다.
*   위 예제에서 쓰였던 함수를 익명함수로 만들면 아래와 같다.

    ```javascript
    var sum = function(a, b){
        var add = a + b;
        return add;
    }

    sum(1, 2); // > 3
    ```

    함수 `function`에는 이름이 없고, 바로 `sum` 변수에 넣어서 사용한다. 굳이 함수를 재사용 할 필요가 없다면 변수에 바로 함수를 넣어버리는 것이다.
* 사실 아직 정확한 사용법은 모르겠다. 차차 공부하다가 내용이 추가되길..

### 5.2. 콜백 함수(Callback Function)

**특정 이벤트가 발생하면 호출되는 함수**. 예를 들어 버튼을 클릭한다던지, 네트워크를 통해 어떤 데이터가 도착한다던지 등의 이벤트가 발생했을 때 **어떤 함수를 호출해야 할지 미리 지정**해주는 것이다.

콜백 함수를 지정하는 방법은 간단하다. **함수의 인자로서 함수를 넘겨주는 것이다.**

주로 **익명함수를 인자로 넘겨줌과 동시에 생성**하여 콜백함수를 사용한다.

```javascript
function one() { 
    return 1;
}

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

invoke_and_add(one, function() { 
  return 2; 
});
```

```javascript
> 3
```

## 6. 유효 범위(Scope)

일반적으로 C에서는 변수 선언이 코드 블록 단위로 유효하다. 이를 `Block-level scope`(블록 레벨 스코프)라고 한다.

하지만 자바스크립트는 `Function-level scope`(함수 레벨 스코프)를 사용한다. 즉, 자바스크립트에서는 함수 블록 내에서 선언된 변수는 **함수 블록 내에서만 유효하고 함수 외부에서는 참조할 수 없는 것이다.**

다만, ES6 부터는 `const`와 `let`을 이용해 블록레벨스코프도 지원한다.

* 블록 레벨 스코프&#x20;
  * `const`
  * `let`
* 함수 레벨 스코프
  * `var`

## 7. 콘솔에서 값 입력하기(argv)

`process.argv` 를 통해 입력값을 받고 저장할 수 있다.

```javascript
var args = process.argv;

console.log(args);
console.log(args[2]);
```

```
$ node argv.js daehuyn 24
[
  'C:\\Program Files\\nodejs\\node.exe',
  'C:\\Users\\DaeHyun Lee\\Desktop\\yebalja\\syntax\\argv.js',
  'daehuyn',
  '24'
]
daehyun
```

자바스크립트는 콘솔에서 값을 입력하면, **배열의 형태**로 저장한다.

`index[0]` 에는 `node.js runtime` 위치에 대한 정보를, `index[1]` 에는 실행시킨 파일의 경로를 갖고있다. 즉, 우리가 입력한 **argv 값은 2번째 인덱스에서부터 저장**되는 것이다.

C에서 argv\[0]이 파일 이름 값을 취하고 입력된 값은 1번 인덱스부터 저장되는 것과 비교된다. C에서는 이렇게 썼었다.

#### C의 argv

```c
int        main(int argc, char **argv){
    return (0);
}
```

* `argc` : argv - 1. 즉, 문자열이 몇 개 입력되었는지에 대한 정보.
* `argv` : 입력된 문자열을 2차원 배열 형태로 저장한다. argv\[0] 은 항상 파일 이름(문자열).
