본문 바로가기
한화시스템 Beyond SW Camp/프론트엔드

[JavaScript] 기본 문법 (변수와 상수, 데이터 타입과 연산자, 조건문과 반복문, 함수)

by taeh00n 2024. 12. 16.

 ※ 이 글에서 다룬 기반기술, 프론트엔드, 백엔드, 데브옵스 등 풀스택 개발 지식은 모두 한화시스템 Beyond SW Camp 12기에서 배운 내용을 복습한 것입니다.

 

변수와 상수

1. var

var x = 10;
var x = 20;
x = 30;
console.log(x);		//30

2. let

// 변수 만드는 법
// let 변수이름;

// 변수에 무언가를 저장하는 법
// 변수이름 = 무언가;
let y = 10;
y = 20;
console.log(y);		//20

3. const

// const 선언 후 값을 변경할 수 없음

const z = 30;
// z = 40; // 오류 발생
console.log(z); // 30

데이터 타입과 연산자

1. 데이터 타입 (기본 타입)

// 숫자 (Number)
let num = 42;
console.log(typeof num); // "number"

// 문자열 (String)
let str = "Hello, World!";
console.log(typeof str); // "string"

// 불리언 (Boolean)
let isTrue = true;
console.log(typeof isTrue); // "boolean"

// null
let nullValue = null;
console.log(typeof nullValue); // "object" (주의: null은
특별한 값)

// undefined
let undef;
console.log(typeof undef); // "undefined"

// Symbol
let sym = Symbol('description');
console.log(typeof sym); // "symbol"

2. 데이터 타입 (참조 타입)

// 객체를 만드는 법
변수이름 = {
	변수이름1 : 값;
	변수이름2 : 값;
}

// 객체를 안에 있는 변수 사용하는 법
	변수이름.변수이름1
	변수이름["변수이름1"];

// 배열 만드는 법
	변수이름 = [값1, 값2, 값3];

// 배열안에 있는 값 사용하는 법
	변수이름[순서번호];
// 객체 (Object)
let person = {
 name: "John",
 age: 30
 };
console.log(typeof person); // "object"

// 배열 (Array)
let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true (배열 확인)

// 함수 (Function)
function greet() {
 console.log("Hello!");
}
console.log(typeof greet); // "function"

 

3. 연산자 (산술 연산자)

let a = 10;
let b = 5;
console.log(a + b); // 15 (더하기)
console.log(a - b); // 5 (빼기)
console.log(a * b); // 50 (곱하기)
console.log(a / b); // 2 (나누기)
console.log(a % b); // 0 (나머지)

 

4. 연산자 (비교 연산자)

let x = 10;
let y = 20;
console.log(x == y); // false (같은지 비교)
console.log(x === y); // false (값과 타입이 같은지 비교)
console.log(x != y); // true (같지 않은지 비교)
console.log(x !== y); // true (값과 타입이 다르면 true)
console.log(x < y); // true (x가 y보다 작은지)
console.log(x > y); // false (x가 y보다 큰지)
console.log(x <= y); // true (x가 y보다 작거나 같은지)
console.log(x >= y); // false (x가 y보다 크거나 같은지)

 

5. 연산자 (논리 연산자)

let p = true;
let q = false;
console.log(p && q); // false (AND: 둘 다 true여야 true)
console.log(p || q); // true (OR: 하나라도 true면 true)
console.log(!p); // false (NOT: true는 false로, false는 true로)

 

6. 연산자 (할당 연산자)

let z = 10;
// 단순 할당
z = 15;
console.log(z); // 15
// 복합 할당
z += 5; // z = z + 5
console.log(z); // 20
z -= 3; // z = z - 3
console.log(z); // 17
z *= 2; // z = z * 2
console.log(z); // 34
z /= 2; // z = z / 2
console.log(z); // 17
z %= 5; // z = z % 5
console.log(z); // 2

 


조건문과 반복문

1. 조건문

// 조건문
if(조건1){
	조건1이 참일때 실행할 코드;			
} else if(조건2){
	조건2가 참일 때 실행할 코드;
} else {
	조건1도 거짓, 조건2도 거짓일 때 실행할 코드;
}
let age = 20;
if (age >= 18) {
 console.log('성인입니다.');
} else {
 console.log('미성년자입니다.');
}

2. 반복문

// for 반복문1
for (초기값; 조건식; 증감식) {
	반복해서 실행할 코드;
}

// for 반복문2
for (변수이름 of 배열){
	반복해서 실행할 코드;
}

// while 반복문3
변수이름 = 초기값;
while(조건){
	반복해서 실행할 코드;
	조건을 변경시키는 코드;
};
for (let i = 0; i < 5; i++) {
 console.log(i); // 0, 1, 2, 3, 4
}
for (let n of [1,2,3,4,5]) {
 console.log(n);
}
let count = 0;
while (count < 3) {
 console.log(count); // 0, 1, 2
 count++;
}

함수

1. 함수 사용법

//함수 만드는 법1
function 함수이름 (매개변수1, 매개변수2) {
	함수를 실행했을 때 실행할 코드
	return 함수를 실행한 곳에 돌려줄 값
}

//함수를 사용하는 법
함수이름(값1, 값2)

//함수 만드는 법2
const 함수이름 = (매개변수1, 매개변수2) => {
	함수를 실행했을 때 실행할 코드
	return 함수를 실행한 곳에 돌려줄 값
}
//함수를 사용하는 법
함수이름(값1, 값2)
function add1(numb1, numb2){
	return num1 + num2;
}
console.log(add1(10,20));

const add2 = function (num1, num2) {
	return num1 + num2;
}
console.log(add2(10,20));

const add3 = (num1, num2) => {
	return num1 + num2;
}
console.log(add3(10,20));

const add4 = (num1, num2) => num1 + num2;
conosole.log(add4(10,20));

2. 스코프

        //스코프
        const functionScope = () => {
            if (true) {
                var x = 10;
            }
            console.log(x);
        }
        functionScope();

        let globalVar = 30; //밖에서 만든걸 안에서 쓰는건 가능
        const globalScope = () => {
            console.log(globalVar);
        }
        globalScope();


        const blockScope = () => {
            if (true){
                let x = 10; //안에서 만든걸 밖에서 쓰는건 불가능
            }
            console.log(x);
        }
        blockScope();

let은 {}안에서 만든걸 {}밖에서 쓰는건 불가능