자바스크립트는 기본적으로 파이썬과 문법적으로 유사한 부분이 많습니다. 파이썬처럼 변수나 상수를 선언할 때 타입을 명시할 필요가 없습니다.
원시타입
Number
let num1 = 20;
let num2 = 1.5;
let num3 = -10;
let hex = 0xff; // 16진수 (255)
let octal = 0o10; // 8진수 (8)
let infinity = Infinity; // 양의 무한대
let uninfinity = -Infinity; // 음의 무한eo
console.log(num1 + num2);
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);
console.log(num1 % num2);
console.log(typeof num1);
let num4 = NaN; // 수치 연산이 실패할 때 나오는 값
String
let nickname = "peel";
let backTick = `제 이름은 ${nickname} 입니다`; // $, {} 같은 특수기호를 넣어서 동적인 문자열을 만들 수 있습니다. (템플릿 리터럴 문법)
console.log(backTick);
Boolean
let isMatch = false;
let isMatch2 = true;
Null / Undifined
let book = null;
let none; // 변수를 초기화하지 않으면 자동으로 undifined 초기화null과 undefined는 컴퓨터의 관점에서는 유사하게 값이 없음을 나타내지만 개발자가 코드를 작성하는 입장에서는 의미하는 바가 조금 다릅니다. null은 개발자가 의도적으로 '값이 비어있음'을 나타내기 위해 직접 할당한 값입니다. 이는 해당 변수에 값이 없어야 함을 명시적으로 표현할 때 사용되죠. 반면에 undefined는 변수가 선언되었지만 아직 어떠한 값으로도 초기화되지 않았거나, 존재하지 않는 객체 속성에 접근하려 할 때처럼 시스템에 의해 자동으로 할당되는 값입니다. 즉, null은 '개발자의 의도적인 빈 값'을, undefined는 '초기화되지 않았거나 정의되지 않은 상태'를 나타낸다고 이해하시면 됩니다.
객체타입
여러 가지 값을 동시에 저장하는 자료형
object
let obj1 = new Object(); // 생성자 이용
let obj2 = {}; // 객체 리터럴 방식
// 객체 프로퍼티(객체 속성) 함수, 배열, 객체가 들어올 수 있음
let book = {
title: "effective java",
author: "기억 안남",
price: 20000,
10: 20,
"is match": true, // 띄어쓰기를 사용하려면 문자열로 작성
};
// 프로퍼티 접근
let title = book.title;
let price = book["price"];
let property = "author"; // key를 값으로 변수 초기화
let author = book[property];
console.log(title);
console.log(price);
console.log(author);
// 프로퍼티 추가
book.plus = "프로퍼티 추가1";
book["plus2"] = "프로퍼티 추가2";
console.log(book); // 기본적으로 객체의 최종값을 반환
console.log(JSON.parse(JSON.stringify(book)));
// 프로퍼티 수정
book.plus = "프로퍼티 수정";
// 프로퍼티 삭제
delete book.plus2;
// 프로퍼티 존재 유무 확인
let result1 = "title" in book; // book이라는 객체에 title 프로퍼티 존재 유무 확인
console.log(result1);// 상수 객체
const animal = {
type: "고양이",
name: "나비",
color: "black",
};
// 상수 객체에는 추가, 수정, 삭제 가능
// 상수 객체에 새로운 값을 할당하는게 문제지만 저장되어 있는 객체를 변환하는 작업은 문제가 되지 않는다.
animal.age = 2;
animal.name = "네코";
delete animal.color;
console.log(animal);
const person = {
name: "peeljun",
// 화살표 함수 가능
sayHi: function () {
console.log("person 객체 안녕");
},
};
person.sayHi();
person["sayHi"]();
function
// 호이스팅
// 자바에서는 선언하지 않은 함수를 사용하면 컴파일 오류가 발생
// 하지만 자바스크립트는 호이스팅이라는 기능으로 코드 최상단으로 끌어올립니다.
function getArea(width, height) {
function another() {
// 중첩 함수
console.log("another");
}
another();
let area = width * height;
return area;
}
// 함수 표현식
// 이런 함수 표현식은 호이스팅 기능을 제공하지 않습니다
let var2 = function funcB() {
console.log("funcB");
};
var2();
// 화살표 함수
let var3 = () => {
console.log("funcC");
};
let var4 = () => 1; // 화살표 함수에서 바로 return 나오면 {} 생략 가능
let var5 = (test) => (test += 1);
console.log(var3()); // 화살표 함수는 return 값이 없으면 Undifined가 반환
console.log(var4());
console.log(var5(20));// 콜백함수
// 매개변수에 값이 아닌 함수가 들어와서 함수 내부에서 실행하는 함수
function main(value) {
value();
}
function sub() {
console.log("sub 함수 실행");
}
main(sub);
-----------------------------------------------------------------------------------
// 콜백함수
// 매개변수에 값이 아닌 함수가 들어와서 함수 내부에서 실행하는 함수
function main(value) {
console.log("main 함수 실행");
value();
}
// 콜백함수를 화살표 함수 표현식으로 사용할 수 있음
main(() => {
console.log("sub 함수 실행");
});
// 콜백함수의 활용
function repeat(count, callback) {
for (let idx = 1; idx <= count; idx++) {
callback(idx);
}
}
repeat(5, function (idx) {
console.log(idx);
});
repeat(5, (idx) => {
console.log(idx * 2);
});
repeat(5, (idx) => {
console.log(idx * 3);
});
배열
// 1. 배열 생성
let arrA = new Array(); // 배열 생성자
let arrB = []; // 배열 리터럴 (대부분 사용)
let arrC = [
1,
2,
3,
true,
"hello",
null,
undefined,
() => {}, // 화살표 함수
{}, // 객체
[], // 배열
];
// 2. 배열 요소 접근
let item1 = arrC[0];
let item2 = arrC[1];
arrC[0] = "hello";
console.log(arrC);