JS - 공부하기2

문법

const a = 1;
const b = 2;
const equal = a === b;
console.log(equal);

// == 이랑 === 의 차이점 
// == 타입을 검사하지 않는다. 

const c = '1'
const d =1;
const equ = c == d;
console.log(equ);

> true

되도록이면 === 3개를 사용하자.

const a = 1;
const b = 2;

const notequal = a !== b;
console.log(notequal);

!== 으로 사용한다. 

---

크고 작은

 

const a = 1;
const b = 2;
const c = 3;

console.log(a < b);
console.log(c > a);
console.log(a >= b);
console.log(c <= b);

// 문자열 붙이는 방법

const e = "안녕";
const d = "하세요";
console.log(e + d);

const a = 1;

if (a + 1 === 2) {
  const a = 2;
  console.log(a);
}
console.log(a);

var b = 1;

if (a + 1 === 2) {
  var b = 2;
  console.log(b);
}
console.log(b);

> 2

> 1

> 2

> 2

---

const a = 1;

if (a + 1 === 2) {
  const a = 2;
  console.log(a);
}
console.log(a);

var b = 1;

if (a + 1 === 2) {
  var b = 2;
  console.log(b);
}
console.log(b);

 

ES6

ECMAScript6 > 자바 스크립트 버전이라고 생각하면 된다. 

ES2015 (2015년도에 발표해서) 

 

함수

 

const a = 1;

if (a + 1 === 2) {
  const a = 2;
  console.log(a);
}
console.log(a);

var b = 1;

if (a + 1 === 2) {
  var b = 2;
  console.log(b);
}
console.log(b);

 

const a = 1;

if (a + 1 === 2) {
  const a = 2;
  console.log(a);
}
console.log(a);

var b = 1;

if (a + 1 === 2) {
  var b = 2;
  console.log(b);
}
console.log(b);

---

const dog = {
  name: "멍멍이",
  age: 2,
  cute: true,
  //키 : value
  //키에는 공백이 있으면 안된다.단 ''으로 
  'key with space' :'asd'
};
console.log(dog);
console.log(dog.name);
console.log(dog.age);
console.log(dog["key with space"]);

function print(dog){
  const text = `${dog.name}의 나이는 ${dog.age} 살입니다.`;
  console.log(text);
}

print(dog);

객체에 대한 이야기

 

> 키와 값을 잘 보기 바랍니다.!

 

---

비구조 할당 구조 

객체 구조 분해

// 비구조할당
// == 객체 구조 분해 라고 말도 한다.

const dog = {
  name: "멍멍이",
  age: 2,
  cute: true,
  //키 : value
  //키에는 공백이 있으면 안된다.단 ''으로
  "key with space": "asd"
};

function print(dog) {
  const { name, age } = dog;
  const text = `${name}의 나이는 ${age} 살입니다.`;
  console.log(text);
}

function print2({ name, age }) {
  const text = `${name}의 나이는 ${age} 살입니다.`;
  console.log(text);
}

print(dog);
print2(dog);

const {name} = dog;
> '멍멍이'

const {  name } = dog;

이렇게도 많이 사용한다.!!!

---

객체안에 함수

const dog = {
  name: "멍멍이",
  sound: "멍멍",
  say: function() {
    console.log(this.sound);
  }
};

dog.say();

const cat = {
  name: "양옹이",
  sound: "야옹"
};

//cat.say() = dog.say();
cat.say = dog.say;
cat.say();

//주의 사항 화살표 함수

// const dog = {
//   name: "멍멍이",
//   sound: "멍멍",
//   say: ()=> {
//     console.log(this.sound);
//   }
// };
// 화살표 함수는 상위 객체의 this 를 가르키기 때문에
// 여기서 this 는 무엇을 뜻하는지 모른다.

---

setter, getter 

//getter,setter

const numbers = {
  a: 1,
  b: 2,
  _name: "멍멍이",
  get sum() {
    console.log("sum");
    return this.a + this.b;
  },
  set name(value) {
    this._name = value;
  }
};

console.log(numbers.sum);
//()을 안적어도 된다.
console.log(numbers._name);
numbers.name = "몽몽이";
console.log(numbers._name);
//조회 하려고 할때 사용한다.

주의!!

getter 을 호출할때는 그냥 sum 만 적어도 된다. 

setter 함수를 만들때는  value 를 꼭 적어 줘야 한다. 

---

const number ={
  a :1,
  b: 2,
  get sum(){
    return this.a;
  },
  cal : function(){
    console.log(this.a+this.b);
  },
  set insert(value){
    const a =2;
    this.a = value;
    this.cal();
  }
  // this 를 계속 써줘야 한다.
  // 객체라고 생각해야 하기 때문에
}

console.log(number.sum);
number.insert = 10;
// 설정할수도 있고 함수를 실행 할수 도
// 있다.

 

getter , setter 을 잘 사용하면 비효율성을 줄일수 있다.

---

//반복문
// for, while 은 기존하고 동일

const numbers = [10, 20, 30, 40, 50];

for (let each of numbers) {
  console.log(each);
}

//객체를 받아오는 방법

const doggy = {
  name: "멍멍이",
  sound: "멍멍",
  age: 2
};
console.log(Object.entries(doggy));
// 배열 형태로 반환
console.log(Object.keys(doggy));
//key 값만 나온다.
console.log(Object.values(doggy));
//value 값만 나온다.
console.log(doggy.age);
for (let key in doggy) {
  console.log(key);
  console.log(doggy[key]);
  console.log(`${key} : ${doggy[key]}`);
}