39. 프로그래밍 – 정말 기초!

소개

경험있는 개발자로써 당신은 조만간 전문가가 아닌 사람들과 대면하게 될 것이며 그들은 당신이 요술부리듯 무엇이든 만들어 낼 수 있을 거라고 생각할 것이다. 반대로 말해, 누군가가 비전문가처럼 당신이 작업하기 위해 뭘 해야할지 알지 못한다는 것은 나쁜 출발점이 된다. 이번 글은 프로그래밍이 무엇인지에 대해 간단하게 설명하고 관계된 양쪽 부류의 사람들이 이러한 소통불가상태를 좀 더 생산적인 환경으로 이끌어내는데 도움이 되기를 바란다.

이것은 또한 초짜 웹개발자들이 자바스크립트를 어떻게 코딩할 것인가를 배우기 전에 이해해야 할 본질에 해당하는 일반적인 프로그래밍 원칙을 생각하도록 도움을 줄 것이다. 지루하게 들리더라도 나를 믿으라, 만약 당신이 우선 이 기본적인 원칙을 알게되면 당신의 작업은 더 많이 튼튼하고 다이나믹하고 창의적이 될 것이다. (소위 말해, 더 많은 놀라운 효과를 갖게 될것이다.) 당신이 특정 언어(이번 과정의 경우에는 자바스크립트)를 바탕으로 작업을 시작하기 전에 프로그래밍의 기본 원칙을 배우는 것은 중요하다.

이 글은 다음과 같은 구조로 이루어진다 :

  • 명령, 명령을 내린다!
  • 변수(Variables)
    • 변수형(Variable types)
      • 실수와 정수(Floats and integers)
      • 부울(Booleans)
      • 문자열(Strings)
      • 배열(Arrays)
      • 객체(Objects)
  • 조건식(Conditions)
  • 반복문(Loops)
  • 요약
  • 연습 문제

명령, 명령을 내린다!

가장 기초적인 형태의 프로그래밍은 명령문을 주고 명령문들이 실행되는 것을 보는 것이다. 프로그래밍은 수학과 언어학의 혼합체이다: 당신이 많은 계산식들을 정의하고 기계들이 그 계산식들을 풀어내도록 적절한 문법을 이용해서 명령을 내려야 한다. 프로그래밍에서 문법은 구문론1이며 언어마다 아주 많이 다르다.

예를 들어, 다음의 2개의 코드 조각은 동일한 작업을 이행한다, 하지만 전자는 자바스트립트이며 후자는 PHP이다:

var fahrenheit = prompt('Enter temperature in Fahrenheit',0);
var celsius = (fahrenheit - 32) * 5 / 9;
alert(celsius);
$fahrenheit = $_GET['fahrenheit'];
$celsius = ($fahrenheit - 32) * 5 / 9;
echo $celsius;

화씨를 섭씨로 변환하는 자바스크립트 예제를 확인해보라.

프로그래밍 언어들은 인터프리트2되어 동작이나 결과로 바뀐다. 자바스크립트처럼 어떤 언어들은 웹브라우저에 의해 인터프리트되어 당신이 필요로하는 모든 것들을 HTML 문서내부에 쏙쏙 넣어주고 브라우저에서 이것들을 열어준다. 다른 프로그래밍 언어들은 실행 가능한 상태가 되도록 하는 별도의 단계로 변환(컴파일3) 될 필요가 있다. 사실은 모든 컴퓨터는 0과 1만 이해하지만 그 위에는 여러 단계의 언어들이 존재하며 각각 다른 작업들을 이행한다.

웹 상에서, 인터프리트와 컴파일간의 선이 흐려지기 시작했는데, 몇몇 브라우저들이 빠른 컴파일된 자바스크립트 엔진들을 실험하기 시작했기 때문이다. 하지만 이에 대해 너무 걱정하지마라; 현재 기준은 자바스크립트 코드를 인터프리트하는 것이다.

변수

프로그래밍을 이해하기 위한 첫걸음으로 대수학4에 돌아가보자. 학창시절을 돌이켜보면 대수학은 다음과 같이 방정식을 쓰는 것으로 시작된다.

3 + 5 = 8

당신이 모르는 값, 예를 들어 아래와 같이 x라고 넣어서 계산한다:

3 + x = 8

x값을 알려면 이렇게 위치를 변경한다:

x = 8 - 3
-> x = 5

하나 이상의 모르는 값을 넣으면 방정식은 좀 더 유연해진다–변수들 사용한다:

x + y = 8

x와 y값은 다음과 같이 변할 수 있고 방정식은 여전히 참이 될 수 있다:

x = 4
y = 4

or

x = 3
y = 5

프로그래밍 언어들로 동일한 작업을 수행한다–프로그래밍에서 변수는 변할 수 있는 값을 담는 그릇이다. 변수는 모든 종류의 값을 담을 수 있고 또한 계산식에 대한 결과를 담을 수 있다. 변수는 등호(= )로 분리된 이름과 값을 갖는다. 변수 이름은 어떤 문자나 단어도 될 수 있지만, 주의할 점은 사용하는 언어마다 다른 기능을 위해 예약된 특정 단어들은 사용할 수 없다는 제약이 존재한다는 것이다.

쉽게 하기 위해, 이 글에서 예제 프로그래밍 언어로 사용하는 자바스크립트를 사용해 보자 (웹 표준 커리큘럼의 이번 섹션은 모두 자바스크립트 프로그래밍에 대한 것이기 때문에 필연적이다!) 다음은 두개의 변수를 정의하고 두 변수를 더하기 한 결과를 계산한 다음, 3번째 변수 값에 이 계산 결과값을 정의하는 것이다.

주: <script>태그는 태그안의 문장은 스크립팅 언어라는 것을 브라우저에게 알리고 스크립트 언어로 인터프리트되도록 한다. “text/javascript”라는 type속성은 어떤 스크립팅 언어인지를 브라우저에게 알린다.

<script type="text/javascript">
var x = 5;
var y = 6;
var result = x + y;
</script>

인터프리터는 코드 명령문을 하나씩 수행하는데 각 명령문은 세미콜론으로 끝난다. 세미콜론은 명령문의 끝을 인터프리터에게 알리는데 마치 인간 언어에서 문장의 끝에서 마침표나 감탄 부호를 쓰는 것과 같다.

한글로 이 구조는 다음과 같을 것이다:

  • HTML이 아닌 것이 있다; 텍스트를 기반으로 하는 자바스크립트 언어를 이해하는 번역기를 가져오라.
  • x라는 새 변수(var 키워드)를 정의하고 5를 할당하라. 명령문 끝.
  • y라는 새 변수를 정의하고 6을 할당하라. 명령문 끝.
  • result라는 새 변수를 정의하고 x와 y를 더한 결과값을 할당하라. 문장 끝. (변수를 할당해 결과값을 계산할때 인터프린터는 x값을 체크하고 y값을 체크한 후, 이 둘을 더하고 결과값 11을 할당한다.)
  • 이 이상한 언어는 이제 충분하다–HTML로 돌아가서 번역기를 돌려보내라.

변수들 사이에 연산자를 추가해서 모든 계산식을 만들 수 있다. 전통적으로 플러스 부호 연산자로 더하고 마이너스 부호 연산자로 뺀다. 곱하기를 위해 별표(*)를 사용하고 나누기를 위해 사선(/)을 이용해야 한다. 다음 예제는 어떤 계산식들이 가능한지 보여준다. 텍스트 앞의 이중사선(〃)을 주의하라–이것은 자바스크립트에서 주석처리이다. 자바스크립트 인터프리터가 스크립트에서 이것을 만나면 해당 라인은 실행하지 않고 넘어갈 것이다–이 주석은 인간의 위해 만든것이지 브라우저가 인터프리트하기 위한 것이 아니다.
보는 바와 같이 어떤 변수든 혼합하고 매치할 수 있고 또한 계산식에서 고정된 값으로 사용할 수도 있다; 또한 연산자들의 순서를 조정하기 위해 괄호를 이용해 그룹지을 수 있다(괄호가 먼저이고, 곱하기/나누기가 다음, 그리고 더하기/빼기이다. 이 모든 것들은 고전적인 수학식이다).

변수형

그러나 우리는 단순한 계산기로 이 모든 것을 할 수 있기 때문에 지루할 것이다(물론, 5318008이라고 적고 돌아서서 낄낄거릴지도 모르겠다). 컴퓨터는 더 정교해서 좀 더 복잡한 계산을 사용할 수 있다. 여기 변수형이라는 것이 있다. 변수는 여러가지 타입이 될 수 있고 언어마다 다른 변수형들을 지원한다. 대부분 일반적인 변수들은 다음과 같다:

  • 실수(Float): 1.21323, 4, 100004 , 0.123 같은 숫자
  • 정수(Integer): 1.233말고 1, 12, 33, 140 같은 자연수
  • 문자열(String): “boat”, “elephant” or “damn, you are tall!” 같은 텍스트의 열
  • 부울린(Boolean): 참 혹은 거짓
  • 배열(Arrays): 1,2,3,4,’I am bored now’ 같은 값들의 집합
  • 객체(Objects): 물체의 표현. 객체는 실세계에서 실제 물체들을 특성들과 메소드들로 모델화한 구조체이다. 예를 들어 고양이를 객체로 모델화할 수 있는데 고양이는 4개의 다리와 하나의 꼬리를 갖고 황갈색이다라고 정의할 수 있다. 또한 purr()라는 메소드를 정의하여 그르렁거리는 방법을 갖도록 정의할 수 있으며 getCheeseBurger()메소드로 치즈버거를 요구할 수 있도록 할수도 있다. 또한 고양이 객체를 재사용할 수 있는데 다른 고양이는 회색이라는 것만 제외하고 원래의 고양이의 모든 특성을 갖는다고 정의할 수 있다.

자바스크립트는 “유연한 형변환5” 언어로 이는 변수가 어떤 데이터형인지를 명시적으로 선언하지 않아도 된다는 의미이다. 단지 변수를 선언한다는 var라는 키워드를 사용하기만 하면 되고 브라우저가 문맥이나 인용부호 사용에 따라 당신이 어떤 데이터형으로 사용하는지 알아낼 것이다.

실수와 정수

이들은 절대 신기하거나 이상한 것이 아니다. 당신은 변수를 정의하고 어떤 숫자형을 값으로 지정한다.

<script type="text/javascript">
  var fahrenheit = 123;
  var celsius = (fahrenheit - 32) * 5/9;
  var clue = 0.123123;
</script>

실수와 정수는 수학적인 연산자에 의해 변경될 수 있다.

부울린

부울린은 단순히 “예/아니오”를 정의한다. 당신은 true/false라는 키워드를 이용해 할당할 수 있다.

<script type="text/javascript">
  var doorClosed = true;
  var catCanLeave = false;
</script>

문자열

문자열은 어떤 문자를 포함할 수 있는 텍스트의 열이다. 자바스크립트에서는 홑따옴표나 쌍따옴표로 텍스트를 감싸서 정의할 수 있다.

<script type="text/javascript">
  var surname = 'Heilmann';
  var name = "Christian";
  var age = '33';
  var hair = 'Flickr famous';
</script>

당신은 + 연산자를 이용해 문자열을 연결(“join together”를 의미하는 전문용어)시킬 수 있다. 하지만 문자열을 빼지는 못한다. 문자열 변경을 위해 언어에서 제공해주는 함수를 이용해야 한다. 반면에 간단한 연결은 이렇게 쉽다:

<script type="text/javascript">
  var surname = 'Heilmann';
  var name = 'Christian';
  var age = '33';
  var hair = 'Flickr famous';
  var message = 'Hi, I am ' + name + ' ' + surname + '. ';
  message += 'I am ' + age + 'years old and my hair is ' + hair;
  alert(message);
 </script>

문자열 연결 예제 확인해보라.

+= 연산자는 “message = message +“의 축약이다. 이 스크립트의 결과는 “Hi I am Christian Heilmann. I am 33 years old and my hair is Flickr famous” 라는 문자열이다.

문자연결을 사용하거나 값을 더할때 기억할 것이 있다. 두 값을 더하기를 원한다면 둘다 숫자라는 것을 확인할 필요가 있다. 문자 연결과 더하기 예제는 둘의 차이를 보여준다. “5”+“3” 은 53이지 8이 아니다! 문자를 숫자로 바꾸는 가장 쉬운 방법은 예제에서 보는 바와 같이 ”+” 사용을 자제하는 것이다.

대부분의 언어들은 당신이 문자열을 싸기 위해 홑따옴표를 사용할지 쌍따옴표를 사용할지에 대해 상관하지 않는다. 이 두개를 혼용하지만 않는다면 말이다. 자바스크립트 인터프린터가 문자열의 끝이 어딘지 혼동하는 것을 막기 위해 문자열에 포함된 따옴표를 역슬래쉬로 막아줄 필요가 있다:

 <script type="text/javascript">
  // this will cause an error, as the interpreter doesn't know
  // what the things after the ' are. The string defined here is
  // 'Isn'.
  var stringWithError = 'Isn't it hard to get things right?';
  // This is not an error, all is fine
  var stringWithoutError = 'Isn't it hard to get things right?';
</script>

배열

배열은 아주 강력한 구조체이다. 배열은 값들의 집합체이며 각각의 값들은 변수나 실제 값이 될 수 있다. 예를 들면:

<script type="text/javascript">
  var pets = new Array('Boomer','Polly','Mr.Frisky');
</script>

당신은 배열에서 인덱스숫자에 해당하는 배열카운터로 각각의 값들을 접근할 수 있다–책에서 챕터찾기 같은 것으로 생각하면된다. 문법은 arrayname[index]이다. 예를 들어 pets[1]은 “Polly”라는 문자열을 반환할 것이다. “잠깐만!”,”Polly는 배열의 2번째 값을 의미하는 pets[2]가 아닌가요?”라고 물을 수 있다–하지만 컴퓨터는 1이 아니라 0부터 시작하기 때문에 카운터는 2가 아니다! 이것은 아주 일반적인 혼돈과 오류의 원인이다.

배열은 자동으로 당신을 위한 특별한 정보 원천인 length를 갖는다. 만일 당신이 pets.length를 확인하면 당신은 이 배열안에 3개의 아이템들 갖고 있다는 의미로 3이라는 값을 얻게 된다.

배열은 보통 무언가 집합에 대해 기술하는데에 탁월해서 모든 언어는 그들을 조작하기 위한 다수의 간편한 함수들을 제공한다–정렬,필터링,검색 등등.

객체

만일 당신은 단지 숫자를 다루는 것보다 더 상세한 설명이 필요한 아이템들의 집합을 갖는다면 배열은 당신이 필요한 것을 제공해주지 못할 수 있다. 그래서 객체를 만들 필요가 있을 것이다. 객체는 프로그래밍에서 사람이나 탈것 혹은 도구들 같이 실제 물건에 대해 표현하거나 모델화해주는 구조체들이다.

객체는 크고 아주 창의적이며 다재다능한 프로그래밍의 일부분이며 이 글의 영역에서 상세하게 설명할 것이다. 단순히 객체는 여러 특성을 갖는 것이라고 하자. 예를 들어 person 객체가 있다; 당신은 점(.)으로 여러가지 특성을 정의할 수 있다:

<script type="text/javascript">
  var person = new Object();
  person.name = 'Chris';
  person.surname = 'Heilmann';
  person.age = 33;
  person.hair = 'Flickr famous';
</script>

당신은 점 부호(person.age는 33이 나온다)로 혹은 대괄호(person[‘name’]는 “Chris” 이다)로 특성을 접근할 수 있다. 이 코스에서 나중에 자바스크립트 객체에 대해 더 배울것이다.

변수는 작는 길든 어떤 형태의 값이든 가능하다. 프로그래밍의 또다른 커다란 일부분은 프로그램의 구조와 로직이다. 이것은 2가지 이상의 프로그래밍 아이디어로 작동한다: 조건문과 반복문.

조건식

조건식은 무언가를 검사하는 것이다. 프로그래밍에서 조건식은 여러모로 아주 중요하다:

우선 조건식은 프로그램이 진행되는 동안 어떤 데이터가 주어지던 간에 정상 동작하도록 하는데 사용될 수 있다. 만약 당신이 데이터를 무턱대고 믿는다면 당신은 곤란에 빠질 것이고 당신의 프로그램은 오작동하게 될 것이다. 만일 당신이 원하는 것이 가능한지 그리고 모든 필요한 정보가 올바른 형식을 갖는다는 것을 검사할 수 있다면 문제가 발생하지 않을 것이며 당신의 프로그램도 더 안정적으로 돌아갈 것이다. 이러한 예방책을 마련하는 것은 방어적인 프로그래밍으로 알려져 있다.

또 다른 조건식은 분기가 가능하도록 하는 것이다. 당신은 이미 폼양식을 채울때 분기표를 대면했을 것이다. 기본적으로 이것은 코드의 다른 부분을 실행하도록 사용되는데 이는 조건이 맞는지 틀리는지에 따라 달라진다.

가장 쉬운 분기문은 if문이며 문법은 if(condition){ do this … } 이다. 조건문은 소괄호내의 코드가 참일때 실행된다. 예를 들어 당신은 문자열을 테스트하고 그 값에 따라 다른 문자열값을 할당할 수 있다.

<script type="text/javascript">
var country = 'France';
var weather;
var food;
var currency;
if(country == 'England'){
  weather = 'horrible';
  food = 'filling';
  currency = 'pound sterling';
}
if(country == 'France'){
  weather = 'nice';
  food = 'stunning, but hardly ever vegetarian';
  currency = 'funny, small and colourful';
}
if(country == 'Germany'){
  weather = 'average';
  food = 'wurst thing ever';
  currency = 'funny, small and colourful';
}
var message = 'this is ' + country + ', the weather is ' +
              weather + ', the food is ' + food + ' and the ' +
              'currency is ' + currency;
alert(message);
</script>

날씨 if문 예제를 확인해보라. country변수값이 변경되면 다른 메세지를 확인할 수 있다.

조건 부분은 3개의 등호문자에 따른 country이다. 3개의 등호문자는 country변수가 값을 갖는지 테스트하고 올바른 변수 데이터형인지 확인하는 조건문을 의미한다. 당신은 2개의 등호문자로 조건을 확인할 수도 있지만 if(x == 5) 는 x가 5이건 “5”이건 참이 된다는 것을 의미한다. 당신의 프로그램이 무엇을 하냐에 따라 이것은 큰 차이가 생길 수 있다.

다른 조건 검사 예제들이다:

  • x > 0 – x가 0보다 큰가?
  • x < 0 – x가 0보다 작은가?
  • x ⇐ 4 – x는 4보다 작거나 같은가?
  • x != ‘hello’ – x는 “hello”가 아닌가?
  • x – x가 존재하는가?

조건식은 또한 중첩될 수 있다. 예를 들어 당신은 앞서의 예제에서 country 변수가 할당되었는지 확인하고 싶을 수 있다; 그러면 다음과 같이 할 수 있다:

<script type="text/javascript">
var country = 'Germany';
var weather;
var food;
var currency;
if(country){
  if(country == 'England'){
    weather = 'horrible';
    food = 'filling';
    currency = 'pound sterling';
  }
  if(country == 'France'){
    weather = 'nice';
    food = 'stunning, but hardly ever vegetarian';
    currency = 'funny, small and colourful';
  }
  if(country == 'Germany'){
    weather = 'average';
    food = 'wurst thing ever';
    currency = 'funny, small and colourful';
  }
  var message = 'this is ' + country + ', the weather is ' +
                weather + ', the food is ' + food + ' and the ' +
                'currency is ' + currency;
  alert(message);
}
</script>

안전한 날씨 if 문 예제를 확인해보라. country변수값이 변경되면 다른 메세지를 확인할 수 있다.)

앞서의 예제는 country가 실제로 있는지와 상관없이 항상 메세지를 생성하게 되어 에러가 발생하거나 “this is undefined, the weather…”라고 나올 수 있는 반면에 이번 버전은 좀 더 안전하다. 만약 county가 정의되지 않았다면 메세지는 절대 생성되지 않을 것이다.

당신은 하나의 문장이 참인지 둘다 참인지를 검사하기 위해 각각 “or”나 “and” 문장으로 다른 조건식을 연결시킬 수 있다. 자바스크립트에서 “or”는 ||로 쓰고 “and”는 &&로 쓴다. 만일 x의 값이 10에서 20사이인지 검사하기 원하면 – if(x > 10 && x < 20) 라고 조건식을 만들 수 있다. 만일 country가 “England” 나 “Germany” 인지를 확인하길 원한다면 if(country == ‘England’ || country == ‘Germany’)를 사용하면 된다.

첫번째 조건이 참이 아닌 경우 항상 적용되도록 하는 else 구문도 있다. 이것은 만약 당신이 특정값에 대해 특별하게 다루고 그렇지 않은 다른 값에 대해 대응하길 원한다면 아주 강력하다:

<script type="text/javascript">
  var umbrellaMandatory;
  if(country == 'England'){
    umbrellaMandatory = true;
  } else {
    umbrellaMandatory = false;
  }
</script>

조건식은 대단하지만 약간의 제한이 있다. 만일 무언가를 계속 반복적으로 하기를 원한다면? 당신의 일이 배열의 모든 값에 대해 문단태그를 추가해야한다면? 조건식만 사용한다면 다른 크기의 배열에 대한 모든 경우를 일일이 열심히 적어주어야한다:

<script type="text/javascript">
  var names = new Array('Chris','Dion','Ben','Brendan');
  var all = names.length;
  if(all == 1){
    names[0] = '<p>' + names[0] + '</p>';
  }
  if(all == 2){
    names[0] = '<p>' + names[0] + '</p>';
    names[1] = '<p>' + names[1] + '</p>';
  }
  if(all == 3){
    names[0] = '<p>' + names[0] + '</p>';
    names[1] = '<p>' + names[1] + '</p>';
    names[2] = '<p>' + names[2] + '</p>';
  }
  if(all == 4){
    names[0] = '<p>' + names[0] + '</p>';
    names[1] = '<p>' + names[1] + '</p>';
    names[2] = '<p>' + names[2] + '</p>';
    names[3] = '<p>' + names[3] + '</p>';
  }
</script>

이건 정말이지 지독하고 유연성없다. 프로그래밍은 우리의 삶을 더 쉽게 만들어 주어야 하는데 똑같은 코드를 반복해서 작성해야한다면 아마도 뭔가 잘못됐다고 생각하게 될 것이다. 좋은 프로그래밍은 지루한 일들은 기계들에게 맡기고 당신은 목적을 이루는데에만 초점을 두도록 하는 것이다.

우리는 배열의 각각의 모든 항목들이 정확히 동일한 일을 수행하도록 해야하고 배열의 크기는 중요치 않기 때문에 이 경우에 우리는 조건식 대신 반복문이 필요하다. 다음 섹션에서 반복문을 이용해 위의 예제를 다시 작성할 것이다 – 이 두개를 비교해보면 후자가 얼마나 더 짧아지는지 알게 될 것이다!

반복문

반복문은 되풀이해서 변수가 변경되는 반복 조건식이다. 반복문의 가장 쉬운 형태는 for 문이다. 이것은 if 문과 비슷한 문법을 갖지만 더 많은 옵션을 가지고 있다 :

for(condition;end condition;change){
  // do it, do it now
}

보통은 for 반복에서 하는 것은 중괄호내의 코드를 여러번 수행하는 것이다. 여기서 당신은 반복자 변수를 정의하고 변수값이 끝나는 조건을 만날때(끝나는 조건은 인터프리터가 되풀이하는 것을 빠져나가도록 하고 코드의 다음부분으로 넘어가도록 하는 역할을 한다)까지 되풀이되는 동안 해당 반복자를 변경되도록 해야한다. 예를 들면 :

<script type="text/javascript" charset="utf-8">
  for(var i = 0;i < 11;i = i + 1){
    // do it, do it now
  }
</script>

여기서 초기값은 0을 갖는 i 라는 변수를 정의하고 11에 도달하는지를 체크(11보다 작은가?를 체크한다) 하고 다음을 수행한다. i = i + 1라는 변경 방정식은 되풀이가 진행될때마다 i에 1을 더하고 다음 반복을 수행한다. 이는 이 반복문이 11번 수행됨을 의미한다. 만일 매반복마다 i에 2를 더하면 6번만 수행된다 :

<script type="text/javascript">
  for(var i = 0;i < 11;i = i + 2){
    // do it, do it now
  }
</script>

반복문을 이용해서 문단을 추가하는 예제에서 우리는 더 짧고 간단한 코드로 만들 수 있다는 것을 알 수 있다 :

<script type="text/javascript">
  var names = new Array('Chris','Dion','Ben','Brendan');
  var all = names.length;
  for(var i=0;i<all;i=i+1){
    names[i] = '<p>' + names[i] + '</p>';
  }
</script>

반복문안에서 배열 카운터로 i 값을 사용할 수 있다는 것을 주목하라. 이것이 반복문의 힘이다-같은 것을 계속 반복할 수 있을 뿐아니라 얼마나 많이 반복해서 수행해야할지를 알 수 있다.

Summary

아주 간결하게 말해서 이것이 프로그래밍이다. 사용자의 입력을 받아 변수들을 변경하고 비교하고 반복하고 이런 저런 방식으로 변수들을 반환하게 된다. 너무 헷갈리지 않게 말해 프로그래밍은 마술이 아니라 단지 아주 간단하게 어떤 작업을 수행하도록 한다. 우리는 여기서 함수들에 대해 알아보지 않았지만 당신이 한번 프로그래밍한 작업이 반복해서 재사용되게 할 수 있게 하는데 이 코드를 함수로 만들어 어떤 기능이 필요할때 마다 반복으로 수행하도록 하는 것을 함수하고 할 수 있다. 함수들은 지금의 과정 다음에 더욱 상세하게 다룰것이다. 지금은 처음시작할때 보다 좀 더 명확한 개념을 잡기 바란다.

연습 문제

  • 왜 다음 코드에 문제가 일어나는가? var x = hello world?
  • 다음 코드는 올바른 코드인가? var x = ‘elephant’;var y = “mouse”;
  • 다음 조건식은 무엇을 테스트하기 위한 것인가? if(x > 10 && x < 20 && x !== 13 && y < 10)
  • 다음 조건식은 무얼하는가? if(b < 10 && b > 20)
  • (“peter”,“paul”,“mary”,“paddington bear”,“mr.ben”,“zippy” and “bagpuss” 라는 아이템들 갖는 배열을 반복시켜라. 각각에 문단을 추가하고 홀수번째에는 “odd”라는 클래스를 추가하라. 팁: i % 2 == 0 라는 모듈 연산자를 사용해서 모든 홀수 아이템을 검사할 수 있다

저자에 관하여

Chris Heilmann은 지난 10년간 웹 개발자로서 활동해 왔으며 취미삼아 라디오 저널리즘에 관한 일도 한다. 그는 영국에 있는 야후에서 트레이너와 리더 개발자로 근무하고 있으며 유럽과 아시아의 front end 코드의 품질을 관리한다.

그의 블로그는 Wait till I come 에 있으며 많은 소셜 네트워크에서 “codepo8”로 알려져 있다.

  1. syntax
  2. interprete: 프로그래밍 언어를 각 구문마다 바로바로 기계어로 번역하여 실행하는 방식을 말한다.
  3. compile: 프로그래밍 언어를 컴퓨터에서 실행가능한 기계어로 한번에 변환하는 방식을 말한다.
  4. algebra
  5. loosely typed: 변수형을 미리 선언하지 않아도 문맥에 따라 언어에서 자동으로 변수형을 인식한다.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.
  • interprete 에 대한 번역은 인터프린트가 아니라 인터프리트가 맞을 듯 합니다. ^^

  • 네 감사합니다. 수정해 두었습니다^^

  • nosugarsociety

    그래도 어렵지만… 자바스크립트에 대한 개념을 잡아가는데 가장 훌륭했던 글인것 같습니다. 감사합니다.

  • J1

    오오 자바스크립트를 공부해보고싶어서 들어왔는데, 잘 읽고 갑니다!! 막연하던 자바스크립트의 개념이 조금은 잡히는것 같아요!!!

  • 전지영

    글이 어려운 글만 추상적으로 생각해오다가 자상한 선생님 만난 것처럼 벅차고 재밌게 설명되어 있어요 ㅜㅜ 흑흑 감사합니다..