※ 이 글에서 다룬 기반기술, 프론트엔드, 백엔드, 데브옵스 등 풀스택 개발 지식은 모두 한화시스템 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();
'한화시스템 Beyond SW Camp > 프론트엔드' 카테고리의 다른 글
[Vue.js] ref, reactive, v-if, v-for (0) | 2024.12.26 |
---|---|
[Vue.js] Vue-router (0) | 2024.12.23 |
[Vue.js] Vue.js 기본 설정 (0) | 2024.12.20 |
[JavaScript] 기본 문법 (DOM : Document Object Model, Class 속성 추가/삭제) (0) | 2024.12.17 |