#1. 자바스크립트의 기초_1

언어의 특징 및 역사

역사

프로그래밍 언어는 컴퓨터와 사람이 대화할 때 사용하고자 탄생한 언어.

그 중 자바스크립트는 브라우저를 동작하기 위해 탄생했다. (자바와는 아무 연관이 없다)

2005년에 'AJAX' 라는 기술이 나오면서 UX(User Experience) 향상 및 활용도 증가.

이후 2009년에 Node.Js 가 등장하면서 브라우저에 특화됐던 언어가 프론트/백엔드, DB 등 전반적으로 사용되기 시작했다.

특징

1. 객체지향 프로그래밍 지원

2. 동적 타이핑 언어

- 변수 선언 시 타입 지정하지 않고, 런타임에 변수에 할당되는 값을 통해 타입이 자동으로 결정된다.

3. 함수형 프로그래밍 지원

4. 비동기 처리 가능

5. 클라/서버 모두 사용 가능

 

기초 문법

변수에 대해서

변수란?

기억하고 싶은 값을 메모리에 저장하고, 추후 이 값을 읽어들여서 재사용하고자 함에 따라 사용된다.

총 5가지의 개념으로 구성된다.

1. 이름 : 값의 고유 표기

2. 값 : 저장된 수치

3. 할당 : 값을 저장하는 행위

4. 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위

5. 참조 : 할당된 값을 받아오는 것

var myVar = "Hello World"; //1~4의 개념이 모두 들어감
console.log(myVar); // 참조

 

변수 선언 방법으로는 3가지가 있다.

1. Var : 같은 변수명으로 중복 선언할 수 있다.

2. Let : 같은 변수명으로 중복 선언할 수 없다.

3. Const : 같은 변수명으로 중복 선언할 수 없으며, 재할당(값을 바꾸는 행위)이 불가능하다.

 

데이터 타입

데이터 타입은 어떠한 변수의 '형태'를 말하며 JS의 특징 중 2번에 해당하는 특징으로 런타임에 결정된다.

숫자

1. 정수

let num = 10;
console.log(typeof num);

//출력
number

 

2. 실수

let num2 = 3.14;
console.log(typeof num2);

//출력
number

 

3. 지수

let num3 = 2.5e5; //2.5 * 10^5
console.log(num3);
console.log(typeof num3);

//출력
250000
number

 

4. NaN (Not a Number)

let num4 = "Hello" / 2;
console.log(num4);

//출력
NaN

 

5. Infinity

let num5 = 1/ 0;
console.log(num5);
console.log(typeof num5);

//출력
Infinity
number
----------------------------
let num6 = -1 / 0;
console.log(num6);

//출력
-Infinity

 

문자

1. 문자 자료형

let str = "Hello World!";
console.log(str);
console.log(typeof str);

//출력
Hello World!
string
-----------------------
console.log(str.length);

//출력
12 //문자열의 길이를 확인

 

2. 문자열 결합 : concatenation

let str1 = "Hello";
let str2 = " World!";
// concat 함수 : 기존 문자열 변수1 에 매개변수를 결합하는 함수
let result = str1.concat(str2);

//출력
Hello World!

 

3. 문자열 자르기

let str3 = "Hello World!";
//substr 함수 : (from, to) from 에서부터 to 개 까지만 출력
console.log(str3.substr(7, 5));

//출력
World
------------------------------
// slice(from, to) : from 에서 to까지 자름
console.log(str3.slice(7, 12));
//출력
World

여기서 추가 설명으로, substr() 과 slice() 두 함수의 차이로는

substr은 from 에서 to 만큼의 갯수를 자르고

slice 는 from 에서부터 to까지 자른다.

예시에서 substr은 7번째 문자부터 5개를 자른 것이고

slice 는 7번째부터 12번째까지 자른 모습이다.

 

4. 문자열 검색

let str4 = "Hello, World!";
//search 함수 : 매개변수 문자가 시작되는 지점을 찾음
console.log(str4.search("World"));
//출력
7

 

5. 문자열 분할

let str6 = "apple, banana, Kiwi";
// split 함수 : 매개변수 문자를 기준으로 문자열 분할
//출력 형태를 리스트의 형태로 나타
let result = str6.split(",");
console.log(result);

//출력
["apple", "banana", "Kiwi"]

 

 

Boolean

참(true) / 거짓(false) 의 형태를 가진다.

let boole = true;
console.log(boole);

//출력
true

 

 

Undefined

무언가 정의되지 않은 형태를 말한다.

변수의 값이 할당되지 않았을 때 Undefined 형태가 된다.

let x;
console.log(x);

//출력
undefined

코드 실행 중 무언가를 출력했을 때 undefined 가 출력되면 값이 제대로 할당되지 않았다는 의미로 해석 가능하다.

 

Null

값이 존재하지 않음을 명시적으로 나타내는 방법이다.

흔히 착각할 수 있는 것으로 undefined 와는 의도가 다르다.

개발자가 '이 변수에는 값이 없다' 를 의도적으로 나타내기 위해 배치한다.

let y = null;
console.log(y);

//출력
null

 

Object(객체)

key - value 의 pair 형태로 이루어진다.

let Person = {
	name : 'choi',
	age : 20
}

여기서 key 는 'name', 'age', value 는 'choi'와 20 으로 볼 수 있다.

 

Array(배열)

여러 개의 데이터를 순서대로 저장하는 데이터 타입이다.

//객체는 {}중괄호 사용, 배열은 [] 대괄호 사용
let number = [1,2,3,4,5];

배열은 요소 하나하나마다 값의 위치에 대한 정보, 인덱스를 가진다.

 

형변환

어떠한 데이터의 형태, 타입을 바꾸는 동작으로 두가지로 나눌 수 있다.

암시적 형변환

1. 문자열의 경우

let result1 = 1 + "2";
console.log(result1);
console.log(typeof result1);

//출력
12
string
--------------------
let result2 = "1" + true;
console.log(result2);
console.log(typeof result2);

//출력
1true
string

다른 타입과 문자열이 + 연산자로 결합되면 문자열이 우선시 된다.

{ }, null, undefined .. + "1" = 문자열 의 형태로 변환된다.

 

2. 숫자의 경우

let result3 = 1 - "2";
console.log(result3);
console.log(typeof result3);

//출력
-1
number
--------------------
let result4 = "2" * "3";
console.log(result4);
console.log(typeof result4);

//출력
6
number

- 연산자가 나온 결합 형태일 때는 숫자가 우선시된다.

 

문자열과 숫자의 결합 형태에서 + 연산자일 때는 문자열, - 연산자일 때는 숫자로 출력된다.

정확한 원리는 모르겠지만, 테스트 코드를 돌려봤을 때 다음과 같이 시행되는 것을 볼 수 있었다.

let result1 = 1 + "2";
console.log(result1);
console.log(typeof result1);
//출력 : 12 / string

let result1 = 1 - "2";
console.log(result1);
console.log(typeof result1);
//출력 : -1 / number

 

명시적 형 변환

어떤 타입으로 변환할 것인지 명시적으로 나타내준다.

console.log(Boolean(0));
//출력
false

console.log(Boolean(0));
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(Nan));
//출력
모두 false 로 나옴
----------------------
console.log(Boolean("false"));
console.log(Boolean({}));
//출력
true / true

값이 들어간 객체, 단순 Object 모두 true 로 출력된다.

 

문자열 형변환

let result5 = String(123);
console.log(result5);
console.log(typeof result5);
//출력
123
string

 

Number 타입 형변환

let result10 = Number("123");
console.log(result10);
console.log(typeof result10);
//출력
123
number

 

연산자

종류가 많지만 크게 어려운 내용이 없으니 빠르게 훑어보도록 하자.

//1. 더하기 연산자
console.log(1 + 1);
console.log(1 + "1"); //string 타입임

//2. 빼기 연산자
console.log(1 - 2);
console.log(1 - "2"); //number 타입임

//3. 곱하기 연산자
console.log(2*3);
console.log("2" * 3); //6

//4. 나누기 연산자
console.log(4*2);
console.log("4" * 2); //2

//5. 나머지 연산자
console.log(4 % 2); // 0

 

할당 연산자

//1. 등호 연산자
let x = 10;
//x라는 변수에 10을 할당

//2. 더하기 등호 연산자 +=
let x = 10;
x += 5;
//x = 15;

//3. 빼기 등호 연산자 -=
let x = 10;
x -= 5;
// x = 5;

//4. 곱하기 등호 연산자 *=
let a = 10;
a *= 2;
// a = 20;

 

비교 연산자

true 나 false 를 반환하는 용도로 사용한다.

//1. 일치 연산자 : 타입까지 일치해야 true 를 반환한다
console.log(2 === 2);
//true
console.log("2" === 2);
//false

//2. 불일치 연산자 : 일치 연산자와 반대의 값으로 출력된다
console.log(2 !== 2);
//false
console.log("2" === 2);
//true

//3. 비교 연산자
console.log(2 < 3); //true
console.log(2 <= 3); //true
console.log(3 <= 3); //true
console.log(4 <= 3); // false

 

논리 연산자

//1. 논리곱 연산자 : 모두 true 일 때만 true 를 반환한다.
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

//2. 논리합 연산자 : 하나만 true 여도 true 를 반환한다.
console.log(true || true); // true
console.log(true || false); // true
console.log(false|| true); // true
console.log(false|| false); // true

//3. 논리 부정 연산자 : 값을 반대로 바꿔서 적용한다.
console.log(!true); // false

 

삼항 연산자

단순하게 말해서 항이 총 3개라 삼항(3항) 연산자이다.

조건에 따라 값을 선택하는 방식으로 사용한다.

let x = 10;
let result = (x>5) ? "크다" : "작다";
console.log(result);
//출력
크다
//조건이 true 일 경우 앞 결과, false 면 뒤 결과 출력

//3항 연산자를 이용해서 x가 10보다 작을 경우 작다 출력
let x = 20;
let result = (x <10) ? "작다" : "크다";
console.log(result);

 

타입 연산자

console.log(typeof "5");
//출력
string