JS 문법 복습

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);