Javascript

Javascript는 기존에 웹페이지를 만드는 HTML, CSS의 단점이였던 정적인 웹페이지를 조금 더 사용자와 동작하고 상호작용할 수 있는 웹페이지의 필요성이 대두되면서 만들어진 언어이다. 아래에 있는 사진을 본다면 HTML, CSS, Javascript의 차이를 더 이해하기 쉬울것이다.

(출처: https://media.vlpt.us/images/hound_woo/post/f61e0ee3-adfe-4a2f-a8d2-420ae1dda53e/imagem-4.png)

1. Commenting(주석달기)

Commenting 이라고함은 코드는 아니지만 코드를 부연설명 해주는 기능이다.
이러한 Commenting을 하는 이유는 여러가지지만 대표적인 용도 아래 세가지다.

• 코드가 필요없어졌지만, 만약을 대비하여 남겨는 용도
• 코드의 의미와 기능을 적어서 기억하기 쉽게 하는 용도
• 다른 사람이 와서 봤을때 부연설명해주는 용도

주석의 형태에는 //, /* */ 가 있다.

1. '//'는 이 slash 두개 뒤에 오는 그줄의 모든 코드들이 주석처리되는것이다.

 	let a = 1;
 	let b = 2;
 	let c = 3;
    // let d = 4; 
    
    console.log("a+b+c+d = " + (a+b+c+d));

위의 코드의 결과를 a+b+c+d = 10입니다로 예상하고 작성한 코드이지만, 실행시켜보면 변수 d가 define되지 않았다는 에러메세지가 작성된다.

2. '/* */'로 이루어진 주석은 slash 두개주석과는 다르게 영역 전체를 주석처리한다. 위의 코드를 다시 사용하여 이번에는 코드 전체를 다 주석처리해보자.

/*
 	let a = 1;
 	let b = 2;
 	let c = 3;
    let d = 4; 
    
    console.log("a+b+c+d = " + (a+b+c+d));
*/

위의 결과는 console.log command가 있음에도 불구하고 화면에 아무것도 표시가 되지않는다.
이처럼 주석은 코드에 존재하지만 사람만 볼 수 있고 컴퓨터는 읽지 못하게하여 추가 설명을 할 수 있는 Javascript속성이다.

2. Function(함수)

1. 함수의 정의와 호출

함수는 input을 넣으면 output을 리턴하는 기능을 가지고 있다. 모든 함수가 input과 output을 갖고 있진 않지만, 대부분의 함수는 가지고 있다. 함수에게 이름을 부여하고 input값이 있는지 없는지 설정하는 단계를 함수 정의라고 한다. 함수 정의는 ('function 함수이름(input값)')의 형태로 이루어진다. 함수는 기본적으로 사용자가 특정하는 기능을 하기 위해 만들어지기 때문에 함수의 영역을 중괄호( { } )를 이용해서 나눈다.
함수를 정의 하고 나서는 함수를 사용하기 위해 호출을 한다. 함수의 정의만으로 함수가 기능을 하지 않아서 함수 호출을 해야지만 함수가 실행이 된다. 함수의 호출은 ('함수이름(input값)')의 형태로 이루어진다.

2. 함수의 input, output, body

함수의 input은 말그대로 원인값이고 output은 결과값이다. 일이 일어났을때 원인과 결과로 나눠서 얘기하듯이, 함수에서는 input, output이 그 역할을 한다. 함수의 body란 함수의 정의 후에 중괄호 안에 들어가는 함수의 내용이다. body에 들어가는 코드들은 함수의 기능에 관한 내용이기 때문에 input, output과는 달리 거의 대부분의 함수에 존재한다(사실 body가 없으면 함수는 빈껍데기에 불과하기 때문에 코드를 더 복잡하게 할뿐이여서 body가 없는 함수는 찾기 힘들다). 함수가 호출이되면, 사용자가 입력한 input값을 받아서 이를 body에서 기능하게 하여 나온 결과값을 return한것의 결과물이 output이기 때문에 input, output, body는 셋이 서로 긴밀하게 연결되어있다.

3. 함수의 반환값: return

함수 body의 마지막부분에는 보통 return이 들어간다. 이 return을 이용하면, 함수를 호출하고 실행시켰을때, 결과값이 반환된다. 따라서 함수의 호출에다가 global variable하나를 셋팅하면, 설정된 global variable은 함수의 호출 결과에 따른 return값을 저장한다. 단순히 함수를 호출하고 return을 시킨다고 console창에 결과값이 나오지 않는다. 만약 결과값을 화면으로 보고싶다면, console.log를 사용해야 한다. 함수의 마지막부분에 들어가는 return 이후로 적히는 body안의 코드들은, return때문에 아무리 많이 입력해도 함수를 실행시켰을때, return전까지의 코드들만 작동하는 것을 알 수 있다.

4. 함수의 매개변수(parameter)와 인자(argument)

앞서 2번에서 다루었던, 함수를 정의할때 주는 input값의 이름을 함수의 매개변수라고 한다.

function getName(name) {
	return name + "님";
}

위의 예시에서 getName이란 함수가설정되어있고 바로옆의 소괄호 안에 있는 name이 바로 getName함수의 매개변수가 된다. 이는 담을 데이터와 연관있는 변수로 하여 다른사용자들도 보고 금새 어떤 값을 넣어야하는지 알 수 있게 보통 연관있는 매개변수를 쓴다. 함수를 호출하고 작동시킬때, 저 input의 구체적인 값 자체를 함수의 인자라고 한다.

getName('김개발');

이렇게 함수를 호출했을때 전과 다르게 소괄호안에 구체적인 값이 들어가있음을 볼 수 있다. 이 코드에서 getName의 argument는 string type의 김개발이다.