[2주차] JavaScript와 데이터 타입

1월 18일 자 학습 내용 정리입니다.

 

 

✅ JavaScript

리액트와 같은 라이브러리를 쓰지 않는 한 기본적인 웹의 구조는 HTML, CSS, JavaScript로 구성되어 있다.

HTML은 웹 사이트의 구조를 만들고 CSS는 웹 사이트를 꾸며준다.

그리고 JavaScript는 이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적 웹사이트를 제작할 때 사용한다.

정리하자면 JavaScript는 웹 사이트에서 사용자와 상호작용을 하기 위해 존재한다.

 

HTML, CSS와는 달리 JavaScript는 변수 안에 값을 저장할 수 있고 문자열을 다룰 수 있으며 이벤트를 처리할 때 사용하기도 한다.

 

이러한 JavaScript라는 프로그래밍 언어는 IoT, 하이브리드 앱, 서버 개발 등 다양한 곳에서 사용된다.

 

JavaScript의 특징은 다음과 같다.

 

1. 위에서 아래로 실행된다.

브라우저에서 JavaScript를 만났을 때 일반적으로는 위에서 아래의 순서로 실행된다.

즉, 순서에 주의해서 코드를 작성해야 한다.

 

2. 해석형 언어이다.

JavaScript는 해석형 언어이다.

따라서 코드가 위에서 아래로 순차적으로 실행되고 그 즉시 결과가 반환되는 성질을 가지고 있다.

해석형 언어와 반대되는 개념으로 컴파일러형 언어가 있는데 컴파일러형 언어에는 C, C++ 등이 있다.

컴파일러형 언어는 컴퓨터에서 동작되기 전 다른 형식으로 변환되어 컴파일된다.

 

웹 페이지에 JavaScript를 넣는 방법은 두 가지가 있다.

.html 파일 내부에 <script> 태그를 이용하여 해당 태그 안에 JavaScript 코드를 넣거나 파일 외부에 .js 파일을 만들고 그 안에 JavaScript 코드를 적은 뒤 .html에서 <script> 태그의 src 속성으로 .js 파일의 주소를 넣는 것이다.

 

 

 

✅ 변수

변수(variable)란 데이터(data)를 저장하기 위해 프로그램에 의해 이름을 할당받은 메모리 공간을 의미한다.

쉽게 말하자면 변수는 데이터를 담을 수 있는 공간을 뜻한다.

변수 안의 저장된 값은 변수를 선언하는 키워드에 따라 값이 바뀔 수도 있고 바뀌지 않을 수도 있다.

 

var str; // 변수 선언
str = "maple"; // 변수 초기화

var str1 = "hello";

let str2 = "hi";
const str3 = "안녕";

 

이때 데이터를 담을 공간을 생성하는 것을 변수 선언이라 하고 생성된 변수에 데이터를 전달하는 것을 변수 초기화라고 한다.

일반적으로 JavaScript에서 변수를 선언하는 키워드는 var이다.

JavaScript ES6 문법이 추가되면서 var의 문제점을 보완하기 위해 변수를 선언하는 키워드로 let과 const가 추가되었다.

 

변수의 이름을 선언할 때에는 이름을 짓는 규칙이 존재한다.

규칙은 다음과 같다.

 

1. 변수의 이름은 문자, 언더바(_), 달러($), 숫자를 사용할 수 있다.

2. 변수의 이름을 숫자로 시작하는 것은 불가능하다.

3. 변수의 이름은 영문자의 경우 대소문자를 구분한다.

4. var, let과 같은 JavaScript에서 예약된 키워드는 변수의 이름으로 지을 수 없다.

5. 되도록이면 변수가 담는 데이터의 특성을 잘 나타낸 것으로 이름을 지어야 한다.

 

JavaScript에서 변수는 이름을 가지고, 이 이름을 통해 식별하기 때문에 규칙을 지키는 것은 중요하다.

 

변수 안에 담긴 데이터를 확인하는 것은 console.log() 메서드를 통해 가능하다.

 

var item = "apple";
console.log(item);

// output
// apple

 

위의 코드처럼 console.log() 메서드에 확인하고 싶은 변수명을 넘기면 해당 변수에 저장된 데이터를 확인할 수 있다.

추가적으로 \(역슬래시)의 경우에는 \\를 써야 \가 출력된다.

 

 

 

✅ 데이터 타입

JavaScript의 데이터 타입은 String, Number, Function, Array, Object, Boolean, undefined, null 등이 있다.

 

String

var str = "hello world";

 

문자형을 나타낼 때 사용한다.

""(큰따옴표) 혹은 ''(작은따옴표) 기호를 통해 선언할 수 있다.

따옴표 안에 선언된 문자 각각의 요소가 String의 한 자리를 차지하며 그 순서대로 0부터 인덱스를 가진다.

이때 문자열의 길이는 그 안의 요소 수와 같다.

 

var str = 'He's my friend';
// Uncaught SyntaxError: Unexpected identifier

var str = 'He\'s my friend';
console.log(str);

// output
// he's my friend

 

String형 데이터를 선언할 때 사용했던 따옴표의 종류와 같은 따옴표가 데이터 안에 들어있다면 \를 사용한다.

 

 

Number

var num = 1;

 

별도의 기호 없이 숫자만을 입력한다.

정수, 음수, 실수 모두 선언할 수 있다.

 

 

Function

var sum = function(a, b) { return a + b; }

function mul (a, b) { return a * b; }

 

function 키워드를 사용하여 생성한다.

function 키워드를 이용해 생성된 함수는 함수명() 으로 함수를 호출한다.

함수를 호출한다는 것은 함수 안의 코드를 실행시키겠다는 의미이다.

 

var sum = function(a, b) { return a + b; }

console.log(sum(1, 2));

// output
// 3

 

위의 코드에서는 console.log 메서드 안에서 sum 함수를 호출하는데 이때 1과 2를 전달한다.

전해진 1과 2가 sum 함수 안에서 1 + 2가 되어 그 결괏값인 3이 출력된다.

 

이때 sum 함수 안에서 연산에 사용된 a와 b를 매개변수라고 하며 console.log 메서드 안에서 sum 함수에게 전달된 1과 2를 인자라고 한다.

 

인자는 함수에게 전달하는 데이터를 뜻한다.

매개변수는 함수 밖에서 함수를 호출하며 전해진 인자들이 함수 안에서 사용되는 이름을 말한다.

인자와 매개변수는 상황에 따라 생략될 수 있다.

return은 함수가 반환하는 결괏값을 의미한다.

 

즉, 함수를 호출하며 전해준 인자들을 함수 안에서 매개 변수를 통해 계산하여 원하는 결괏값을 반환 후 함수를 호출했던 곳에 그 값을 전달하는 것이다.

 

 

Array

var arr = [1, 2, 3];

 

비슷한 성격을 가지고 있는 데이터를 하나의 변수 안에서 관리할 때 사용하는 데이터 타입이다.

[] 키워드로 선언할 수 있으며 요소들은 다양한 데이터 타입으로 선언할 수 있다.

 

var color = [ "red", "blue", "green" ];
console.log(color[0]);

// output
// red

 

배열은 index라는 좌표값을 가지고 있는데 첫 번째 요소의 index는 0이다.

이 index를 사용해 요소들에 접근할 수 있다.

 

 

Object

var user = {
    name: "kiki",
    age: 15,
    getUserName: function (name) { return name; }
}

 

여러 종류의 데이터 타입을 하나의 변수로 관리할 때 사용하는 데이터 타입이다.

속성의 컬렉션과 같다.

{} 키워드로 선언이 가능하며 프로퍼티, 메서드, 데이터로 구성되어 있다.

 

프로퍼티는 이름을 가지고 있는 데이터로 위의 코드에서 name, age, getUserName이 프로퍼티에 속한다.

다른 말로 key 값이라고도 하며 key 값으로 문자열이나 symbol을 사용한다.

 

메서드는 이름을 가지고 있는 함수로 위의 코드에서 getUserName이 여기에 속한다.

쉽게 말해 프로퍼티 중 함수인 것을 메서드라고 한다.

 

데이터는 이름을 가지지 않고 프로퍼티에 속하는 값을 말하며 위의 코드에서 "kiki", 15 등이 여기에 속한다.

프로퍼티를 key라고 했을 때 데이터는 value에 해당한다.

 

객체의 데이터에 접근하는 방법은 다음 두 가지가 존재한다.

 

var user = {
    name: "kiki",
    age: 15,
    getUserName: function (name) { return name; }
}

console.log(user.name);
console.log(user["age"]);

// output
// kiki
// 15

 

위의 코드처럼 객체명.프로퍼티명 혹은 객체명["프로퍼티명"] 으로 객체 안에 저장된 데이터에 접근할 수 있다.

 

 

Boolean

var isEagle = true;
var isLion = false;

 

참 또는 거짓 데이터가 들어가 있는 상태이다.

 

 

undefined

var none;

console.log(none);

// output
// undefined

 

변수 안에 데이터를 입력하지 않은 상태이다.

즉, 변수의 선언 과정만 있고 초기화는 하지 않아 변수 안에 저장된 특수한 값이 없다.

 

 

null

var empty = null;

console.log(empty);

// output
// null

 

임의로 변수 안에 빈 데이터를 삽입한 상태이다.

undefined와 달리 변수의 초기화 과정을 거치는데 빈 값을 변수에 삽입한 것이다.

 

 

 

🔍 참조

JavaScript https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript

변수 선언 http://www.tcpschool.com/javascript/js_datatype_variable

데이터 타입 https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures#%EB%AC%B8%EC%9E%90%EC%97%B4_%ED%83%80%EC%9E%85