Variables

변수

변하는 수(Variavles)
'직업'과 '나이' 등의 단어의 역할을 하는 것으로,
각각 저마다 다른 직업과 나이를 가졌 듯 직업과 나이라는 단어는
통용되지만 각자 가진 값은 다른 역할을 하는 것이 바로 변수(Variavles)이다.

변수값(Value)
위 설명과 이어, 나의 나이는 20살이고 직업은 대학생이라면
직업과 대학생에 해당하는 값을 의미한다.

선언(생성) & 변수값 할당

var job = "Front-end Engineer 지망생";
job은 변수, 변수명을 뜻하고
Front-end Engineer 지망생은 job이라는 변수에 할당된 value이다.

변수 naming convention

한 파일에서 변수명을 중복할 수 없으며,
대소문자를 구분한다 (Koo와 koo를 구분)
첫 번째 문자는 반드시 밑줄_ 혹은 달러$ 기호 중 하나. (두 번째부터는 자유)
camelCase 낙타 등, 낙타 등과 같이 울퉁불퉁한 형식의 방식을 주로 사용

var

기존에 사용되던 변수 선언 키워드.

let

ES5, ES6 버전이 되면서 생긴 변수 선언 키워드.
변수 값을 수정할 수 있는 특징을 가진다.

const

ES5, ES6 버전이 되면서 생긴 변수 선언 키워드.
변수 값을 수정할 수 없는 특징을 가진다.

Function

학창시절 우리를 괴롭혀 왔던 함수이다.
오랜 시간이 지난 지금, 함수를 가장 쉽게 설명할 수 있는
단어는 바로 '자판기'이다. 동전이라는 x값을 넣으면
음료수라는 y값이 출력되는 것으로 이해하면 쉬운 듯 하다.
아래에도 자판기로 예를 들어보겠다.

함수의 호출

funtion vendingMachine() {
	let beverages = "coke";
        return beverages;
  }

에서, 함수의 이름을 부르면(호출) 함수 내의 코드가 실행된다.
함수를 불러 실행시키는 것을 "함수를 호출한다."라고 표현한다.

vendingMachine();

위와 같이 함수를 실행한다.
함수를 정의해놓고, 따로 호출하지 않으면 실행되지 않는다.
자판기는 존재하지만 자판기를 찾아가 어떤 행동을 하지 않으면
음료수가 자동으로 나올리 만무한 것처럼.

함수의 형태

funtion 키워드로 시작, 함수명이 지어지고
함수를 알리는 소괄호() : parentheses
함수의 '시작'을 알리는 { : curly bracket
함수의 body 부분, 실행할 코드가 위치한다.
return(함수의 종료 및 반환 값 필요 시)
함수의 작성이 끝났음을 알리는 } : curly bracket

if

if는 많이 들어보았을 것이다, 만약~ 이라는 뜻을 가지고 있고
이는 프로그래밍 문법에서 매우 효과적인 제어문으로 활용되고 있다.
"만약에 ~하면 ~한다" 의 형태로 정리되며
위 정리한 함수의 예와 결합하여 응용한다면,
"만약에 '3행 5열의 버튼을 누름'하면~ '코카콜라가 출력'한다"로
표현될 수 있겠다.

if 제어문

이를 더 쉽게 숫자로 표현하여 예시를 들자면

let answer = 3 + 3;

if (anser > 5) {
	alert("5보다 큰 숫자!");
}

의 형태로 구성된다.

else if 제어문

if(A조건) {
A조건이 맞으면 여기를 실행
} else if(B조건) {
B조건이 맞으면 여기만 실행
}

위와 같이 여러 조건을 추가할 수 있는 형태로 작성될 수도 있다.

else 제어문

if(A조건) {
A조건이 맞으면 여기를 실행
} else if(B조건) {
B조건이 맞으면 여기만 실행
} else {
위 조건 모두 안 맞을때 실행
}

위 조건들이 전부 맞지 않을때는 else가 실행되게 제어문을 작성할 수 있다.

비교 연산자

좌항과 우항을 비교하는 연산자이다.

동치 연산자

다양한 데이터 타입을 비교할 때 쓰인다.

(==, ===, !=, !==)

위와 같이 구성되어 있으며, 아래에서 추가로 살펴보겠다.

일치 연산자
값과 타입이 같은지를 비교하는 동등 비교 연산자(equality operator) 라고 한다.
불일치 연산자
'같지 않음'을 비교하는 연산자이다.
동등 연산자
'느슨한 비교'를 위한 연산자이며 일치 연산자보다 조금은 더 추상적인 비교를 연산한다.

관계 연산자

(>, <, >=, <=)

관계연산자는 문자열(사전순) 혹은 숫자(크기순)로 데이터 타입을
비교할 때 사용된다.

논리 연산자

어떠한 논리가 적용된 연산자로서, "이것 또는 저것"
"이것 그리고 이것"등의 형태의 논리가 적용된 연산을 구현할 수 있다.

or(또는) 연산자

if (치킨 또는 피자 또는 햄버거 또는 파스타) {   
    alert("돼지시네요!"); 
} 

나는 항상 먹고싶은 게 많은 사람으로서, 매번
"나는 치킨이 먹고싶어"
"나는 피자가 먹고싶어" 등등 한 문장으로 길게 말하다보면
배가 더 고파질 수도 있을거라고 생각된다.
이때 사용되는 것은 or 연산자로서, 해당 조건들을 묶어서 표현한다.

const answer = prompt("뭘 먹고싶나요?");

if (answer === "치킨" || answer === "피자" || answer === "햄버거") {
  alert("돼지시네요!");
}

or 연산자로 묶어 표현 시에는 || (shift + ) 로 사용한다.

and(그리고) 연산자

위와 같이 조건 하나만 맞으면 되는 게 아닌,
조건 모두를 충족해야 할때는 and 연산자를 사용한다.

const answer = prompt("뭘 먹고싶나요?");
const bulk = prompt("벌크업 중이신가요?");

if (answer === "피자" && bulk === "네") {
  alert("치즈 피자를 추천합니다.");
}

정리

&&
주어진 조건이 모두 True이어야 True (AND 연산자)
true && true = true
true && fasle = fasle
fasle && True = fasle
fasle && fasle = fasle
||
주어진 조건중 하나만 True이면 나머지 조건이 False라도 True (OR 연산자)
만약 첫번째 조건이 Ture 이면 나머지 조건은 검사하지 않는다
true || true = true
true || false = true
false || true = true
fasle || fasle = false