[유튜브 '드림코딩'] 자바스크립트(JavaScript ES6) 7강 (3)

Constructor function, in operator, for...in, for...of

오늘 내가 배운 것

Constructor function

object를 필요할 때 일일이 만들어 쓰면 불가피하게 동일한 key와 value를 반복해서 작성해야 하는 문제점이 있다. 

이것을 함수를 이용해서 값만 전달해주면 object를 만드는 유용한 함수 기능이 있다.

다른 계산을 하지 않고 순수하게 object만 생성하는 함수는 대문자로 함수명을 지정해주고 return 대신  this를 이용하여 작성하고

호출할 때는 new 키워드를 이용하여 new 함수명으로 만든다.

 

 

in operator 

해당하는 object 안에 키가 있는지 확인하는 기능

 'key' in object로 사용

 

Console.clear();  

기존에 있는 로그를 다 지운다.

 

for...in, for...of

 

둘 다 반복문으로 사용하지만 

for...in 은 객체를 탐색하고

for... of는 배열을 탐색한다.

참고 : https://velog.io/@eomttt/for-...in-for-...of-차이

 

for...in	객체의 반복에서 사용된다
	열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복한다.
	key값에 접근 가능하며 value값에는 직접적인 접근은 불가하다. key값을 리턴한다. (배열에서는 index 값) 객체의 key값, index값을 가져올 때
	순서가 보장되지 않기 때문에, 속성간 순서가 중요하다면 사용을 하지 않는것이 좋다.
	객체의 키 값의 갯수만큼 반복하여 첫번째 키 값부터 마지막 키 값 까지 반복한다.
	key를 리턴한다.

for..of	배열의 반복에서 사용된다
	Array, Map, Set 등 사용이 가능하다.
	value값을 리턴한다.
	배열의 값을 가져올 때 = 배열속 값을 그대로 던져준다.

참고 : https://blog.naver.com/yim_do/222799504639

 

드림코딩이 입문을 위한 동영상이라 그런지 자세한 설명이 많이 부족한 거 같다.

배열도 안 배운 상태라 이런 것이 있다의 느낌으로 가는 것 같은데.. 내가 더 궁금해서 찾아보게 됐다.

 

for...of 에서 

array [i]로 작성한 이유 ( i 로 쓰면 안 되는 이유)

i로 쓰게 되면 배열의 값이 아닌 인덱스 번호로 나옴

 

 

오늘의 에러

error 1 :

for in, for of 을 배우는 부분에서 

 

 

동영상처럼 코딩을 작성하면 error 가 발생한다.

Uncaught ReferenceError: value is not defined 

의 에러인데 잘못된 참조를 했을 때 발생하는 오류

 

 

 

solution 1 :

value 가 할당되지 않았는데 사용해서 그런 것으로 판단하였고, const(or let) 을 작성해서 const value of array로 작성하니 원하는 값이 나왔다.

 

 

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in 

동영상에서는 어떻게 바로 나왔는지...의문...

---

동영상 보면서 따라 적어보기

//4.Constructor function
const person5 = new Person('James', 20);
function Person(name, age) {
    //this = {};         //생략
    this. name = name;
    this. age = age;
    //return this;       //생략
}
console.log(person5);

//5. in operator: property existence check (key in obj)
// 해당하는 object 안에 키가 있는지 확인하는 기능
console.log('name' in ellie); //true
console.log('age' in ellie);  //true
console.log('random' in ellie);  //false

//6. for .. in vs for .. of
// for (key in obj)
for (let key in ellie) {
    console.log(key);
}

// for (value of iterable)
const array = [1, 2, 3, 4];

/*       밑에처럼 써야하는 것을
for (let i = 0; i < array.length; i++){
    console.log(array [i]);
}
*/   
//      for...of 문을 이용하여
for( const value of array){
    console.log(value);
}