JavaScript 정리
JavaScript란 웹 브라우저에서 사용하기 위해 만들어진 프로그래밍 언어이다.
HTML로 웹페이지의 뼈대를 잡고, CSS로 꾸미고, JavaScript로 웹을 움직이게 만든다.
1990년대에는 웹 브라우저 UI를 동적으로 표현하기 위한 용도로만 사용되었지만, 현재는 Node.js로 서버를 개발하거나 React, Vue 등으로 프론트엔드 개발에 많이 사용된다.
기본 문법
출력 시에는 console.log(출력값) 형태로 사용한다.
console.log('Hello JavaScript!');
console.log(1 + 2 + 3 + 4); // 10변수와 상수
변수 선언은 let 키워드와 var를 사용한다. 하지만 최근에는 var는 잘 사용하지 않는다.
// 변수 선언과 할당
let value = 1;
console.log(value); // 1
// 값 변경 가능
value = 2;
console.log(value); // 2// var
var a = 1;
var a = 2; // 중복 선언 가능, 호이스팅 문제 등...상수 선언은 const를 사용한다.
// 상수 선언
const a = 1;
// 값 변경 불가
a = 2; // 에러JavaScript는 자바와 다르게 약한 타입(동적 타이핑) 언어라서 자료형이 동적으로 결정된다.
그래서 데이터 타입을 결정할 때도 변수에 원하는 값을 바로 넣어주면 된다.
let age = 22;
let price = 3.14;
let temperature = -1;
let name = '자바스크립트';
let message = "안녕하세요";
let isActive = true;
let isCompleted = false;
const emptyValue = null;연산자
산술 연산, 비교 연산, 논리 연산, 삼항 연산 등은 자바와 비슷하다.
let a = 10 + 5; // 15
let b = 10 - 5; // 5
let c = 10 * 5; // 50
let d = 10 / 5; // 2
let e = 10 % 3; // 1 (나머지)
// 일치 비교 (타입까지 체크)
console.log(1 === 1); // true
console.log(1 === '1'); // false
// 동등 비교 (타입 변환 후 비교)
console.log(1 == '1'); // true
// 불일치
console.log(1 !== '1'); // true
// 크기 비교
console.log(10 > 5); // true
console.log(10 >= 10); // true
// AND (&&)
console.log(true && true); // true
console.log(true && false); // false
// OR (||)
console.log(true || false); // true
console.log(false || false); // false
// NOT (!)
console.log(!true); // false
console.log(!false); // true
// 조건 ? 참일때 : 거짓일때
const age = 20;
const status = age >= 18 ? '성인' : '미성년자';
console.log(status); // 성인조건문 (if, switch)
조건문으로는 if, switch 문이 있다. 자바와 유사하다.
if (age >= 19) {
console.log("성인입니다");
} else if (age >= 13) {
console.log("청소년입니다.");
} else {
console.log("어린이입니다.");
}
const status = age >= 18 ? "성인" : "미성년자";
console.log(status);const fruit = "apple";
switch (fruit) {
case "apple":
console.log("사과입니다");
break;
case "banana":
console.log("바나나입니다");
break;
}함수
JavaScript에서 함수를 선언할 때는 기본적으로 function을 사용한다.
function test() {
console.log("hi");
}
console.log(typeof test);
function test2(abc) {
return abc();
}
let value = 10;
let result = test2(test);
result;또는 화살표 함수를 사용하여 간단하게 함수를 지정할 수 있다.
// 기본 형태
const subtract = (a, b) => {
return a - b;
};
// 간단한 형태
const double = n => n * 2;
const add4 = (a, b) => a + b;
console.log(add4(4, 3));
const qwer = () => "qwer";
console.log(qwer());객체
JavaScript에서도 객체를 생성하고 접근할 수 있다. 객체 안에도 함수를 사용할 수 있다.
const dog = {
name: "누렁이",
age: 3,
sound: "멍멍",
say: function () {
console.log(this.sound);
},
};
console.log(dog.name);
console.log(dog.age);
console.log(dog["name"]);
console.log(dog["age"]);
dog.say();구조 분해 할당(Destructuring)
객체를 분해해서 새로 상수나 변수에 할당할 수 있다.
const user = {
username: "joy",
email: "joy@naver.com",
age: 30,
};
const { username, email, age } = user;
console.log(username);
console.log(age);
console.log(email);
// 함수 파라미터에서 구조 분해
function printUser({ username, age }) {
console.log(`${username}님은 ${age}살입니다.`);
}
printUser(user);Getter / Setter
Getter, Setter를 사용하여 값을 받거나 설정할 수 있다.
const user = {
_name: "김철수",
_age: 25,
get name() {
return this._name;
},
set name(value) {
if (value.length < 2) {
console.log("이름은 2글자 이상이어야 합니다.");
return;
}
this._name = value;
},
};
console.log(user.name);
user.name = "이영희";
console.log(user.name);const numbers = {
_a: 1,
_b: 2,
get sum() {
return this._a + this._b;
},
};
console.log(numbers.sum);this 바인딩
const obj = {
name: "객체",
normalFunc: function () {
console.log(this.name);
},
arrowFunc: () => {
console.log(this.name);
},
};
obj.normalFunc();
obj.arrowFunc();배열
JavaScript에서도 배열을 사용할 수 있고, 기본적인 배열 메서드도 사용 가능하다.
const array = [];
console.log(typeof array);
// 배열 생성
const fruits = ["사과", "바나나", "오렌지"];
console.log(fruits);
// 요소 접근
console.log(fruits[0]);
console.log(fruits[2]);
const numbers = [1, 2, 3, 4, 5];
// 여러 자료형 할당 가능
const mixed = [1, "hello", true, null];
console.log(mixed);
console.log(numbers);
numbers[0] = 100;
console.log(numbers);
// 길이 확인
console.log(numbers.length);
// 배열 메서드 기본
const array3 = new Array(10, 20, 30);
// 추가/제거
array3.push(40);
array3.pop();
console.log(array3);
array3.shift();
console.log(array3);
array3.unshift(10);
console.log(array3);
// 연결과 분할
const array4 = [40, 50];
const arr = array3.concat(array4);
console.log(arr);
array4.push(() => console.log("hi"));
console.log(array4);
array4[2]();스프레드 연산자(Spread)
스프레드 연산자는 배열, 문자열, 객체 등 반복 가능한(Iterable) 값을 개별 요소로 펼쳐서 사용할 수 있는 문법이다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
console.log([arr1, arr2]);
const combined = [...arr1, ...arr2];
console.log(combined);
// 배열 복사
const original = [1, 2, 3];
const copy = [...original];
console.log(copy);반복문(for, while)
// 기본 for문
for (let i = 0; i < 5; i++) {
console.log(i);
}
// 배열 순회
const colors = ["red", "green", "blue"];
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}// 기본 while문
let count = 0;
while (count < 5) {
console.log(count);
count++;
}느낀점
처음 배워보는 언어이지만 자바를 먼저 배웠어서 그런가 생각보다 쉽게 느껴졌다. 어느 정도 구조가 비슷해서 익숙한 부분도 있고, 어색한 부분도 있지만 생각보다 재미가 있었고 웹의 구조를 이해하기 위해서 잘 공부해야겠다는 생각이 들었다.
CSS는 양이 너무 많아서 블로그에 따로 글을 올리지는 않았다.
백엔드 공부중입니다.