Javascript - intermediate2

1. 구조 분해 할당(01:03:24시작)

배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

 

1) 배열

let users = ['Mike', 'Tom', 'Jane'];
let[user1, user2, user3] = users;
// 위는 
		let user1 = users[0];
		let user2 = users[1];
        let user3 = users[2];

let [a,b,c] = [1,2];
//c는 undefined일 경우 기본값을 아래와 같이 셋팅할 때
let[a=3, b=4, c=5] = [1,2];

 

2) 객체

let user = {naem : 'Mike', age: 30};
let {name, age} = user;

console.log(name); // 'Mike'
console.log(age); // 30

 

객체로 받은 기본값이 undefined일 때만 기본값이 사용된다. 

let user ={
	name: 'Jane',
    age: 18,
    gender : 'female'
    };

let {name, age, gender = 'male'} = user;

console.log(gender); // 'female'

 

 

2. 나머지 매개변수, 전개 구문

 1) 인수 전달

//인수 전달

function showName(name){
    conosole.log(name);
    }
showName('Mike'); // Mike
showName('Mike', 'Tom');

showName(); // undefined
 
 
 arguments는
 1. 함수로 넘어 온 모든 인수에 접근할 수 있다.
 2. 함수내에서 이용 가능한 지역 변수
 3. length / index
 4. Array 형태의 객체이다.
 5. 배열의 내장 메서드 없음(forEach, map 사용불가)
 
 
 arguments.length // 받은 개수의 인수
 
 functions showName(name) {
 	console.log(arguments.length);
    console.log(arguments[0]);
    console.log(arguments[1]);
    }
 showName('Mike', 'Tom');
 //2 - argument의 갯수
 // 'Mike'
 // 'Tom'

 

2) 나머지 매개변수 : 정해지지 않은 갯수의 인수를 배열로 나타내게 해준다. 

// names 배열안에 전달된 인수가 들어가게 된다. 

function showName(...names){
	console.log(names);
    }
    
showName(); // {}
showName('Mike'); // ['Mike']
showName('Mike', 'Tom'); // ['Mike', 'Tom']

fucntion add(...numbers){
 let result =0;
 numbers.forEach((num) => (result +=num));
 console.log(result);
 }
 add(1,2,3); //6
 add(1,2,3,4,5,6,7,8,9,10); //55
 
 //user 객체를 만들어주는 생성자 함수
 
 function User(name, age, ...skill){
 	this.name = name;
    this.age = age;
    this.skills = skills;
    }
    
const user1 = new User('Mike', 30,"html", "css");
const user2 = new User('Tom', 20, "JS","React");
const user3 = new User("Jane", 10, "English");

console.log(user1); // skills 배열에 html, css 들어감
console.log(user2); // skills 배열에 JS, React 들어감
console.log(user3);

나머지 매개변수인 ...skills는 항상 맨 뒤에 있어야 한다.

 

3) 전개 구문 : 배열

 

let arr1 = [1,2,3];
let arr2 = [4,5,6];


let result = [...arr1, ...arr2];
//arr1은 1,2,3을 의미한다.  

//중간에 쓰는 것도 가능하다. 
let result = [0, ...arr1, ...arr2, 7,8,9];
console.log(result); // [1,2,3,4,5,6]

//객체도 가능하다
let user = {name:'Mike'}
let mike ={...user, age:30}

console.log(mike) // {name:"Mike", age:30}

let arr = [1,2,3];
let arr2 =[...arr]; // [1,2,3]

let user = {name:'Mike', age:30};
let user2 = {...user};
user2.name = "Tom";

console.log(user.name); //"Mike"
console.log(user2.name); // "Tom"


// 
let arr1 = [1,2,3];
let arr2 = [4,5,6];

arr2.reverse().forEach((num) => {
	arr.unshift(num);
    });
    
console.log(arr1);
//[4,5,6,1,2,3]

//전개구문으로 하면
arr1 = [...arr2, ...arr1];

let user = { name :"Mike" };
let info = { age:30 };
let fe =["JS", "React"];
let lang = ["Korean", "English"];

user = Object.assign({}, user, info, {
		skills:[],
        });
fe.forEach((item) => {
	user.skills.push(item);
    });
    
lang.forEach((item) => {
	user.skills.push(item);
    });
    
    
//전개구문을 쓰면
user ={
	...user, 
    ...info,
    skills:[...fe, ...lang],
    };
    
console.log(user);

 

3. 클로저 : 함수와 그 함수 렉시컬 환경의 조합

함수가 생성될 당시의 외부 변수를 기억하고, 생성된 이후에도 계속 접근 가능

자바스크립트의 어휘적 환경(Lexical Environment)

let one;
one = 1;

function addOne(unm) {
	console.log(one + num);
    }
    
addOne(5);

//코드가 실행되면 변수들이 Lexical환경에 올라간다.
one:초기화 x : 사용불가
addOne:function: 초기화O, 사용가능

두 번째 
let one : undefined, 사용가능
... 순서 : 동영상 다시 봐 
https://www.youtube.com/watch?v=tpl2oXQkGZs&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=11

 

내부 lexical환경은 외부 lexical환경에 대해 참조를 갖는다. 

 

function makeAdder(x){
	return function(y){
    	return x+y;
        }
  }
const add3 = makeAdder(3);
console.log(add3(2)); // 5
add3 함수가 생성된 이후에도 상위 함수인 makeAdder의 x에 접근가능

const add10 = makeAdder(10);
console.log(add10(5); // 15
console.log(add3(1)); //4



ex1)
fuction makeCounter(){
	let num = 0;
    
    return function(){
    	return num++;
        };
  }
 //내부함수에서 외부함수의 변수에 접근한다. 
 
  let counter = makeCounter();

console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

 

4. setTimeout / setInterval

 

1) setTimeout : 일정 시간이 지난 후 함수 실행한다. 

setTimeout은 두 개의 매개변수를 받는다.
하나는 함수이고 하나는 시간

function fn(){
	console.log(3)
    }
    
setTimeout(fn, 3000);
3000 = 3s

//이 함수와 동일
setTimeout(function(){
	console.log(3)
    }, 3000);


const tId= function showName(name){
			console.log(name);
    		}

setTimeout(showName, 3000, 'Mike');
//			함수		시간	 인수
//세 번째 인수는 바로 위 showName함수의 인자로 들어감.


clearTimeout(tId); //예정된 작업을 없앤다.

 

 

2) setInterval 일정시간을 간격으로 함수를 반복 한다. 

setTimeout과 동일하게 사용하면 된다. 

fuction showName(name){
	console.log(name);
    }
    
const tId = setInterval(showName, 3000, 'Mike');

//'Mike'가 3초간격으로 계속 찍히고
clearInterval(tId); 하면 중단됨

ex1)

let num = 0;
function showTime(){
 console.log(안녕하세요. 접속하신지 ${num++}초가 지났습니다.);
 if(num> 5) {
 	clearInterval(tId);
    }
 const tId = setInterval(showTime, 1000);

 

5. call, apply, bind:

1) call

함수 호출 방식과 관계없이 this를 지정할 수 있음

const mike ={
	name:"Mike",
 };

const tom ={
	name:"Tom",
 };

fucntion showThisName(){
 	console.log(this.name);//여기선 window.name을 의미한다.     
 }

 showThisName();
 
 showThis.name.call(mike); // Mike
 //showThisName에서 this가 mike가 된 것이다. 
 
function update(birthYear, occupation){
	this.birthYear = birthYear;
    this.occupation = occupation;
    }
update.call(mike, 1999, "singer");

console.log(mike);

 

2) apply : 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같다. 

call은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만, apply는 매개변수를 배열로 받는다.

배열 요소를 함수 매개변수로 사용할 때 유용하다. 

const mike ={
	name:"Mike",
 };

const tom ={
	name:"Tom",
 };

fucntion showThisName(){
 	console.log(this.name);//여기선 window.name을 의미한다.     
 }

 showThisName();
 
 showThis.name.call(mike); // Mike
 //showThisName에서 this가 mike가 된 것이다. 
 
function update(birthYear, occupation){
	this.birthYear = birthYear;
    this.occupation = occupation;
    }
update.call(mike, [1999, "singer"]);

console.log(mike);

const nums = [3, 10, 1, 6, 4];

const minNum = Math.min.apply(null, nums);
const maxNum = Math.max.call(null, ...nums);

 

3) bind :  함수의 this값을 영구히 바꿀 수 있다. 

 

const mike ={
 name : "Mike",
 }
 
function update(birthYear, occupation){
 this.birthYear = birthYear;
 this.occupation = occupation;
 }
 
 const updateMike = update.bind(mike);
 
 updateMike(1980, "police");
 console.log(mike);
 
 
 const user ={
 	name: "Mike",
    showName: function(){
     console.log(hello, ${this.name});
     },
   };
   
   user.showName();
   
   let fn = user.showName;
   
   fn.call(user);
   fn.apply(user);
   
   let boundFn = fn.bind(user);
   
   boundFn();

 

6. 상속, 프로토타입

  1) hasOwnProperty - 객체에 프로퍼티 있는지 확인하는 함수

 

__proto__:Object에 보면 hasOwnProperty있다. 

 

2) 상속

const car = {
 wheels:4,
 drive() {
  console.log("dirve..");
  },
 };
 
 const bmw ={
 	color:"red",
    navigation:1,
  };
  
 const benz ={
 	color:"black",
 };
 
 const audi ={
 	color:"blue",
 };
 
 bmw.__proto__ =car; // bmw는 car의 상속을 받는다. 
 benz.__proto__ =car;
 audi.__proto__ =car;
 
 추가 상속
 
 const x5 = {
  color:"white",
  name:"x5",
 };
 
 x5.__proto__ =bmw;

 

3) 생성자 함수 사용

const Bmw = function (color) {
	this.colot = color;
};

Bmw.prototype.wheels = 4;
Bmw.prototype.dirve = function(){
	console.log("dirve..");
};

//아래와 같이 사용할 수도 있고 위처럼 Bmw.prototype.wheels로 사용할 수도 있다.
//x5.__proto__ = car;
//z4.__proto__ = car;

const x5 = new Bmw("red");
const z4 = new Bmw("blue");

instanceof 를 통해 해당 객체가 그 생성자로부터 생성된 것인지 확인가능하다. 

 

https://www.youtube.com/watch?v=4_WLS9Lj6n4&t=2274s