javascript 기본 개념 총 정리!

자바스크립트 기본 개념 총 정리한다.

 

자바스크립트는 기본적으로 변수, 자료형, 함수, 조건문, 반복문 5가지만 기억하면 된다.

1. 변수? 값을 담는 거다. 숫자나 문자 같은 여러 값들을 저장하는 것이다.

2. 자료형? 변수에 담은 값이 숫자인지, 문자인지 등 변수의 종류를 나타낸다.

3. 함수? 어떤 동작을 하도록 하는 명령어. ex) 버튼 클릭했을 때, 특정 페이지로 이동or얼럿창 띄우기 등

4. 조건문? 만약(if) 이렇다면 이렇게 하고, 저렇다면(else if) 저렇게 하고, 그렇지 않다면(else) 그렇게 해라.

5. 반복문? 반복조건에 맞다면 계속 반복해라.

 

---

1. 변수

let a = 2
let b = 5
let c = 1
let d = 'Bong'

한마디로 값을 담는 것이다.

a라는 변수에 2, b라는 변수에 5, c라는 변수에 1이라는 숫자를 담고, d라는 변수에 bong이란 문자를 담은 것이다.

 

그렇기에 아래와 같이 사칙연산, 문자열 더하기가 가능하다.

a+b = 7
b+c = 6
b-c = 4
c+d = 1bong
d+a = bong2

단, 문자와 숫자를 더하면, 숫자는 문자로 취급한다.

 

---

2. 자료형

숫자, 문자, 참/거짓, 객체변수, 배열, 특이한 변수 등을 의미한다.

- 숫자 : integer(정수, 줄여서 int), number, float(실수) 등으로 표현함

※ 정수 : 0, -2, 4, 7 등 딱 떨어지는 자연수

※ 실수 : 부동소수점(3.14 등)이 있는 수

 

 

- 문자 : character(단일문자, 줄여서 char)와 string(문자열)로 구분된다

※ 성별을 표시할 때, 남/여 한글자로 표현한다면 char, 남성/여성 처럼 2글자 이상으로 표현한다면 string 이다. string은 단일문자도 포함하는 개념이므로, 한글자여도 string이라고 할 수 있따.

 

※ 문자열을 표시할 때는 반드시 따옴표( ' 또는 " )를 붙여야 한다.

 

※ 참고로 같은 숫자라하더라도 주민등록번호, 휴대폰번호는 문자열로 처리를 해야한다.

 

 

- 참/거짓 : boolean(줄여서 bool)

※ 참/거짓 2가지 경우만을 다루는 경우로, 대부분 언어에서 true/false로 표현한다.

 

 

- 객체 : 현실의 무언가를 추상화 시킨 개념이다. 예를 들면 '사람'은 하나의 문자/숫자로 표현하기 어렵다. 이름, 주민등록번호, 성별, 휴대폰번호, 키, 몸무게, 직업, 거주지역, 결혼여부 등 다양한 변수들을 하나로 묶으면 "사람"이라는 객체가 된다. 즉, 딕셔너리 구조를 띄며, 여러 변수들을 모아 객체를 하나의 변수로 표현할 수 있다.

 

 

- 배열 : 리스트와 딕셔너리 구조가 있다.

※ 리스트 구조 : 순서를 가지고, 변수가 배열된 형태 > 이런 걸 1차원 배열 이라고 한다.(1D Array)

let b_list = [1,2,'hey',3]

 

※ 리스트 구조2 : Array가 중첩되는 경우가 있다. 2개가 중첩되어 있으면 2차원배열(2D Array)라고 하고, 3D, 4D, 5D 등 다차원 배열(nD Array)eh rksmdgkek.

let a_list = ['커피','홍차','녹차']
let b_list = [1,2,'봉',3]

a_list.push(b_list)

// a_list는?
['커피','홍차','녹차',[1,2,'봉',3]]

// 즉,
['커피','홍차','녹차',[b_list]]
['커피','홍차','녹차',Array(4)]

 

 

※ 딕셔너리 구조 : 키-밸류 값의 묶음이다.

let b_dict = {'name':'Bong','age':37, 'height':168}

위와 같이 name이란 키에 Bong이란 밸류를 넣는 형태이다.

names = [{'name':'bong','age':37},{'name':'droid','age':21}]

보통 리스트 형태와 결합하여 사용하며, names라는 리스트 안에 딕셔너리 구조가 들어간 것이다.

 

 

- 특이한 변수 : 객체도 아니고, 자료형도 아닌, 지금은 아무 값도 존재하지 않는 상태인 none, null 값이다. 지금은 아무 값이 없지만, 나중에 값이 생길 예정이라면, 우선 none, null 값을 넣어놓기도 한다. 파이썬에서는 none, 자바스크립트나 자바에서는 null 을 넣곤 한다.

 

---

3. 함수

어떤 액션(클릭, 값 입력 등)을 했을 때, 어떤 동작을 하도록 하는 것이다.

// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(a, b) {
	alert('계산을 하자');
	return a + b;
}

let result = sum(2,3)
alert(result)

// 위 함수를 순서대로 읽으면,
// 우선 sum(2,3)을 불렀으면, sum(a,b)에 a=2, b=3으로 값이 들어간다.
// 그럼 '계산을 하자'라는 얼럿창를 띄울거고,
// a+b를 계산해서 값을 리턴할거야. 어디다? sum(2,3) 있던 위치에.
// let result = sum(2,3)가
// let result = 5 으로 바뀌기 때문에, 
// console.log(result)는 5라는 숫자를 얼럿창에 띄울거야.

기본 구조는 위와 같이 사용된다.

---

4. 조건문

영어 if문과 같다. 'if(만약) A라면 a라는 행동을 하고, else if(만약) B라면 b라는 행동을 하고, else(그렇지 않다면) DEF라는 행동을 해라.' 와 같다. 여기서 else if는 생략해도 되고, else if를 여러개 만들어도 된다.

function is_adult(age){
	if(age>19){
    	alert('성인입니다.')
    } else {
    	alert('미성년자입니다.')
    }
}

위와 같은 경우는 성인과 미성년자로 나누기 위해 20이란 숫자(나이)가 맞는지만 확인하는 것이다.

 

아래의 경우는 20살 이상은 성인, 13살 이상은 청소년, 8살 이상은 어린이, 7살 이하는 영유아라는 가정으로 구분한 것이다.

function is_adult(age){
	if(age>19){
    	alert('성인입니다.')
    } else if(age>12) {
    	alert('청소년입니다.')
    } else if(age>7) {
    	alert('어린이입니다.')
    } else {
    	alert('영유아 입니다.')
    }
}

 

---

5. 반복문

예를 들면, 숫자 0부터 99까지 콘솔로그에 찍고 싶다면, 일일히 아래와 같이 쓸 수 있다.

console.log(0)
console.log(1)
console.log(2)
console.log(3)
...
console.log(99)

 

하지만 너무 길고 힘들지 않겠는가?

그래서 아래와 같이 간단히 쓸 수 있다.

for (let i = 0; i < 100; i++) {
	console.log(i);
}

쉽게 표현하자면 아래와 같다.

for (①시작조건; ②반복조건; ③더하기) { ④매번실행 }

 

즉, i를 0이란 숫자로 두고(①시작조건), 100 미만이 될때까지(②반복조건), 숫자를 1씩 더하면서(③더하기), 콘솔로그를 찍어라(④매번실행)인 것이다.

돌아가는 로직은 ① [→ ②체크 → (괜찮으면) → ④실행 → ③실행][→ ②체크 → (괜찮으면) → ④실행 → ③실행][→ ②체크 → (괜찮으면) → ④실행 → ③실행] 이렇게 반복조건에 맞지 않을때까지 반복해서 실행하는 것이다.