Unit 2-[JavaScript] 코드 기초

📌 코드 기초

📖 코드 기초 개요

JavaScript의 기본 개념들을 학습하기 위해서는 코드를 실행하는 방법부터 알아야 한다. 또, JavaScript엔진이 어떻게 코드를 읽는지, 내가 작성한 코드를 어떻게 출력할 수 있는지에 대해 알아야 한다.

 

📌 코드 실행

✅ JavaScript 코드 실행하기

JavaScript는 원래 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어이다.그래서 HTML 파일과 JavaScript 파일을 함께 브라우저에서 실행해야 작동한다. 혹은 따로 Node.js라는 JavaScript 런타임을 컴퓨터에 설치해야 한다. 다만, 처음에는 좀 더 쉽게 JavaScript를 학습하기 위해서 StackBlitz에서 JavaScript 코드를 실행하자.

 

✅ StackBlitz로 코드를 실행하는 방법 2가지

1.index.js 파일에 원하는 JavaScript 코드를 작성하고,저장 후 Terminal에 node index.js 를 입력하고 엔터를 누르면 작성한 코드가 실행되고 출력 결과를 확인 할 수 있다.

2.Terminal에 node를 입력하면 REPL을 사용할 수 있다. REPL 사용을 종료하려면 .exit를 입력한다.

 

컴퓨터를 특정 방식으로 작동시킬 수 있는 코드의 모음을 프로그램이라고 부르고, 프로그램을 실행하면 프로세스가 된다.

 

Glossary

• REPL(Read-Evaluate-Print loop): 읽고(read), 평가(evaluate)하고, 출력(print)을 반복(loop)하는 가장 간단한 개발 환경입니다. 내가 작성한 코드가 문법에 맞는지 틀린지 간단하게 실행해볼 수 있습니다.
• 프로그램(program): 작업(task) 수행을 위한 코드 모음
• 프로세스(process): 프로그램 실행의 결과물.

 

✅ console.log()

 

‘hello world’라고 입력하고 엔터를 치는 순간 JavaScript 엔진은 이 코드를 읽고, 평가하고, 출력합니다. REPL아니고 코드를 직접 실행하는 경우에는 console.log() 메서드로 출력을 할 수 있습니다. 괄호 안에 'hello world'를 입력하고 엔터를 눌러 출력합니다.

console.log('hello world'); // hello world

 

📌 코드 독해

⭐️ JavaScript 엔진이 코드 읽는 법

"컴퓨터는 0과 1로 이루어져 있다."라고 많이 들어 봤을 것이다. 실제로 그렇다. 우리가 사용하는 일반적인 컴퓨터는 0과 1의 조합으로 모든 정보를 표현하고 이해한다. 이를 기계어라고 부른다.

 

그런데 자바스크립트(JavaScript)는 그렇지 않다. 영어도 있고, 기호도 있고, 숫자도 있다. 이렇게 사람이 다룰 수 있게 일정한 문법과 의미를 지닌 언어를 프로그래밍 언어라고 부른다. JavaScript도 프로그래밍 언어 중 하나이다. JavaScript 엔진으로 실행할 수 있다.

let ourMission = 'Unlock Human Potential';
let JavaScriptWasInventedBy = 'Brendan Eich';
let JavaScriptWasInventedIn = 1995;
i++;
i--;

JavaScript 엔진은 코드를 위에서부터 아래로 코드를 읽고, 해석하고, 평가하다가 문제가 있으면 에러를 발생시키고,해당 지점에서 코드 실행을 바로 중단한다.아래 코드는 실행하면 에러가 발생한다.

= // SyntaxError: Unexpected token '='

SyntaxError(문법 에러)라는 문구가 에러로 출력되는 것을 확인할 수 있다.

 

Glossary

• 기계어: 컴퓨터가 이해할 수 있는 숫자로만 구성된 언어. 사람이 쉽게 이해할 수 없다.
• 프로그래밍 언어: 개발자가 프로그램을 작성하기 위한 언어. 기계어와 다르게 사람이 다룰 수 있는 수준의 문법과 의미를 지닌다.
• 자바스크립트(JavaScript): JavaScript는 브라우저, 서버, 모바일 개발이 가능한 멀티 패러다임 프로그래밍 언어이다.
• JavaScript 엔진: JavaScript 코드를 실행할 수 있는 프로그램이다.크롬에 내장된 v8이 대표적이다.

 

📝 주석

 

초창기 많은 개발자는 개발을 하면서 메모를 할 필요성을 느끼기 시작했다.아무리 직관적이고 간결하게 코드를 작성하려 해도,내가 작성한 코드를 다른 개발자에게 쉽게 설명하기 어려웠다.과거의 내가 열심히 작성했던 코드를 왜 그렇게 작성했는지도 기억하기 쉽지 않았다.

그래서 코드에 간단히 메모를 하기 위해 주석(comment)을 추가했다. JavaScript에서 주석은 // 다음에 작성하거나, /* , */ 사이에 작성하면 된다. 주석 처리된 코드는 JavaScript 엔진이 인식하지 않기 때문에 자유롭게 사람의 언어, 자연어를 작성할 수 있다.

// 문자열 'hello world'를 설명하는 주석입니다. 주석은 가능하면 코드 위에 작성합니다.
'hello world';

/* 
여러 줄의 코드를 주석 처리할 수 있습니다.
console.log('Hello');
*/

 Glossary 

• 주석: JavaScript 엔진이 따로 해석하지 않는 코드. 개발자가 쓰고 싶은 사람의 언어, 자연어를 자유롭게 작성할 수 있다.
• 자연어: 인간이 쓰는 언어. 컴퓨터공학에서 프로그래밍 언어와 구분하기 위해 사람의 언어를 자연어로 따로 구분한다.

 

✏️ 값과 표현식

 

REPL에  a b c d를 입력해봅시다. 아마 uncaught SyntaxError: unexpected indetifier 가 발생할거다. 문법 에러가 발생했다.

a b c d // Uncaught SyntaxError: Unexpected identifier

123을 입력해보자. 이제는 에러가 발생하지 않는다.문법을 잘 지켰다.

123; // 123

이렇게 읽고, 평가가 완료되어 하나의 의미를 가지는 코드가 값(value)이다. 값을 표현하기 위해서는 다양한 방식이 있다. 예를들어, 숫자값 1995를 표현하기 위해서는 아래와 같은 다양한 코드로 쓸 수 있다. 이렇게 하나의 값으로 평가될 수 있는 코드를 표현식(expression)이라고 한다. + 기호와 같이 값에 변화를 줄 수도 있다. 이렇게 산술 연산이나 논리 연산 등을 할 수 있는 기호를 연산자(operaor)라고 한다.

1995;
1000 + 900 + 90 + 5;
1900 + 95;

 Glossary 

• 값(value) : 하나의 고유한 의미를 가지는 코드. JavaScript 엔진이 하나의 값으로 읽고 평가할 수 있어야 한다.
• 표현식(expression) : 값으로 평가될 수 있는 코드.
• 연산자(operator) : 특정 연산을 수행할 수 있는 코드.

 

 📌 코드 출력 

 

📐 console.log()

 

'hello world'라고 입력하고 엔터를 치는 순간 JavaScript 엔진은 이 코드를 읽고, 평가하고 ,출력한다.REPL아니고 코드를 직접 실행하는 경우에는 console.log() 메서드로 출력을 할 수 있다. 괄호 안에 'hello world'를 입력하고 파일을 실행하면 출력 결과를 아래와 같이 확인할 수 있다.

console.log('hello world'); // hello world

 

🧑🏻‍💻 구구단 출력하기

지금까지 배운 내용을 기반으로 구구단을 출력해 보자. 예를 들어, 2단의 결과를 출력하기 위해서는 값을 직접 입력할 수도 있지만

console.log(2);
console.log(4);
console.log(6);
console.log(8);
console.log(10);
console.log(12);
console.log(14);
console.log(16);
console.log(18);

 *  연산자로 좀 더 직관적으로 2단이라는 것을 표현할 수도 있다.

// 구구단 2단을 출력해 보세요.
console.log(2 * 1); // 2
console.log(2 * 2); // 4
console.log(2 * 3); // 6
console.log(2 * 4); // 8
console.log(2 * 5); // 10
console.log(2 * 6); // 12
console.log(2 * 7); // 14
console.log(2 * 8); // 16
console.log(2 * 9); // 18