[Web/JS] 최신 자바스크립트 기술들

✏️  객체 초기화

let name = "pooreum";
let age = 17;

let person = {name:name, age:age}; // old한 방식
let person1 = {name,age}; // 알아서 객채의 키값이 name과 age로 설정, 단 객체의 key와 value의 이름이 같아야함

✏️  객체 분리하기

// 객체 분리하기
let bts = {
    name : "방탄소년단",
    num:7
}

// 기존의 분리 방법
let name = bts.name;
let num = bts.num

// 한번에 bts의 값을 저장, 키값과 value의 값이 동일해야 함, 즉 변수의 이름이 같아야 함
let {name,num} = bts;

✏️  백틱 용법

let name = "pooreum";
let age = 18;

console.log("제 이름은"+name,"입니다 제 나이는"+age+"입니다");
console.log(`제 이름은 ${name}입니다 제 나이는 ${age}입니다`);

✏️  spreed 용법

// 배열값 가져오기
let array = [1,2,3];

let[a,b,c]=array;
console.log(a,b,c);

// rest를 사용하면 a를 제외한 나머지가 모두 들어감, ex) rest는 2,3
let [a, ...rest] = array;

// 객체도 사용가능
let person={
    name:"pooreum",
    age:19,
    height:179    
}

let {name,...restInfo} = person;
console.log(name,restInfo);

✏️  "..."연산자를 이용해서 복사하기

let a=[1,2];
let b = [3,4];
let c = [5,6];

// result에 a와 b와 c가 모두 다 들어가짐
let result = [...a,...b,...c];
console.log(result);

✏️  function함수 편리화(화살표 함수)

// 기존 방식
function foo(){
    console.log(hello)
}

// 최근 방식
let foo = () => {
    console.log(hello)
}

// 왜 사용하는가
function foo (){
    return "ahaa"
}

let foo = ()=> "haha"
let foo = () => {
	console.log("kekekek)
	return "haha
}
console.log(foo())

// 그러나, this를 사용하지 못한다, 대체는 불가능 예시 보기
let age = 17
let person = {
    name:"poo",
    age:20 ,
    getInfo:function(){
        console.log(age)
    }
}

person.getInfo(); // 출력 결과가 17이 출력된다, getInfo함수의 age를 this.age로 바꾸면 20 출력

let age = 17
let person = {
    name:"poo",
    age:20 ,
    getInfo:()=>{
        console.log(this.age)
    }
}
person.getInfo(); // 화살표 함수는 자기 자신을 못 가리켜서 출력 결과는 window에서 ~~~가 출력됨, 화살표 함수의 한계
// lexical scope: 자신이 속한 곳