0. 변수
백틱(backtic) 문자 ` 사용
let name = "dana"
let age = 18
console.log("내 이름은",name,"나이는",age) // 내 이름은 dana 나이는 18
console.log(`내 이름은 ${name} 나이는 ${age}`) // 내 이름은 dana 나이는 181. 객체 초기화 방법
let name ="dana"
let age = 29
let person = {name,age} // 최신 문법
let person2 = {name:name,age:age} // 이전 문법, 같은 방식이다.
// 키값 다르게 줄때는 이 방식 써야함
let person3 = {nameValue:name,ageValue:age}
console.log(person)
console.log(person2)
console.log(person3)
/*
결과
Object { name: "dana", age: 29 }
Object { name: "dana", age: 29 }
Object { nameValue: "dana", ageValue: 29 }
*/2. 객체, Destructuring
let bts = {
name:"방탄소년단",
num:7
}
// 이전 방식
//let name = bts.name;
//let num = bts.num;
// 최신 문법
let {name,num} = bts // 키값과 일치해야함
// let {nameValue,numValue} = bts // undefined undefined
console.log(name,num) // 방탄소년단 73. 배열, Destructuring
let array = [1,2,3]
// let a = array[0]
// let b = array[1]
// let c = array[2]
let [a,b,c] = array // 같음
console.log(a,b,c) // 1 2 34. 객체, Rest destructuring
let person = {
name:"dana",
age:19,
cute:true
}
let {name,...restInfo} = person
console.log(name, restInfo)
// dana Object { age:19, cute:true}5. 배열, Rest destructuring
let array = [1,2,3]
// a를 뺀 나머지가 변수 rest에 들어감
let [a,...rest] = array
console.log(rest) //[2,3]6. Spread
let a = [1,2]
let b = [3,4]
let c = [5,6]
let result = a.concat(b,c)
let result2 = [...a,...b,...c]
console.log(result)
console.log(result2)
// 결과 같음 [1, 2, 3, 4, 5, 6]7. 화살표 함수
화살표 함수 표현식은 기존의 function 표현방식보다 간결하게 함수를 표현할 수 있다. 화살표 함수는 항상 익명이며, 자신의 this, arguments, super을 바인딩하지 않는다. 자신만의 this를 생성하지 않고 자신을 포함하고 있는 context의 this를 이어 받는다.
function foo(){
console.log("hi")
console.log("hello")
}
// 같은 함수임. 화살표가 function을 대체함
let foo = ()=>{
console.log("hi")
console.log("hello")
}function foo(){
return "haha"
}
// 함수가 한줄이고 return만 있으면 {} 생략 가능
// 같은 함수임.
let foo = ()=>"haha"
//------------------------------------
let koo = (a,b) =>{
let result = a*b
return result
}
//또는
let koo = (a,b) =>a*b
//로도 표현 가능 7-1. 일반함수와 화살표함수 차이점
일반함수는 this 사용 가능.
화살표 함수는 this 안됨.
let age = 17
let person = {
name:"dana",
age:20,
getInfo:function(){
console.log(age) //17
console.log(this.age) //20
console.log(this) //Object { name: "dana", age: 20, getInfo: ƒ }
}
/*
getInfo:()=>{
console.log(this) // this는 person 객체가 있는 window를 가르킴}
}
*/
}
person.getInfo()
7-2. 화살표 함수를 쓰면 안되는 경우
Object 안에 함수 정의시
const person = {
points: 23,
score: function(){
this.points++; // 여기에선 화살표함수 쓰면 point가 증가 안함
}
}프로토타입 함수
class Car {
constructor(make, color) {
this.make = make;
this.color = color;
}
}
let hyundai = new Car("noona","white")
Car.prototype.summary = function () {
console.log( `This car is a ${this.make} in the colour ${this.colour}`)
} // 여기서 화살표함수를 쓰면 안됀다 hyundai.summary()// 1. 다음 코드를 es6 문법을 이용하여 재작성
/*
let name="noona's fruit store"
let fruits = ["banana","apple","mango"]
let address="Seoul"
let store = { name:name, fruits:fruits, address:address
}
console.log(store)
*/
let name = "noona's fruit store"
let fruits = ["banana","apple","mango"]
let address="Seoul"
let store = {name,fruits,address}
console.log(store)
// 2. 제 가게 이름은 noona's fruit store 입니다. 위치는 Seoul 에 있습니다 로 출력하기.
console.log(`제 가게 이름은 ${store.name} 입니다. 위치는 ${store.address} 에 있습니다`)
// 3. Destructoring을 이용하여 해결
/*
function calculate(obj){ // 함수 안을 바꾸시오
return a+b+c
}
calculate({a:1,b:2,c:3})
*/
function calculate(obj){
let {a,b,c} = obj;
return a+b+c
}
console.log(calculate(
{a:1,b:2,c:3}
))
// 4. 정답이 true가 나오게
/*
let name="noona store"
let fruits = ["banana","apple","mango"]
let address={
country:"Korea",
city:"Seoul"
}
function findStore(obj){
return name="noona store" && city == "Seoul"
}
console.log(findStore({name,fruits,address}))
*/
let name="noona store"
let fruits = ["banana","apple","mango"]
let address={
country:"Korea",
city:"Seoul"
}
function findStore(obj){
//let {country,city} = address;
let {name,address:{city}} = obj; // 오브젝트 안에 오브젝트는 address:{city} 다음과 같이 선택이 가능
return name="noona store" && city == "Seoul"
}
console.log(
findStore(
{name,fruits,address}
)
)
// 5. 다음과같이 프린트되게
/*
function getNumber(){
let array = [1,2,3,4,5,6] // 여기서부터 바꾸시오
return {first,third,forth}
}
console.log(getNumber()) // 결과값 { first: 1, third: 3, forth: 4 }
*/
function getNumber(){
let array = [1,2,3,4,5,6] // 여기서부터 바꾸시오
let [first,,third,forth] = array
console.log( [first,,third,forth] ) // [1, undefined, 3,4]
return {first,third,forth}
}
console.log(getNumber()) // 결과값 { first: 1, third: 3, forth: 4 }
// 6. 다음의 결과가 true 가 되게
/*
function getCalendar(first, ...rest) {
return (
first === "January" &&
rest[0] === "Febuary" &&
rest[1] === "March" &&
rest[2] === undefined
);
}
console.log(getCalendar()); // 여기를 바꾸시오
*/
function getCalendar(first, ...rest) {
return (
first === "January" &&
rest[0] === "Febuary" &&
rest[1] === "March" &&
rest[2] === undefined
);
}
console.log(getCalendar("January","Febuary","March")); // 여기를 바꾸시오
// 7. 두 array 중 최소값을 찾는 함수 완성
/*
function getMinimum(){
let a= [45,23,78]
let b = [54,11,9]
return Math.min() // 여기를 바꾸시오
}
console.log(getMinimum())
*/
function getMinimum(){
let a= [45,23,78]
let b = [54,11,9]
return Math.min(...a,...b) // 여기를 바꾸시오
console.log(...a,...b) //45 23 78 54 11 9
}
console.log(getMinimum()) // 9
// 8. 다음 함수를 화살표 함수로
/*
function sumNumber() {
// 여기서부터 바꾸시오
const sum = function (a, b) {
return a + b;
};
return sum(40, 10);
}
*/
function sumNumber() {
// 여기서부터 바꾸시오
const sum = (a, b) => a + b;
return sum(40, 10);
}
console.log(sumNumber()) // 50
// 9. 다음함수를 화살표 함수로
/*
function sumNumber() {
//여기를 바꾸시오
return addNumber(1)(2)(3);
function addNumber(a) {
return function (b) {
return function (c) {
return a + b + c;
};
};
}
}
console.log(sumNumber());
*/
function sumNumber() {
//여기를 바꾸시오
let addNumber = (a)=>(b)=>(c)=>a + b + c;
return addNumber(1)(2)(3);
}
console.log(sumNumber()); // 6(참고)
function으로 선언된 일반 함수들은 자바스크립트가 시작됨과 동시에 미리 메모리에 선언되어 기억되어진다(호이스팅개념) 따라서 함수를 선언전에 불러도 무관하다 즉,
return addNumber(1)(2)(3); // 순서상관없음
function addNumber(a) {
return function (b) {
return function (c) {
return a + b + c;
};
};
}
서로 같다.
function addNumber(a) {
return function (b) {
return function (c) {
return a + b + c;
};
};
}
return addNumber(1)(2)(3);// 순서상관없음
하지만 화살표 함수는 function으로 선언된것이 아니기 때문에 그렇지 않다. 반드시 선언과 정의 후에 불러줘야한다.
아래와 같이 작성시 에러남.
return addNumber(1)(2)(3);
let addNumber=(a)=>(b)=> (c)=> a + b + c;
화살표 함수는 호이스팅이 안된다고?👀
지난시간에서 말했듯이 function과 var로 선언된 함수,변수는 호이스팅이 됩니다 메모리힙에가서 미리 저장이 되어있습니다. 따라서 순서 상관없이 아무데서나 부르면 호출이 됐었지만(로직적으로 이러면 사실 안됌),
이를 문제삼아 나온게 let과 const 입니다. 선언시 사실 호이스팅이되어 메모리힙에 가있지만 정의가 된 부분에 오기 전까지 TDZ(일시적 사각지대)를 만든들어 접근 못하게 막어놨었죠. (기억이 안나면 호이스팅 영상 다시보고와요~)
화살표 함수도 그래서 TDZ에 의해 정의 전에 접근이 안됍니다. 화살표 함수 자체는 const에 들어있죠 그래서 일반함수 선언과 달리 순서에따라 사용이 가능한겁니다.
"누나 그러면 addEventlistner(“click”,(event)=>getNewsByTopic(event)) 는 왜 된거야?"🤔
addEventListener("click",getNewsByKeyword)와 달리 getNewsByTopic는 본인이 바로 불린것이 아닌 익명의 함수 안에 들어가있습니다.
즉 addEventlistner("click",(event)=>getNewsByTopic(event))이 코드 실행시 getNewsByTopic이 함수가 바로 쓰인게 아니라 익명의 함수가 쓰인것이기 때문에 에러가 안난것입니다. 그리고 클릭을 할 시에는 이미 코드를 한번 쫙~ 처음부터 끝까지 돌린 상태이기 때문에 getNewsByTopic 에 접근이 가능한것이구요.
addEventListener("click",getNewsByKeyword)의 경우 이 부분 코드 실행시 getNewsByKeyword 가 직접적으로 호명이 됐기 때문에 함수 정의부분 보다 위쪽에 있다면 접근이 불가능한 것입니다.
