Ian H Blog

함수(Function)

프로그래밍에서 함수는 수학시간에 배우는 함수와 비슷합니다.

들어가는 값이 2가 곱해지고 4가 더해진 후 나오는 함수를 나타낸 그림으로, 수식으로 표현하면 2x+8=y(x가 들어가는 값, y가 나오는 값)가 됩니다. 들어가는 수와 결과값은 달라질 수 있지만 그 과정은 항상 일정하죠.

마찬가지로 프로그래밍에서의 함수도 같은 과정을 반복 수행하기 위한 용도로 사용됩니다. 반복적으로 사용되는 코드를 함수로 만든 후, 해당 과정이 필요할 때 함수를 호출하면 같은 코드를 여러번 작성 할 필요도 없고, 변수처럼 함수도 이름을 지어 줄 수 있으므로 해당 함수가 무슨 일을 하는지 나타내기가 쉬워 코드의 가독성을 높일 수도 있습니다.

함수의 선언

function 함수_이름(입력값_이름, 입력값2_이름){
  함수_내용
  return 출력값;
}

의 형식으로 자바스크립트 함수를 만들 수 있습니다.

- function은 함수의 선언을 나타내는 예약어입니다.
- 함수 이름을 짓는 규칙은 변수 이름을 짓는 규칙과 같습니다.
- 함수 이름 뒤 ()에 입력값 이름들을 나열합니다. 입력값 이름을 짓는 규칙 역시 변수 이름을 짓는 규칙과 같습니다.
- 입력값 이름은 해당 위치에 입력된 값을 함수 내용안에서 사용하기 위해 사용됩니다.
- 입력값은 파라메터(parameter) 혹은 함수 인자로 불립니다.
- 함수의 파라메터는 없을 수도 있고, 하나일 수도 있고 여러개일 수도 있습니다.
- 대괄호{ }안에 함수 실행시 할 일을 코드로 작성합니다.
- return은 함수를 종료하고 함수가 어떤 값을 출력할지를 나타내는 예약어입니다.
- return은 없을 수도 있습니다. 이 경우 함수는 항상 { }안의 코드를 모두 실행하고 undefined를 return하게 됩니다. 이 부분은 뒤에 다시 설명하겠습니다.

처음에 본 그림의 수식을 함수로 작성해 봅시다.

function myFunction(x){
  var y = x*2+8;
  return y;
}

첫번째 줄을 보면

- 함수의 이름은 myFunction이고,
- 1개의 값을 입력받으며,
- 그 입력값은 x라는 이름으로 함수 코드에서 사용되는 것

을 알 수 있습니다.

{}안의 함수 내용을 살펴봅시다. 입력된 값 x에 2를 곱하고 8을 더해 y라는 변수에 저장하고, 이 y를 최종적으로 return합니다.

웹브라우저 콘솔을 열고(콘솔 여는 법 링크) 위 코드를 입력하여 함수를 만들어 봅시다.

이 함수는 내용이 간단하기 때문에 함수의 필요성을 잘 못느낄 수도 있지만, 함수가 없는 프로그램은 존재하지 않을 정도로 함수는 프로그램의 기본이며 굉장히 중요합니다.

함수의 호출

함수_이름(입력값, 입력값2);

의 형식으로 함수를 실행할 수 있습니다. 함수의 실행은 미리 저장된 코드를 불러오는 것이므로 '함수를 호출한다'고 표현합니다.

위에서 만든 myFunction함수에 12라는 값을 넣어 함수를 호출해 봅시다.

함수안의 코드가 실행되어 32가 출력되었습니다.

출력값(return)이 없는 함수

수학의 함수를 생각하면 출력값이 없는 함수는 필요 없을 것같지만, 프로그래밍의 함수는 지정된 코드의 반복이라는 점에서 출력값이 없어도 의미가 있습니다.

아래 함수를 살펴봅시다.

function greeting(name){
  console.log("Hello "+name);
}

이 함수는 실행을 하면 아무런 값을 return하지 않지만 콘솔에 문자를 출력하는 작업을 합니다.

+ 연산자는 숫자 사이에 사용되면 수학적 덧셈을 하지만, 문자열 사이에 사용되면 두개의 문자열을 하나로 합쳐 하나의 문자열로 만들어 줍니다.

정리 및 요약

• 함수(Function): 같은 코드을 반복 수행하기 위한 용도로 사용. 코드의 반복을 줄이고 함수 이름을 통해 가독성을 높일 수 있음
• function은 함수의 선언을 나타내는 예약어
• 파라메터(parameter), 함수 인자: 함수에 전달 되는 값을 뜻함
• 함수 이름, 파라메터 이름을 짓는 규칙은 변수 이름을 짓는 규칙과 같음
• return: 함수를 종료하고 함수가 어떤 값을 출력할지를 나타내는 예약어
• 함수에서 return은 없을 수도 있음. 이 경우 함수는 항상 undefined를 return
• 함수의 실행은 미리 저장된 코드를 불러오는 것이므로 '함수를 호출한다'고 표현
• + 연산자는 숫자 사이에 사용되면 수학적 덧셈을 하지만, 문자열 사이에 사용되면 두개의 문자열을 하나로 합쳐 하나의 문자열로 만듦

지금까지는 이론 위주의 공부였고 이번 글부터 본격적으로 프로그래밍 문법을 배워봅시다.

연산자(Operator)

앞서 컴퓨터는 계산기로부터 발전한 것이라고 했으니 계산을 한번 시켜봅시다. 웹브라우저 콘솔을 열고(콘솔 여는 법 링크) 아래 명령을 입력합니다.

덧셈과 뺄셈은 우리가 아는 수학 기호를 그대로 +, -를 사용하고 곱셈과 나눗셈은 *, / 를 사용합니다.

+, -, *, /와 같이 데이터를 처리하는데 사용되는 기호를 연산자(operator)라고 합니다.

이 외에도 나눗셈 후 나머지를 구하는 연산자(%), 숫자의 값을 1 증가시키는 연산자(++) 등등 많은 연산자들이 있지만, 지금 모두 설명하지 않고 나올 때마다 설명하도록 하겠습니다.

;(세미콜론)은 프로그래밍에 사용되는 문장부호(punctuator)로 명령어의 끝을 나타냅니다. 자바스크립트에서는 한 줄에 두 개 이상의 명령어가 동시에 있지 않는 이상 세미콜론은 생략 가능합니다.

또한 연산자와 문장부호의 앞 뒤에 띄어쓰기가 있거나 없어도 결과에 영향을 주지 않는 다는 것도 알아 둡시다.

1+1;은 아래와 같이 분석할 수 있습니다.

명령 실행 후 콘솔에 2라는 값이 표시되는데, 이는 브라우저 콘솔이 편의상 마지막으로 실행된 명령의 결과 값을 보여주기 때문입니다.

위 예제처럼 두 개 이상의 명령어를 한번에 입력하면 가장 마지막 명령인 2*2;의 결과값만 콘솔 화면에 표시됩니다. 1+1; 명령의 값은 사라져 버린 것이죠. 마지막 명령의 결과값 4도 브라우저 콘솔이 편의상 표시해 주는 것이지, 프로그램을 짤 때 단순히 2*2; 이렇게만 작성하면 결과를 확인할 수도 없고, 다시 사용할 수도 없습니다.

계산을 한 후에 그 결과값(데이터)을 나중에 사용하려면 그 값을 따로 저장해 두었다가 다시 불러올 수 있게 해야 하는데 이러한 역할을 하는 것이 변수입니다.

변수(Variable)

변수(variable)은 데이터를 담아둘 수 있는 상자입니다. 이 변수라는 상자에는 어떤 내용이 들었는지를 알려주는 이름을 지어주어야 합니다.

변수는 아래의 명령으로 선언할 수 있습니다. 변수의 선언(declaration)은 프로그램에게 내가 정한 이름을 변수로 사용하겠다고 알리는 것입니다.

var 변수_이름;

var는 자바스크립트에서 변수를 선언할 때 사용되는 예약어(keyword)입니다. 예약어는 프로그래밍 언어에서 명령 작성을 위해 미리 점유해 놓은 단어로 이 단어들은 이미 특별한 용도를 가지고 있으므로 다른 용도(변수나 함수 이름을 만들 때)로 사용할 수 없습니다.

변수의 이름은 일정한 규칙하에 프로그래머가 마음대로 붙일 수 있습니다.

- 문자, 숫자 및 특수문자의 조합으로 변수의 이름을 지을 수 있음
- 숫자는 첫글자에는 사용 불가능, 첫글자가 아닌 경우 사용가능
- 특수문자는 연산자, 문장부호가 아닌 이상 사용가능
- 예약어와 동일한 단어는 사용불가능(var는 불가능. 하지만 var1과 같이 완전히 일치하지 않으면 사용가능)
- 띄어쓰기는 불가능

프로그래머는 규칙 내에서 마음대로 변수의 이름을 붙일 수 있지만, 변수의 이름을 지을 때는 의미가 분명하고 담고자 하는 데이터를 잘 표현할 수 있는 단어를 찾아서 사용하는 것이 좋습니다.

추가로 예약어나 변수 이름 등 프로그래밍에 사용되는 단어들은 낱말의 대소문자가 달라지면 다른 단어로 처리되는 것도 반드시 기억합시다.(var와 Var는 다른 단어로 취급)

자동차의 바퀴 수(데이터)를 저장할 변수를 선언해 봅시다.

위 명령을 입력하면 콘솔에 undefined라고 표시됩니다. 변수를 선언하는 명령은 실행된 후 결과값을 가지지 않는데, 데이터가 주어지지 않음을 나타내는 데이터가 undefined입니다. 나중에 다시 자세히 살펴볼 예정이니 지금은 그냥 undefined가 에러메세지가 아니라는 것만 알고 넘어갑시다.

이제 프로그램에 변수를 사용할 준비가 되었으니 데이터를 넣어 봅시다.

변수에 데이터를 넣는 것을 대입(assignment)이라고 합니다. 아래 명령으로 변수에 값을 넣을 수 있습니다.

선언된_변수_이름=데이터;

대입연산자 =를 사용해서 우항의 값을 왼쪽의 변수에 저장하는 연산을 합니다.

위에서 선언한 wheels 변수에 데이터를 넣어 봅시다. 일반적으로 자동차는 4개의 바퀴가 있으니 숫자 4를 넣어봅시다.

이제 wheels이라는 단어는 대입한 데이터 4와 동일하게 취급됩니다.  wheels 변수와 숫자를 연산시켜 봅시다. 이 자동차가 12대가 있다면 총 바퀴의 갯수는?

변수는 새 값을 받아 값이 변하기도 합니다. 차를 개조하여 기존의 바퀴갯수에서 2개를 더하였습니다.

대입연산자는 우항의 값을 먼저 구한 후 변수에 저장하기 때문에 위 명령에서 오른쪽 wheels는 이전에 저장된 4이고, 2를 더하여 6이 된 후 대입연산자 = 를 통해 다시 왼쪽의 wheels 변수에 대입됩니다. 앞으로 wheels 변수는 6이라는 데이터를 가지게 됩니다.

아래의 구문으로 변수의 선언과 데이터의 대입을 동시에 할 수도 있습니다.

var 변수_이름=데이터;

myName 이라는 변수명에 Ian이라는 문자열 데이터를 넣었습니다. 따옴표(")는 프로그램에게 해당 문자열이 데이터라는 것을 알려주는 역할을 한다고 이미 배웠습니다.

위 명령을 분석해 보면 다음과 같습니다.

마지막으로 변수이름에 변수이름이 될 수 없는 단어를 사용하여 변수 선언을 해보겠습니다.

Unexpected token var 에러가 납니다. 프로그램이 명령을 해석하는 과정에서 var를 인식한 후 이어서 변수 이름이 나와야하는데 예약어인 var가 나와서 기대하지 않은 토큰(여기서 토큰은 단어를 뜻합니다) var가 입력되었다고 에러로 알려주는 것입니다.

정리 및 요약

• 연산자(Operator): 데이터를 처리하는데 사용되는 기호

• 연산자	+	-	*	/
  용도	덧셈	뺄셈	곱셈	나눗셈

• 변수(Variable): 데이터를 담아둘 수 있는 상자
• 변수의 선언(declaration): 프로그램에게 내가 정한 이름을 변수로 사용하겠다고 알리는 것
• 예약어(Keyword): 프로그래밍 언어에서 명령 작성을 위해 미리 점유해 놓은 단어
• var는 자바스크립트에서 변수를 선언할 때 사용되는 예약어
• ;(세미콜론): 프로그래밍에 사용되는 문장부호(punctuator)로 명령어의 끝을 나타냄
• 변수 이름 규칙
  - 문자, 숫자 및 특수문자의 조합으로 변수의 이름을 지을 수 있음
  - 숫자는 첫글자에는 사용 불가능, 첫글자가 아닌 경우 사용가능
  - 특수문자는 연산자, 문장부호가 아닌 이상 사용가능
  - 예약어와 동일한 단어는 사용불가능(var는 불가능. 하지만 var1과 같이 완전히 일치하지 않으면 사용가능)
  - 띄어쓰기는 불가능
• 예약어나 변수 이름 등 프로그래밍에 사용되는 단어들은 낱말의 대소문자가 달라지면 다른 단어로 처리됨
• 대입(assignment): 변수에 데이터를 넣는 것
• 대입연산자 =: 오른쪽의 값을 왼쪽의 변수에 저장하는 연산자

비트(Bit)와 바이트(Byte)

앞서 컴퓨터의 연산장치는 2진수 체계로 연산한다고 설명했었습니다. 이때 2진수의 0 혹은 1 하나의 수를 비트(Bit)라고 하고 8개의 비트를 모은 것, 즉 8자리의 2진값을 바이트(Byte)라고 합니다.

컴퓨터는 바이트를 최소 단위로 하여 2진수를 처리(전송, 연산, 저장 및 호출)합니다.

예를 들어 숫자 3은 2진수로 나타내면 11, 즉 2자리 수(2비트)이지만 실제로 컴퓨터 내에서는 최소 1바이트, 즉 8자리 2진값 00000011로 간주됩니다.

다양한 자료(데이터)의 표현

1바이트에는 0부터 255(00000000부터 11111111)까지 2의 8승 개의 값을 저장할 수 있습니다. 255보다 큰 수를 저장하고 싶다면? 바이트의 수를 늘리면 됩니다. 2바이트는 16비트이므로 2의 16승 개의, 즉 0부터 65,535까지의 수를 나타낼 수 있습니다.

음수는 어떻게 나타낼까요? 음수는 2의 보수로 표현합니다. 이 부분은 조금 어려울 수도 있는데, 반드시 암기해야 하거나 기억해야 하는 부분은 아닙니다. 그냥 이러한 방법이 있구나 정도로만 보고 넘어가도 됩니다.

2의 보수를 구하는 방법은 각 비트의 0을 1로, 1을 0으로 바꾼 후 1을 더해주면 됩니다.

예를들어 00000001의 2의 보수를 구하는 방법은 아래와 같습니다.

1) 0을 1로, 1을 0으로 바꿈.. : 11111110
2) 1을 더해줌............... : 11111111

이런 이상한 방식으로 표현하는 이유는 컴퓨터가 연산을 쉽게 하기 위해서입니다. 이 방식으로 음수를 표현하면 음수와 음수, 혹은 음수와 양수 간의 덧셈뺄셈을 간편하게 할 수 있습니다.

(-1) + (-1) 은 11111111(8비트) + 11111111(8비트) 으로 표현할 수 있고 이것을 그냥 2진수로 간주하여 값을 더하면 111111110(9비트)가 됩니다. 한자리가 늘어났죠. 현재 1바이트(8비트)를 기준으로 연산을 하고 있으므로 이 늘어난 가장 앞자리 비트를 무시해버리면 11111110(8자리)가 되고 이 값은 -2를 나타내는 값이 됩니다.

이 방식을 사용하면 첫번째 자리의 값은 양수인 경우 언제나 0, 음수인 경우 언제나 1이 되는 특징이 있습니다.

문자의 경우 문자와 숫자 사이 변환 값을 약속해 놓고 문자를 수로써 저장하고 읽어옵니다. ASCII(아스키) 테이블을 예로 들어 살펴봅시다.

ASCII 테이블은 0부터 127까지 수를 사용해 영문 대소문자와 문장부호, 몇몇 특수 문자를 가지고 있습니다.

a를 ASCII로 저장하면 위 테이블에 따라 숫자 97에 해당하는 1바이트 2진수 01100001가 저장됩니다. 위 테이블에 없는 문자나 기호(한글및 외래어나 특수문자)를 저장하려면 ASCII가 아닌 다른 방식을 통해서 문자를 2진수로 변경하여 저장할 수 있습니다. 대표적으로 Unicode 방식이 있죠.

지금까지 우리는 양수, 음수 그리고 문자를 컴퓨터가 어떻게 2진법으로 표현하는 지를 배웠는데요, 컴퓨터는 01100001이 ASCII로 a를 나타내는지 숫자 97을 나타내는지, 11111111이 양수 127을 나타내는지 음수 -1을 나타내는지, 0000001 0000001이 2바이트로 저장된 257인지 아니면 1바이트로 저장된 1과 또다른 1을 나타내는지 어떻게 구별 할 수 있을까요?

이를 알려 주는 것이 자료형입니다.

자료형

자료형(Data Type 혹은 Type)이란 컴퓨터에 저장된 2진수를 어떻게 해석해야 하는지를 표시하는 방법입니다. 자료형보다는 타입이라는 말로 더많이 씁니다. 자료형에 따라 컴퓨터는 어떠한 데이터가 몇 바이트 짜리인지, 문자인지 숫자인지, 숫자의 경우 첫번째 자리를 음수/양수를 표현하는 수로 해석할지 아닐지를 알 수 있습니다.

C언어의 경우 1바이트 문자를 저장하는 char 타입, 2바이트 숫자를 저장하는 short 타입, 4바이트 숫자를 저장하는 int 타입등 다양한 타입이 있습니다. 컴퓨터 성능이 좋지 않은 시절에 개발된 언어라 작은 숫자는 적은 바이트를 차지하는 타입에 담고, 큰 숫자들은 많은 바이트를 차지하는 타입에 담아 용량도 줄이고 처리 속도도 증가하는 대신, 프로그래머가 신경써야 하는 부분이 많습니다.

하지만 자바스크립트에서는, 문자및 문자열을 저장하는 타입은 string 타입 하나뿐이고, 숫자를 저장하는 타입은 number 타입 하나 뿐입니다. number 타입은 어떠한 수라도 8바이트로 처리하여 작은 수를 처리하기에 비효율적이지만 그만큼 프로그래머가 신경써야 할 부분이 줄어들었습니다. C언어가 처음 나온 시절에 비해 컴퓨터 성능이 많이 향상되어 효율성보다 편의성과 생산성을 향상시키는 쪽으로 발전한 것이지요.

프로그래밍에서는 문자와 숫자 이외에도 불리언(boolean), 배열, 객체(object)등등의 타입이 있지만 나머지는 차차 알아가도록 하고 이 강의에서는 데이터가 타입에 따라 분류된다는 것만 알아두시면 되겠습니다.

프로그래밍 언어하면 C언어를 떠올리시는 분들이 많은데, 저는 자바스크립트로 프로그래밍을 강의하려 합니다.

프로그래밍 언어를 처음 배울 때 주로 Hello World라는 문자열을 화면에 출력하는 간단한 코드를 작성하게 되는데, C언어는 코딩(coding)을 한줄이라도 하기 위해선 개발 툴을 설치하고 관련 라이브러리들을 불러와야 하는 과정이 필요합니다.

또한 내가 작성한 코드가 다른 컴퓨터에서 정상적으로 작동하기 위해서는 해당 컴퓨터에 관련 라이브러리들이 제대로 설치되어야 합니다. 반대로 다른 사람이 만든 코드 역시 내컴퓨터에 라이브러리들이 제대로 설치되어 있지 않다면 실행되지 않습니다. 프로그래밍을 배울 때 코딩 외에 신경써야 할 부분이 많다는 것이죠.

1. 자바스크립트를 공부하기 위해서는 아무런 프로그램의 설치가 필요하지 않습니다. 자바스크립트는 웹브라우저에서 실행되는데, 브라우저에 코드를 입력할 수 있는 도구인 '콘솔'이 있기 때문입니다. (랩탑이나 데스크탑의 경우에 한함. 만약 타블릿이나 핸드폰으로 이 글을 읽고 계시다면 코드작성 시에는 랩탑이나 데스크탑을 이용해 주세요.) 물론 실제로 프로그램을 작성한다면 개발용 텍스트 에디터를 사용하는 것이 좋지만, 간단한 코드를 작성하고 테스트하기 위해서는 불필요합니다.

2. C언어는 코드 수정후 재실행시 컴파일이라는 과정이 필요해서 전체 코드를 다시 실행해야 하지만, 자바스크립트는 컴파일이 필요하지 않고 프로그램 실행 중에도 변수, 함수를 생성하거나 해당 데이터, 코드를 변경할 수 있습니다. 코딩 연습할 때 굉장히 편리합니다.

3. C언어에서 작성한 프로그램은 운영체제(윈도우, 맥, 안드로이드, IOS 등)에 따라 호환이 안되는 경우가 많습니다. 자바스크립트는 웹브라우저에서 실행되므로 운영체제의 영향을 받지 않습니다. 브라우저간 호환성은 운영체제 호환성에 비해 굉장히 좋습니다. 심지어 모바일, 타블릿에서도 동일하게 실행됩니다.

이 글은 자바스크립트가 C언어보다 좋다는 것을 설명하는 글은 아닙니다. 배울 때 이것 저것 따질 것이 적다는 것이죠. 프로그래밍 언어는 하나를 어느정도 배워 두면 다른 언어를 익히는 것은 그렇게 어렵지 않습니다. 일단 재미를 붙이고 자신감을 얻는게 중요하죠. 나중에 다른 언어가 필요해 지면 그때 다른 언어를 공부하셔도 늦지 않습니다.

자바스크립트란?

자바스크립트(Java script)는 웹브라우저상에 명령어를 전달하는 언어로 자바(Java)와는 전혀 다른 별개의 언어입니다. 할 수 있는 일도 웹브라우저상으로만 제한됩니다만, 요즘은 웹상에서 못하는 것이 거의 없죠. 웹브라우저에서 작동하는 유일한 언어이기도 합니다. 이 때문에 웹 프로그래밍을 하게 된다면 반드시 접하게 되는 언어입니다.

자바스크립트로 Hello World 출력하기

Hello World 출력은 프로그래밍 언어를 배울 때 가장 먼저 배우는 것으로 화면에 텍스트를 출력하는 것을 익히는 것이 목적입니다. 아래 순서대로 따라해보세요.

1. 현재 이 글을 보고 계신 웹브라우저에서 새 창/새 탭을 열고, 주소창에 "about:blank"라고 입력합니다. (about:blank은 빈 페이지를 여는 명령어입니다.)

2. 웹브라우저의 콘솔을 엽니다. 웹브라우저 콘솔은 웹브라우저에 코드를 입력하기 위한 도구입니다. 아래 표를 보고 자신의 운영체제(OS)와 웹브라우저에 맞는 단축키를 누릅니다.

저는 크롬 브라우저를 사용하여 콘솔 화면을 열었습니다.

커서가 깜박이는 것을 볼 수 있습니다. 이 부분에 코드를 입력할 수 있습니다.

3. 아래 코드를 입력한 후 엔터

Hello World!가 출력되었습니다.

- console.log()는 콘솔에 텍스트를 출력하는 함수입니다.
라는 코드에서 괄호안에 출력하고 싶은 내용을 넣으면 화면에 출력해 줍니다. - "Hello World!"에서 큰 따옴표(")는 텍스트를 출력하기 위해 사용하였고 숫자를 출력하고 싶은 경우에는 큰 따옴표를 사용하지 않아도 됩니다. 괄호안의 내용을 바꿔서 다른 내용을 출력하는 연습을 해봅시다.

"지금 프로그래밍을 한 건가요?"

프로그램을 만들었다기 보다, 명령어를 하나 배운 것 같은 느낌이 드실 겁니다. 이건 자바스크립트가 웹브라우저에서 작동하는 스크립트 언어이기 때문입니다. 이미 웹브라우저라는 프로그램이 실행중인 상태에서, 그 프로그램에 코드를 보내 실행되는 형태입니다.

좀 더 프로그램같은 걸 보고 싶은 분들은 아래코드를 복사해서 웹브라우저 콘솔에 붙여넣기해 보세요.

마우스로 게임화면을 한번 클릭하신 후 키보드 상하좌우 키를 눌러 검은 네모를 움직일 수 있습니다. 검은 네모가 떨어지는 빨간 네모에 닿으면 점수가 올라갑니다. 게임종료는 없습니다. 지금 이 코드는 그냥 흥미위주로 봐주시고 코드의 이해는 하지 않으셔도 됩니다.