자바스크립트(JavaScript) 기초 및 문법ㅣ정의, 기본 문법, 변수, 함수

프론트엔드 개발 공부를 시작하려는 예비 개발자가 반드시 알아야 할 언어로 HTML, CSS 그리고 JavaScript(자바스크립트)가 있습니다. 오늘은 이 중 JavaScript가 무엇인지 그리고 JavaScript의 기초적인 문법은 어떻게 되는지에 대해 함께 살펴보도록 하겠습니다.

---

JavaScript란?

먼저 JavaScript가 무엇인지, 어떻게 탄생하게 되었는지 알아볼까요?

JavaScript는 어떠한 언어일까요?

흔히들 JavaScript는 “HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 언어” 라고 설명을 합니다. 이러한 JavaScript는 어떻게 탄생하게 되었을까요? JavaScript가 탄생하기 전 HTML과 CSS로만 구성이 된 웹 페이지는 보시는 것과 같습니다. 지금 우리가 사용하고 있는 구글, 유튜브와는 참 다른 모습을 띠고 있죠. 당시 웹 페이지가 이렇게 표현 될 수밖에 없었던 이유는 동적인 표현을 해낼 수 있는 언어가 없었기 때문입니다.

1994년 넷스케이프 커뮤니케이션즈(Netscape communications) 라는 소프트웨어 회사는 정적인 웹 페이지를 동적으로 표현하기 위해 프로그래밍 언어를 만들기로 결정하였고, 브랜든 아이크(Brendan Eich)라는 사람을 스카우트하여 단 열흘 만에 동적 표현을 위한 언어 개발을 완료하게 됩니다. 1994년 개발 당시 해당 언어는 사내에서 Mocha라는 이름으로 불리다 추후 LiveScript로 변경되었습니다. 1995년 9월 LiveScript를 이해하고 실행할 수 있는 넷스케이프 내비게이터 2.0이 베타로 출시 되었고, 이후 12월 네비게이터 2.0 베타 3 버전에서 현재 사용하고 있는 JavaScript라는 이름으로 출시가 되었습니다.

이렇듯 JavaScript의 첫 시작은 정적인 웹을 동적으로 표현하기 위함이었지만, 현재는 웹 브라우저에서만 동작하는 반쪽짜리 프로그래밍 언어가 아닌, 프론트엔드 영역은 물론 백엔드 영역까지 아우르는 웹 프로그래밍 언어의 표준으로 자리를 잡고 있습니다.

그렇다면 HTML, CSS, JavaScript가 웹을 개발하는 데에 있어 어떠한 기능을 할까요? 짧은 예시를 통해 알아보도록 하겠습니다.

우리가 건축가가 되어 “하나의 건물을 만들어본다.”라고 한번 생각해 볼까요?

1. 우선 첫 번째로 건축 도면에 따라 건물의 구조를 만들 것입니다. HTML도 이와 크게 다르지 않은데요. HTML은 웹 페이지의 제목, 문단 등을 정의하여 웹의 구조를 만드는 마크업 언어입니다.
2. 건물의 구조가 완성이 되었다면 무엇을 진행해야 할까요? 맞습니다. 페인트를 칠하고 가구를 배치하는 등의 인테리어 디자인을 진행해야겠죠? 웹 개발에선 이러한 디자인 작업을 위해 CSS라는 언어를 사용합니다. 쉽게 말해, CSS는 HTML과 같은 마크업 언어를 통해 표현된 웹의 구조를 디자인하기 위한 언어다. 라고 이해해주시면 됩니다.
3. 디자인까지 마무리가 되었다면, 이제 드디어 동적인 요소를 추가할 차례입니다. “건물에 동적인 요소가 있을 수 있나?” 라는 생각이 드실 텐데요. 대표적인 예시로 계단 센서등, 엘리베이터, 에스컬레이터 등을 들 수 있겠습니다. 우리 한번 건물 비상계단에 센서등을 설치했다고 생각해볼까요? 센서가 사람의 움직임을 감지한다면 센서등이 자동으로 켜집니다. 반대로 사람의 움직임이 정해진 시간 동안 감지되지 않으면 센서등이 자동으로 꺼지게 되겠죠. 이처럼 JavaScript를 이용하면 웹 페이지가 특정 상황(event)에 따라 동적으로 작동할 수 있도록 만들 수 있습니다. 이를 통해 웹 페이지를 더욱 다채롭게 구성할 수 있습니다.

이제 JavaScript가 “HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 언어” 라는 것에 대해 어느 정도 이해가 되셨을까요?

JavaScript로 무엇을 할 수 있을까?

JavaScript를 학습하면 무엇을 개발 할 수 있을까요? 가장 먼저 위에서 말씀드린 것처럼 HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어 줄 수 있습니다. 그렇지만 이것 말고도 JavaScript를 이용해 개발할 수 있는 것은 매우 많은데요! 대표적인 것들을 위주로 짧게나마 알아보도록 하겠습니다.

첫 번째로 모바일 앱을 개발할 수 있습니다. 아마 많은 분들께서 JavaScript는 웹 페이지 개발에만 사용되는 언어라고 알고 계실 것 같은데요. 여러분들이 지금도 많이들 사용하고 계시는 페이스북, 인스타그램 또한 JavaScript의 프레임워크인 React Native를 통해 개발되었습니다. 이는 JavaScript 언어를 가지고 애플, 안드로이드 기종에 상관없이 모바일 앱을 만들 수 있다는 것을 의미합니다.

두 번째로 업무를 자동화할 수 있습니다. 회사에서 업무를 진행하면서 비효율적이고 반복적인 일들로 인해 피로감을 느끼신 적은 없으신가요? 여러분이 느끼셨던 이러한 문제들은 JavaScript를 이용하여 해결할 수 있습니다. 만약 사내에서 구글 스프레드시트를 사용하고 계신다면 구글 시트와 연동이 되어 있고 JavaScript 언어를 사용할 수 있는 Apps Script를 활용해 시트를 기반으로 진행하던 수많은 작업을 자동으로 처리할 수 있답니다!

내가 만약 자동화를 통해 업무를 효율화하는 것에 관심이 많다면 JavaScript 학습을 절대 놓치지 말아야겠죠?

세 번째로 데이터를 시각화할 수 있습니다. 요즘 우리는 수많은 데이터가 매일같이 쏟아지는 세상에 살고 있습니다. 이러한 세상 속에서 원하는 데이터만 취합하고 이를 시각화하여 우리가 겪고 있는 문제를 한눈에 확인할 수 있다면 얼마나 좋을까요? JavaScript가 이 고민을 해결해 줍니다. JavaScript를 이용하여 데이터를 시각화를 할 수 있게 해주는 가장 유명한 라이브러리로는 D3.js가 있습니다. JavaScript로 데이터를 시각화할 수 있다니! 벌써 설레지 않으시나요?

이 외에도 게임 개발, 머신 러닝 등 다양한 분야에서 JavaScript를 활용할 수 있습니다.

JavaScript의 기본 문법

지금까지 JavaScript가 무엇인지 알아봤다면 이제는 이러한 JavaScript의 문법에 대해서 같이 알아보도록 합시다. 오늘은 아주 아주 기초적인 문법인 변수와 타입 그리고 함수에 대해 찍.먹 하는 시간을 가져보도록 하겠습니다.

1. 변수

처음으로 배울 기초 문법은 바로 변수입니다. 위에서는 건축가에 빗대어서 설명해 드렸으니, 이번엔 한번 농부로 빗대어 설명해 드려볼게요.

브라우저의 영역이 아닌 보이지 않는 부분, 즉 곧 서술할 백엔드 영역은 Java, Python 그리고JavaScript(Node.JS) 등 여러 가지 언어로 구성될 수 있지만 프론트엔드 영역은 위 세 가지 언어로 구성됩니다. 또한 이런 화면 구성에 그치지 않고 사용자에게 보이지 않는 부분들을 보이는 부분과 연결하여 로그인과 같이 여러 복잡한 기능을 관리해 전체적인 동작을 가능하게 해줍니다.

김코딩 이라는 한 농부가 밭에 심을 씨앗을 여러 종류 구해 왔다고 가정을 해봅시다. 그런데 이 씨앗들을 한 곳에 두자니 특정 씨앗을 찾을 때 마다 뒤적여 봐야 해서 귀찮아질 것 같습니다. 그래서 김코딩 씨는 바구니를 여러 개 가져다 씨앗 종류별로 이름표를 붙여서 나눠 담아두기로 합니다.

이때, 변수는 데이터를 담는 바구니, 바구니에 이름표를 달아 주는 것은 변수의 선언, 바구니에 물건을 담는 것은 할당이라고 생각하시면 됩니다. 즉, 바구니에 당근이라는 이름표를 붙이고 당근 씨앗을 담는 것은, 당근이라는 변수를 선언하고, 이 변수에 당근 씨앗을 할당한 것과 같습니다.

JavaScript로 변수를 선언하고 할당할 때에는 다음과 같은 구조를 가지게 되는데요.

let 변수이름 = 할당할값;

우선 변수를 선언할 때 사용하는 let 이라는 키워드를 쓰고 변수의 이름을 정해 준 다음, 할당 연산자 = 을 쓰고 해당 변수에 할당할 값을 적어줍니다.

김코딩 씨가 바구니에 당근이라는 이름표를 붙이고 당근 씨앗을 담는 것은 다음과 같이 표현될 수 있습니다.

let 당근 = 당근씨앗;

여기서 선언과 할당을 쪼개보면, 다음과 같은 구조를 가집니다.

let 변수이름       let 당근      //  선언
= 할당할값         = 당근씨앗     //  할당

단, 변수의 선언과 할당에는 몇 가지 주의할 점이 있습니다.

👆 변수 이름에는 띄어쓰기가 있어선 안 됩니다. 그래서 띄어쓰기를 대신하는 변수 작성법이 있습니다.

• 언더스코어(_)를 넣어 구분하는 🐍 스네이크 케이스 (snake_case)
• 모든 단어를 대문자로 시작해 구분하는 📐 파스칼 케이스 (PascalCase)
• 두 번째 단어부터 대문자로 시작해 구분하는 🐪 카멜 케이스 (camelCase)
  • JavaScript에서 영어로 변수명, 함수명을 작성할 땐 카멜 케이스를 사용하는 것이 관례입니다.

✌️ = 는 ‘같다’라는 뜻이 아니라, 변수에 값을 할당할 때 쓰는 할당연산자입니다.

• 같은지 다른지 비교할 땐 비교연산자 === (같다) , !== (다르다) 를 사용합니다.
  • 연산자 : 연산을 수행하는 기호(=== , !==, <, > 등)
• 비교연산자
  • 비교연산자는 === , !==, <, > 등이 속해 있는 연산자를 기준으로 좌항과 우항의 상대적인 크기를 판단하여 참(true)과 거짓(false)을 반환합니다.

2. 타입

여기까지 변수를 선언하고 할당하는 방법에 대해서 알아봤습니다. 그러면 변수에는 어떤 값을 할당할 수 있을까요? 위에서 변수는 데이터를 담는 바구니와 같다고 말씀드렸습니다. 즉, 변수에는 데이터를 넣을 수 있다는 뜻입니다.데이터에는 여러 종류가 있는데, 그중에서도 숫자 타입, 문자열 타입, 불리언 타입의 데이터에 대해서만 짧게 알아보도록 하겠습니다.

• 숫자 (Number)
  • 말 그대로 숫자입니다. 정수, 소수, 분수 등 모든 수는 숫자 타입입니다.
  • 예) 100, -100, 1/100, 3.141592…
• 문자열 (Stirng)
  • 문자의 집합으로, 따옴표 (“, ‘)로 둘러싸서 표시합니다.
  • 숫자도 따옴표로 둘러싸여 있으면 문자열로 취급합니다.
    • 예) “김코딩”, ‘Codestates’, ‘3.14’
  • 항상 같은 종류의 따옴표로 닫아줘야 합니다.
    • 예) “김코딩’ (X), “김코딩”, ‘김코딩’ (O)
• 불리언 (Boolean)
  • 참과 거짓을 나타내는 타입입니다.
    • 예) true, false

3. 함수

이제 씨앗도 챙겼으니 직접 밭에 씨앗을 심고 재배만 하면 됩니다! 계획적인 김코딩 씨는 본인이 챙긴 씨앗 중, 가장 먹고 싶은 ‘당근’을 재배하는 방법을 순서에 따라 종이에 작성해 보았습니다.

🥕 당근 재배하는 법

1. '밭' 영역에 씨를 심는다.
2. 하루에 세 번 물을 준다.
3. 평균 기온이 30도 이상이면 말라 죽기 때문에 시원하게 해 줘야 한다.
4. 평균 기온이 15도 이하라면 얼어 죽기 때문에 따뜻하게 해 줘야 한다.
5. 다 자랐다면 흙에서 파내 바구니에 담는다.

그런데, 작성해 놓고 보니 문제가 생겼습니다. 몸은 하나인데 밭은 굉장히 넓어, 하나하나 하려면 몸이 한 개로는 부족합니다. 당근 재배법을 입력시킨 다음에 버튼만 누른다면, 재배법에 맞춰서 자동으로 재배해 줄 방법은 없는 걸까요?

김코딩 씨는 함수를 생각해냈습니다. 함수 안에 재배법을 담아 실행 시킨다면, 실행 버튼 하나만으로 재배법 순서에 맞춰서 재배해 당근을 얻을 수 있습니다.

함수는, 입력에 따라 그에 걸맞은 작업을 하는 하나의 단위입니다. 만약 당근을 재배하려고 했는데, 상추가 나오면 어떨까요? 싱싱한 당근을 기대했는데 전혀 다른 결과가 나온다면, 준비한 씨앗이 당근이 아니라 상추였거나, 밖에서 상추를 사온다는 황당한 내용이 레시피에 적혀있는 겁니다. 이런 황당한 일이 일어나지 않도록, 논리적인 일련의 작업을 하는 하나의 단위를 함수라고 합니다.

4. 함수의 구조 (선언식 함수)

함수를 표현할 때는 크게 두 가지, 표현식과 선언식으로 나뉩니다. 그중, 우리는 선언식 함수를 배웁니다.

• 선언식: function keyword를 선두로 함수를 표현(작성)합니다.
• 표현식: 변수에 할당하는 것처럼, 함수 이름을 변수에 할당하고 함수를 작성합니다.
  • 표현식 함수의 예: let name = function(parameter) { … }

// 함수는 이러한 구조를 가집니다.

function name(parameter) {   }
// (1)  ㅤ    (2)  ㅤ  (3)     ㅤ  (4)

// (1) keyword: 함수를 만들 때, function 키워드를 사용합니다.
// (2) name(함수명): 함수를 호출(실행)할 때 사용할 이름입니다.
// (3) parameter(매개변수): 함수에 필요한 변수(재료)가 있다면 이곳에 넣습니다. 
//     없다면, () 빈괄호를 씁니다.
// (4) body: 함수가 호출(실행)되면 실행할 코드가 들어있는 곳입니다.

👆원하는 로직을 하나의 함수 안에 둬서 실행만 한다면 원하는 동작을 실행하는 만큼 계속 반복할 수 있습니다. 입력된 값에 따라 정의된 기능이 있기 때문입니다.

✌️ 함수를 만들 때, 함수 안에 return 키워드는 꼭 있어야 값을 반환할 수 있습니다. 함수 안에 당근 재배법을 다 작성한다고 해도, return이 없다면 당근을 내보내지 않습니다. 함수를 사용하여 원하는 값을 얻고 싶다면, 꼭 return 을 작성해야 합니다.

// 이런 식으로 사용할 수 있습니다.

// example이라는 함수를 선언합니다.
function example() {
	// 이 함수가 하는 일
	// stuff라는 변수를 설정하여 1을 할당합니다.
	let stuff = 1;
	// 값을 반환합니다.
	return stuff; // (5)
	// (5) keyword: 함수의 값을 반환할 때, return 키워드를 사용합니다.
	// 주의! return 키워드를 사용하지 않는다면, 함수는 값을 반환하지 않습니다.
}

이렇게, 함수를 생성하는 것을 함수를 선언한다고 말합니다. 함수를 선언했다고 해서 값이 나오는 것은 아닙니다. 함수를 사용하기 위해서는 함수를 호출해야 합니다.

// 함수 선언하기
function example() {
	let stuff = 1;
	return stuff;
}

// 함수 호출하기
// 함수 이름 뒤에 () 괄호를 사용하면, 함수는 호출되고, 값을 반환합니다.
example();

단순히 example 이라는 함수 이름을 썼다고 해서, 함수는 호출되지 않습니다. 꼭 함수 뒤에 괄호(())를 붙여서 함수를 호출합니다.

함수 이름만 쓴다면 반환값은 무엇이 나올까요? 값이 아닌 바로 함수 자체가 반환됩니다! 혼동하지 않게 주의해주세요!

5. 함수의 예시

매개변수(parameter)가 있는 함수와, 매개변수(parameter)가 없는 함수 두 가지의 예시를 들어보겠습니다.

• 매개변수: 전달된 인자를 받아들이는 변수
• 인자: 함수를 호출할 때 제공하는 값

// 매개변수가 없는 함수. 선언할 때, 이름 뒤의 괄호에 아무것도 넣지 않습니다.
function noParameter() {
	let vegetable = '당근';
	return vegetable;
}

noParameter(); // '당근' 반환

// 매개변수가 있는 함수. 선언할 때, 이름 뒤의 괄호에 매개변수를 넣습니다.
// 매개변수의 이름은 자유롭게 짓되, 어떠한 게 들어오는지 알려 주는 단어가 좋습니다.

// 매개변수에 '당근'을 넣어서, 단순히 그것을 반환하는 함수를 생성하고자 합니다.
// 함수를 선언할 때, carrot라는 매개변수를 괄호 안에 삽입합니다.
function yesParameter(carrot) {
	return carrot;
}

// 함수를 호출할 땐 매개변수에 넣고 싶은 데이터를 넣습니다. 이것을 인자라고 합니다.
// 숫자, 문자, 전부 넣을 수 있습니다.
yesParameter('당근'); // '당근'
// 그러나, 함수 안에서의 매개변수의 쓰임을 생각하며 매개변수를 설정하고, 인자를 넣어야 합니다.

// 추가 예시) 어떠한 값을 넣어도 1씩 더해질 수 있는 함수
function addOne(number) {
	number = number + 1;
	return number;
}
addOne(1); // -> 2
addOne(10); // -> 11
addOne(20); // -> 21
addOne(1232543); // -> 1232544

JavaScript 기반의 커리큘럼,
코드스테이츠 프론트엔드 부트캠프

JavaScript가 무엇인지와 JavaScript의 기초 문법인 변수, 타입, 함수에 대해 간단하게 알아보았는데요 잘 따라오셨나요? 코드스테이츠 프론트엔드 부트캠프는 JavaScript를 기반으로 하여 실무 중심의 체계적인 커리큘럼과 프로젝트를 통해 개발 지식 학습을 진행하며 개발 지식 학습을 마치면 커리어 코칭과 졸업생 커뮤니티를 통해 여러분들의 취업에 필요한 정보를 제공하고 있습니다.

만약, 위에서 다룬 내용을 비롯한 개발 분야에 흥미가 있고 프론트엔드 관련 분야의 커리어로 나아가길 희망하고 있다면 코드스테이츠 프론트엔드 부트캠프가 좋은 기회가 될 거예요.

코드스테이츠 프론트엔드 부트캠프에서 사용자 친화적 웹 서비스 개발 능력을 갖춘 개발자로 성장하세요!

_{글 장한국 Product Manager (Software Engineering)
편집 조주연 Content Manager}

---