let , const, var
// let const는 블록단위 스코프
let blockScopeVariable = "Available only in this block";
if (true) {
let blockedScope = "Visible inside this block";
console.log(blockedScope);
}
// 아래 주석 코드는 스코프 오류로 실행X
// console.log(blockedScope)
console.log(blockScopeVariable);
for (let i = 0; i < 3; i++) {
console.log(i);
}
function testFunction() {
let test = "any words";
if (true) {
test = "changed value";
}
console.log(test);
}
testFunction();
//var는 undefined를 담고 호이스팅 되고 값이 할당 되는 문제가 발생함
const testValue = "hello world!";
console.log(testValue);
// 객체 : key - value 의 구조로 이루어짐
// JSON(JavaScript Object Notation)
// -> A B(사이트간 , 혹은 서버간) 주고 받는 형태 (오브젝트(객체)기반임)
const user = {
name: "르탄이",
age: "30",
isAdmin: true,
//객체에는 함수도 들어가는 등 어떤 타입도 들어 갈 수 있다.
printHello: () => console.log("hello"),
};
//객체 접근 : 점 표기법
console.log(user.name);
console.log(user.age);
console.log(user.isAdmin);
user.printHello();
//객체 접근 : 괄호 표기법
const attribute = "name";
console.log(user[attribute]);
user.email = "222@www.com"; // 객체 속성 추가
user.age = 31; // 객체 속성 변경
delete user.isAdmin; // 객체 속성 삭제
console.log(user);
// 리액트에서 State에 값을 저장 할 시 위와 같이 사용X
// 위와 같이는 객체의 주소까지 변경이 발생 한 것이 아님
// 배열
const numbers = [1, 2, 3];
console.log(numbers);
// 배열 접근
console.log(numbers[1]);
numbers[1] = 10;
console.log(numbers[1]);
// 객체
const user = {
name: "르탄이",
age: 30,
isAdmin: true,
};
// Object.keys() 객체의 키만 가져옴
const keys = Object.keys(user);
console.log(keys);
// Object.values() 객체의 값만 가져옴
const values = Object.values(user);
console.log(values);
// entries 객체의 쌍을 배열로 반환
const entries = Object.entries(user);
console.log(entries);
// assign(기존객체, 더할객체) 대상 객체에 출처 객체의 속성을 더함
const userDetails = {
occupation: "개발자",
};
Object.assign(user, userDetails);
console.log(user);
// // 배열 push, pop
// const fruits = ["apple", "banana"];
// console.log(fruits);
// // 배열 추가
// fruits.push("orange");
// console.log(fruits);
// // 배열 삭제
// const lastFruit = fruits.pop();
// console.log("-----");
// console.log(lastFruit);
// console.log(fruits);
// 배열map : 원본 배열에서 각 요소를 가공한 새로운 배열을 리던하는 함수
// 유뷰트에서 각 영상을 가공하여 보여주는 역할
const numbers = [1, 2, 3, 4, 5];
// map 내부에 콜백 함수를 넣어야함
const squared = numbers.map((num) => {
//return 이 없을 시 undefined을 리턴함
// num %2 === 0 같은걸 넣으면 true , false를 리턴
return num * num;
});
console.log(squared);
// 배열filter : 주어진 함수에 테스트를 통과하는 모든 요소를 새로운 배열로 리턴
// 유튜브에서 검색어에 맞는 영상을 보여주는 역할
const evenNumbers = numbers.filter((num) => {
return num % 2 === 0;
});
console.log(evenNumbers);
const movieList = [
{
id: 1,
title: "movie1",
image: "image1.jpg",
},
{
id: 2,
title: "movie2",
image: "image2.jpg",
},
{
id: 3,
title: "movie3",
image: "image3.jpg",
},
];
const filterList = movieList.filter((movie) => {
return movie.title === "movie2";
});
console.log(filterList);
// 배열reduce : 배열에 각 요소에대해서 주어진 함수를 실행하고 결과를 누적하여 리턴
// 누적기 라고도 불림 / 인자가 2개 필요 (누적된값, 일반값)
// [1,2,3,4,5] 배열의 경우 5번이 아닌 4번 순회 -> 1,2/3/4/5
// 누적된값이란 return값을 받음 -> 누적기 이유
// 합을 구하거나 고급 문법에서도 많이 쓰임
const result = numbers.reduce((a, b) => {
return a + b;
});
console.log("reduce : ", result);
// 배열sort : 정렬 / 원본 배열의 값을 바꿈
const fruits = ["banana", "orange", "apple", "mango"];
console.log(fruits);
fruits.sort();
console.log(fruits);
// sort()만 사용 시 문자열로 비교하여 100이 2보다 작다고 인식됨
// -> 유니코드로 비교하여 나열된다 생각하면 됨
const n = [40, 100, 1, 5, 25];
n.sort();
console.log(n);
// 오름차순 / 비교 함수를 넣을 시 데이터 타입을 기반으로 비교하여 나열됨
n.sort((a, b) => a - b);
console.log(n);
// 내림차순
n.sort((a, b) => b - a);
console.log(n);
// Template Literals
// 템플릿 리터럴은 변수와 표현식을 문자열 안에 쉽게 삽입하게 해주는 문법(백틱)
const customer = {
name: "르탄이",
};
const item = {
name: "커피",
price: 4000,
};
console.log(
"감사합니다 " +
customer.name +
"님 " +
item.name +
"를 " +
item.price +
"원에 구매함"
);
//위 코드를 템플릿리터럴 적용
console.log(`감사합니다. ${customer.name}님!`);
const orderDetails =
"고객 : " +
customer.name +
"\n" +
"상품 : " +
item.name +
"\n" +
"가격 : " +
item.price;
console.log(orderDetails);
//위 코드를 템플릿리터럴 적용
const orderDetails2 = `고객 : ${customer.name}
상품 : ${item.name}
가격 : ${item.price}`;
console.log(orderDetails2);
// Destructuring
// 디스트럭쳐링은 구조 분해 -> 속성이 많으면 일일히 출력 힘드니 한번에 처리
// -> 구조를 벗어내서 각각 변수화를 시킴
// 객체 디스트럭쳐링
const item2 = {
name: "커피",
price: 4000,
};
// const name = item2.name;
// const price = item2.price;
const { name, price } = item2;
console.log("name=>", name);
console.log("price=>", price);
// great의 person을 인자값으로 넣으면 person.name으로 접근해야함
// 객체는 이름을 따라가므로 인자값의 순서는 상관 없음 (key가 중요하다)
great = ({ name, age }) => {
console.log(`안녕하세요 이름${name}이고, 나이는${age}입니다`);
};
const person = {
name: "르순이",
age: 28,
};
great(person);
// 배열 디스트럭쳐링 -> 이름은 연관이없지만 위치(인덱스)만 맞으면 할당
const colors = ["red", "green", "blue"];
const [firstColor, secondColor] = colors;
const [, , thirdColor] = colors;
console.log(firstColor);
console.log(secondColor);
console.log(thirdColor);