[JavaScript] 02. 자바스크립트 기본 문법

* 이번 글에서는 자바스크립트의 기본 문법들이 어떤 종류가 있고, 그 문법들은 어떠 것인지 간단하게만 설명하고 다음 글부터 문법 종류 한 개씩 짚어가보도록 하겠습니다.

 

🟡 1. 변수 (variable)

 - 수학을 배울 때 들었던 단어와 하는 일이 비슷합니다. 어떤 값을 담을 수 있는 그릇이라고 생각하시면 됩니다 :) 
조금 더 어렵게 얘기를 해본다면 변수는 값(value)을 저장(할당)하고 저장된 값을 참조하기 위해 사용합니다. 그리고 정확히는 변수에는 값이 저장되어 있는 것이 아니고 값이 저장되어 있는 메모리 주소를 저장하고 있습니다. 

변수 저장 개념

 - 우리가 변수 'a'에 '닭강정'을 저장했다고 가정하면, 변수 'a'에는 '닭강정'의 메모리 주소인 '속초시'가 저장되게 됩니다. 그래서 우리가 변수 'a'를 호출하면 저장소에서 '속초시'를 찾아가 '닭강정'을 꺼내옵니다. 

 - 변수를 설명할 때 선언, 할당이라는 단어가 앞으로 많이 쓰일 건데, 선언이란 변수를 만드는 행동이고 할당은 변수에 값을 저장하는 행동을 말합니다. 자바스크립트에서 변수를 선언할 때는 var, let, const라는 용어를 사용합니다.

// 변수의 선언
// ES5
var a;

// ES6
let b;
const c;

 var, let, const를 이용하여 a, b, c라는 변수를 선언했습니다. 지금 상태에서 a, b, c 안에는 아무 값도 없습니다. 정확히는 undefined이라는 값이 들어있는데 결국 값이 없다고 생각하시면 됩니다. 이것을 값이 할당이 되지 않았다.라고 표현합니다.

그리고 자바스크립트에는 여러 개의 버전이 있지만 크게 ES5이하, ES6이상으로 나뉘게 됩니다. var 용어는 ES5에서 사용하고 ES6이상부터는 let, const를 사용하길 권장하고 있습니다.
* ECMAscript (ES5, ES6)
(ES5, ES6는 ECMAscript의 버전을 얘기하는데 2009년에 나온 ECMAscript5를 ES5라 하고, 2015년에 나온 ECMAscript6을 ES6라 부릅니다.)

- 변수를 선언을 했으면, 값을 할당을 해야 되는데 할당을 할 때는 = 라는 할당 연산자를 사용합니다.

// 변수의 선언
// ES5
a = '닭강정'; 

// ES6
b = '에버랜드';
c = '해운대';

위에서 a, b, c라는 변수를 선언했으니 var, let, const를 사용하지 않고 바로 변수 이름에 값을 할당해주면 됩니다. 

- 변수를 선언과 동시에 값을 할당을 해줄 수도 있습니다.

var d = 10;

 

 

🟡 2. 값(value)

var apple = '사과';

 - apple이라는 이름은 가진 변수를 선언하고 '사과'라는 문자열 리터럴 값을 할당했습니다. 그리고 '사과'는 문자열 타입의 값입니다. 리터럴? 타입? 이 무엇인지는 이제 설명해보겠습니다.

  🟣 리터럴 : 코드 안에서 직접 작성한 값을 의미합니다. 말 그대로 사용자가 직접 '사과'라는 텍스트를 apple에 할당했는데, 만약 var apple = 9 * 9; 라고 작성했으면 apple의 값은 81이 될 것입니다. 하지만 81은 리터럴이 될 수가 없습니다. 81이라는 값은 연산을 통해서 얻은 것 이기 때문입니다.  (사실 이해하기 좀 어려우실 수 있습니다.. 그래도 괜찮아요! 저도 완벽하게는 몰라요.. ㅋㅋㅋㅋ

// 숫자 리터럴
99.99
617

// 문자열 리터럴
'Bigone'
"Hello world"

// Boolean 리터럴
true
false

// null 리터럴
null

// undefined 리터럴
undefined

// 객체(object) 리터럴
{ name: 'Kim', gender: 'male' }

// 배열 리터럴
[ 1, 2, 3 ]

// 정규표현식 리터럴
/ab+c/

// 함수 리터럴
function() {}

 - 위와 같이 리터럴에도 종류가 여러 가지 있습니다.

 

🟣 데이터 타입 : 모든 값은 데이터 타입을 갖게 됩니다. 자바스크립트에서는 7가지 데이터 타입이 있습니다.
    

• 원시 타입 (primitive data type)
  • number (숫자)
  • string (문자)
  • boolean (참 거짓)
  • null (값이 없음)
  • undefined (값이 할당되지 않음)
  • symbol (중복 불가능한 독립적인 값)
• 객체 타입 (Object data type)
  • object (객체)

// ---------------- 원시 타입 -----------------------------
// Number type(숫자) 
var numb1 = 99.99;
var numb2 = 617;

// String type(문자) 
var str1 = 'Bigone';
var str2 = "Hello world";

// Boolean type(참거짓) 
var bool1 = true;
var bool2 = false;

// null type(값이 없음) 
var nu = null;

// undefined type(값이 할당되지 않음) 
var und = undefined;

// symbol type(중복불가능한 독립적인 값) 
var sym = Symbol('key');


// ---------------- 객체 타입 -----------------------------
// object type(객체)
var obj = { name: 'kim', gender: 'male' };

// object - Array(배열)
var arr = [ 1, 2, 3 ];


// object - function(함수)
var func = function() {};

 - 다른 프로그래밍 언어를 해보신 분들은 의아하실 수 있습니다. 왜냐하면 변수를 선언할 때 어떤 데이터 타입인지 같이 선언을 해줘야 합니다. 하지만 자바스크립트는 변수만 선언해주고 어떠한 데이터 타입인지 선언을 해주지 않습니다. 이는 자바스크립트는 값이 할당될 때 변수의 데이터 타입이 동적으로 결정이 되는 것을 의미합니다. 이를 동적 타이핑이라고 부릅니다.

JavaScrtip	Java
var a = 123; var b = "문자형입니다!"; var c = true;	int a = 123; String b = "문자형입니다!"; boolean c = true;

 

 

 

🟡 3. 연산자 (Operator)

 - 연산자는 하나 이상의 표현식으로 산술, 할당, 논리, 비교, 타입 연산 등을 실행해 값을 만들어 냅니다. 연산을 당하는 대상을 피연산자(Operand)라고 합니다.

var num1 = 10 * 5;

 - 10과 5는 피연산자가 되고, *는 연산자가 됩니다.

 

// 산술 연산자
var num1 = 5 * 10; // 값 : 50, 연산자 : *, 피연산자 : 5,10


// 할당 연산자
var str1 = 'apple'; // 값 : 'apple', 연산자 : =, 피연산자 : 'red'


// 논리 연산자
var bool1 = true && false; // 값 : false, 연산자 : &&, 피연산자 : true, false


// 비교 연산자
var bool2 = (5 > 3); // 값 : true, 연산자 : >, 피연산자 : 5, 3


// 타입 연산자
var type1 = typeof 1.1; // 값 : 'number', 연산자 : typeof, 피연산자 : 1.1


// 문자열 연결 연산자
var str2 = 'hello ' + 'stranger'; // 값 : 'hello stranger', 연산자 : +, 피연산자 : 'hello ', 'stranger'

 

 

🟡 4. 문

 - 문이란 최소한의 실행 코드를 얘기합니다. 변수를 선언하는 것도 하나의 문이고, 값을 할당하는 것도 하나의 문이 됩니다. 그리고 문의 끝맺음은 ;으로 합니다.

var a; // 하나의 문

var b = 1; // 하나의 문

var c = b + 10; // 하나의 문

console.log(c); // 하나의 문

 

- 문은 코드 블록 '{.....}'으로 그룹화할 수 있습니다. 그룹화를 하여 함께 실행시키기 위한 목적으로 코드 블록을 사용합니다.

// 함수
function sum(x,y) {
    console.log(x + y);
    return x + y;
}

// for 문
for (var a = 1; a < 10; a++){
    console.log(a);
}

// if 문
if(a > 10){
    console.log(a);
}

 

- 문은 일반적으로 위 문부터 아래 문으로 순차적으로 실행이 됩니다. 그래서 코딩을 할 때 문의 위치를 유의해서 작성해야 됩니다.

var a = 10;

console.log(10);

if(a > 5){
    console.log('a is bigger than 5!');
}

a = 10 + 5;

console.log(a);

문은 위에서 아래로 실행됨.

 

🟡 5. 표현식

 - 표현식은 하나의 값을 만들어 내는 코드 단위입니다. (이게 무슨 말이야 😧)
   간단한 예시를 들어보면 5 * 5는 25라는 값을 만들어 내는 표현식입니다. 말 그대로 코드 실행을 통해 어떠한 값을 도출하면 표현식이라고 할 수 있습니다.  (자세한 설명은 이후 글에서 설명하겠습니다. 지금 더 알고 싶으시다면 여기를 눌러주세요)

 

🟡 6. 함수 (function)

- 자바스크립트의 꽃이라 말할 수 있는 함수는 어떤 작업을 수행하기 위해 필요한 문들을 집합시켜놓은 코드 블록입니다. 함수는 이름과 매개변수(parameter) 갖습니다. 그리고 호출을 통해 함수를 실행시킵니다.

// sum 함수 선언
// 이름이 sum이고 a,b를 매개변수로 갖음
function sum(a, b){
    return a + b;
}

// 함수 호출 
sum(1,2) // 3 이라는 값을 돌려받음

 

 

🟡 7. 객체 (Object)

- 자바스크립트의 심장이라고 말할 수 있는 객체는 원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)이 해당됩니다. 

- 기본적인 객체는 key(이름)와 value(값)이 한쌍으로 이루어진 프로퍼티(proerty)의 집합입니다. 

// 객체 선언 및 할당
var bigone = {
	name : 'bigone',
    age : 30,
    hubby : function(){
        console.log('ten laps!!!')
    }
}

console.log(bigone) // {name: 'bigone', age: 30, hubby: ƒ}

// bigone에서 key가 name인 값 가져오기
console.log(bigone.name) // 'bigone'

// bigone에서 key가 age인 값 가져오기
console.log(bigone['age']) // 30

// bigone에서 key가 hubby인 함수 실행하기
bigone.hubby() // 'ten laps!!!'

객체 코드 실행 결과

 

 

🟡 8. 배열 (Array)

 - 배열은 1개 이상의 값을 순차적으로 할당할 때 사용합니다. 

// 배열 선언 및 할당
var arr = [1,2,3,4,5]

console.log(arr) // 1,2,3,4,5
console.log(arr[0]) // 1

배열 코드 실행 결과

- 배열의 값을 가져올 때는 인덱스를 이용하는데 0부터 시작을 하게 된다. 즉 1의 인덱스는 0이 된다.

 

 

📝 정리

• 변수는 어떠한 값을 담기 위한 그릇이다.
• 값은 변수에 담은 것을 의미한다. 리터럴, 데이터 타입 등의 특징이 있다.
• 연산자는 연산을 실행해주는 역할을 한다.
• 문은 실행할 수 있는 최소한의 코드 단위이다.
• 표현식은 하나의 값을 만들어 내는 코드이다.
• 함수는 어떤 행동을 하기 위해 모여있는 코드의 묶음이다.
• 객체는 key-value 형태의 값들이 모여 있는 묶음이다.
• 배열은 여러 개의 값을 순차적으로 저장할 때 사용한다.

 

 

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽은 신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~