JavaScript & C 문법 비교

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

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

내가 아직 다루지 못하는 두 언어의 특징이나 기능, 구체적인 동작 원리의 차이점은 C와 JavaScript의 비교 이 글에 자세히 정리되어 있다.

1. 출력

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

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

2. 접합 연산자

C에는 없는 문자열 접합 연산자 +를 자바스크립트는 지원한다. 두 문자열을 합치는 기능을 한다.

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

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

> Hello World!

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

3. 자료형

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

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

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

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

3.1. 기본 자료형 (Primitive values)

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

1) Number

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

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 타입이 있다.

3.2. 객체 자료형 (Objects)

• 자바스크립트(뿐만 아니라 거의 모든 컴퓨터 개념)에서 객체는 식별자로 참조할 수 있는, 메모리에 저장된 값이다.

• 자바스크립트 객체는 키와 값의 매핑이다. 키는 문자열이고 값은 다른 어떤 값도 될 수 있다.

• new 함수

  • 객체 자료형과 기본형 자료형의 가장 큰 차이점은 Reference(참조)에 있다. 기본형 변수는 다른 변수에 값을 할당하거나 함수 인자로 넘길 때 값을 복사하여 전달하지만, 객체는 메모리 주소를 복사시키며 값 자체는 복사되지 않아 같은 객체를 참조하게 된다.

  • 즉, 함수를 호출할 때 new을 붙이면 새로운 객체를 만든 후에 이를 리턴한다.

1) Array

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

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

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

  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() 생성자를 사용해 생성한다.

• 콤마 , 를 이용해 여러 개의 키-값 쌍을 저장할 수 있다.

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

> 24

3) Date

• 시간을 나타낼 때 사용하는 객체 자료형

• new Date() 생성자를 사용해 생성

• 현재 날짜와 시간을 가지는 인스턴스 반환 (현재의 기준은 시스템 시계 설정 따름)

• 자세한 사용법은 이 블로그 참고.

3.3. 참고

• 자바스크립트의 자료형
• Javascript 의 자료형

4. for-in문

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

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

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);

> 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이라는 키워드 사용

• 자바스크립트에서는 함수도 객체 자료형(데이터)로 취급한다.

  • 따라서 변수에 함수를 할당할 수 있다.

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

  function sum(a, b) {
      var c = a + b;
      return c;
  }
  
  var add = sum;
  add(1,2);
  typeof add;

  > 3
  > "function"

5.1. 익명 함수(Anonymous Function)

• 다시 사용할 일이 없는, 즉 한 번만 쓰고 버릴 함수의 경우 익명 함수로 사용할 수 있다.

• 위 예제에서 쓰였던 함수를 익명함수로 만들면 아래와 같다.

  var sum = function(a, b){
      var add = a + b;
      return add;
  }
  
  sum(1, 2); // > 3

  함수 function에는 이름이 없고, 바로 sum 변수에 넣어서 사용한다. 굳이 함수를 재사용 할 필요가 없다면 변수에 바로 함수를 넣어버리는 것이다.

• 사실 아직 정확한 사용법은 모르겠다. 차차 공부하다가 내용이 추가되길..

5.2. 콜백 함수(Callback Function)

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

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

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

function one() { 
    return 1;
}

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

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

> 3

6. 유효 범위(Scope)

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

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

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

• 블록 레벨 스코프

  • const

  • let

• 함수 레벨 스코프

  • var

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

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

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

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

• argc : argv - 1. 즉, 문자열이 몇 개 입력되었는지에 대한 정보.

• argv : 입력된 문자열을 2차원 배열 형태로 저장한다. argv[0] 은 항상 파일 이름(문자열).