[새싹x코딩온] 웹 퍼블리싱 과정 3주차 - 3 | JS - 변수, 연산자, 함수, 조건문, 반복문

변수 (variable)

- 데이터를 저장하고 참고(사용)하는 데이터의 이름

 

var

- 중간의 같은 이름의 변수를 다시 선언해도 기존의 변수에 덮어 씌운다.

- 변수를 선언했다는 건 분명이 다른 데이터를 넣으려는 것인데, 그것을 기존의 데이터에 덮어 씌우면 문제가 발생한다.

- 변수가 {블록 단위}에서 끝나는 것이 아니라, 자기 맘대로 전역으로 돌아다니고 영향력을 행사한다.

- 따라서 ES6 문법부터는 var 대신 let 사용을 권장한다.

 

let

- 재선언은 불가능하지만 재할당은 가능하다.

let a = 2;
let a = 5;  # 재선언
a = 8;  # 재할당

 

const

- 재선언이 불가능하고 재할당도 불가능하다.

- 선언과 동시에 초기화를 해야 한다.

let a;  # 가능
const b;  # 불가능

 

변수 기본 규칙

• 변수 이름으로는 문자 / 숫자 / $ / _ 만 사용 가능하다. (필수)
• 첫 글자는 숫자가 될 수 없다. (필수)
• 예약어는 사용할 수 없다. (필수)
• 변수 이름은 읽기 쉽도록 한다.
• 상수는 대문자로 선언해서 다른 개발자도 알 수 있게 해준다.

 

기본 연산자

기본 연산자

% 나머지 연산자

• 홀수 판단 : num % 2 == 1이면 홀수
• 짝수 판단 : num % 2 == 0이면 짝수

** 거듭 제곱

• 2 ** 3 = 8
• 3 ** 3 = 27

 

연산자 줄여서 쓰기

• num = num + 5 → num += 5
• num = num - 5 → num -= 5
• num = num * 5 → num *= 5
• num = num / 5 → num /= 5

 

증가, 감소 연산자

• num++;
• num--;

증감연산자

 

비교 연산자

일치 연산자

- 변수의 값뿐만 아니라 자료형까지도 비교한다.

let a = 1;
let b = "1";

# 비교 연산자
console.log(a == b);  # true

# 일치 연산자
console.log(a === b);  # false

 

논리 연산자

|| (OR)

- 여러개 중 하나라도 true면 true이다.

- 모든 값이 false일 때만 false를 반환한다.

- true 확률이 높은 조건을 앞쪽에 배치하면 효율적이다.

 

&& (AND)

- 모든 값이 true면 true이다.

- 하나라도 false면 false를 반환한다.

- false 확률이 높은 조건을 앞쪽에 배치하면 효율적이다.

 

! (NOT)

- true면 false, false면 true를 반환한다.

 

함수 (function)

- 특정 동작(기능)을 수행하는 일부 코드의 집합이다.

- 함수이름은 camelCase를 주로 이용한다.

# 함수 선언문 - 어디서든 호출이 가능하다.(호이스팅)
function sayHello() {
	console.log('Hello');
}

# 함수 표현식 - 코드에 도달하면 생성한다.
let sayHello = function() {
	console.log('Hello');
}

 

return

- 함수의 반환값, 함수 내부 코드의 최종값이다.

- return 뒤에 있는 코드는 실행되지 않는다.

 

화살표 함수 (arrow function)

let add = function(num1, num2) {
	return num1 + num2;
}

# 화살표함수
let add = (num1, num2) => {
	return num1 + num2;
}

 

조건문

- 특정 조건일 때만 실행하고 싶은 구문이 있을 때 사용한다.

 

if 문

- 가장 기본적이 조건문

- 조건은 true, false로 결과가 나온다.

사용법

if(조건){
	# 괄호 안의 조건이 만족할 때 실행할 문장
}

if(조건1){

}else{
	# 괄호 안의 조건1이 거짓일 때 실행할 문장
    	# else는 조건을 필요로 하지 않는다.
}

if(조건1){

}else if(조건2){
	# 조건1이 거짓이고, 조건2가 참일 때 실행할 문장
}else{

}

if(조건1){
	if(조건2){
    	# if문 안에 또 다른 if문도 들어갈 수 있다.(중첩)
    }else{
    
    }
}

 

삼항연산자

- if문을 간단하게 표현하는 방법이다.

조건식 ? 조건이 참인 경우 : 조건이 거짓인 경우;

 

switch

- if와 마찬가지로 조건문이지만 switch의 소괄호 안에는 true, false로 값이 나오는 조건이 아닌 변수 사용

- 변수와 case의 값이 일치하면 실행한다.

- 값이 일치한 경우에 코드를 실행한 후 break를 만나면 switch문을 벗어나지만 break가 없으면 값이 일치하고 break가 있는 코드까지 가서 벗어난다.

- 일치하는 case가 없거나 break를 만나지 않으면, default의 코드가 실행된다.

switch(a){
	case 1:
    	console.log('a는 1입니다.');
    	break;
 	case 2:
    	console.log('a는 2입니다.');
        break;
    default:
    	console.log('a값을 모르겠습니다.');
        break;
}

 

반복문

- 특정 코드를 반복하고 싶을 때 사용한다.

 

for 문

for 문

# 1 ~ 3까지 출력하는 방법
for(let i = 1; i <= 3; i++) {
	console.log(i);
}  # 1  # 2  # 3

# 1 ~ 10까지 더하는 방법
let sum = 0;
for(let i = 1; i <= 10; i++){
	sum += i
}
console.log(sum)  # 55

# 배열과 for문 같이 써보기
let fruits = ['사과', '망고', '수박']
for(let i = 0; i < fruits.length; i++){
	console.log(fruits[i]);
}  # 사과  # 망고  # 수박

break - 반복문을 멈추고 밖으로 빠져 나간다.

continue - 반복문을 한 번만 멈추고 다음으로 진행한다.

 

while 문

- for문과는 달리 값을 제어하는 구문이 기본적으로 포함되어 있지 않기 때문에 무한루프가 가능하다.

let 변수 = 초기값;
while(조건){
	조건이 참일 때 실행할 코드
    	증감식
}