모던자바스크립트01-1

1 2	내마음대로 정리 자바스크립트를 기억해보자!!!

JS 뭔가요?

자바스크립트는 웹브라우저에만 국한되어 있지 않고 다양한곳에서 사용이 되고 있어요
node js(런타임)로 통해서 서버를 실행할수 있어요
테스크탑 앱, 모바일 앱도 만들어요

변수

바뀔수있는 값 - 변수

let - 블록스코프, 재대입 가능, 재선언, 호이스팅안됨
const - 블록스코프, 재대입, 재선언, 호이스팅안됨

null undefined

둘다 없다 이지만 차이가 있다.
null - 진짜 없다
undefined - 아직 정해지지 않았다.

산술연산자, 대입연산자

let a = 1;
console.log(a++); // 보여준 다음에 계산을 하느냐
console.log(a);
console.log(++a); // 미리계산을하고 보여주느냐

// 1
// 2
// 3

연산자 - 논리연산자

NOT !
특정 블리언을 변경헤준다

1 2	const a = !fasle; // true;

AND &&
양옆이 true일떄 true이다

1 2	const a = fasle && true; // fasle;

OR ||

1 2	const a = fasle \|\| true; // true;

연산순서는 NOT > AND > OR 입니다.

연산자 - 비교연산자, 문자열 붙이기

=== 두값을 비교할때는 사용

===, == 차이는 타입을 비교하지 않는다.

왠만하면 ===, !== 사용해야된다.

조건문

if

if문을 사용하면 특정조건에 만족할때 작업을 할수 있다.

const let는 블록스코프이기 때문에 a의 값은 다른것

const a = 1;
if (a + 1 === 2) {
  const a = 2;
  console.log("if문 안의 a 값은" + a);
  //  if문 안의 a 값은 2
}
console.log("if문 밖의 a 값은" + a);
//  if문 밖의 a 값은 1

if else

만족할때와 만족하지 않을때를 작업 할 수있습니다.

if else if

여러가지 조건을 만들어서 작업합니다.

switch

break;를 꼭 입력해야됩니다. 다음코드까지 읽을수도 있어요
default는 이것도 저것도 아닐 경우

함수

특정 코드를 하나의 명령어로 실행해주는 것
이외에도 파라미터가 주어졌을떄 파라미터를 처리해서 결과를 만들어줍니다.

function hello(name) {
  console.log(`hello${name}!`);
}
hello("ria");

화살표함수

const add = (a, b) => {
  return a + b;
};
const add = (a, b) => a + b;

const hello = (name) => {
  console.log(`hello${name}!`);
};

객체

객체는 우리가 어떤한 값을 선언할때 하나의 이름에 여러종류의 값을 넣을 수 있게 해줍니다.

키 값에는 보통 문자열로 작성하며 공백이 있으면 안되지만 ''로 감싸주면 가능합니다.

객체 = 비구조화 할당

객체 구조 분해하고도 합니다.

1
2
3

function print({ alias, name, actor }) {
  const text = `${alias}(${name}) 역활을 맡은 배우는 ${actor} 입니다.`;
}

파라미터에도 적용 가능합니다.

1	const { alias, name, actor } = hero;

구지 함수내부에서 사용할 필요가 없기 때문에

1
2
3

// 비구조할당 가능
const { name } = ironMan;
console.log(name);

객체 - 객체 안에 함수 넣기

const dog = {
  name: "멍멍이",
  sound: "멍멍!",
  say: function say() {
    console.log(this.sound);
    // this는 이함수가 위치한 객체(자기자신)의미 => dog
  },
  say: function () {
    console.log(this.sound);
  },
  say() {
    console.log(this.sound);
  },
  // 3가지 모두 작동을 합니다.
};
dog.say(); // 멍멍!

만약 화살표함수로 만들게 되면 this가 무엇인지 모릅니다. 왜일까요??

화살표 함수는 this를 자기가 속해있는 객체로 연결 시키지 못합니다. 화살표함수 내부에는 this가 자기가 먼지 모릅니다.

const dog = {
  name: "멍멍이",
  sound: "멍멍!",
  say: function () {
    console.log(this.sound);
  },
};
dog.say(); // 멍멍!
const cat = {
  name: "야옹이",
  sound: "야옹~",
};
cat.say = dog.say;
cat.say(); //야옹~
const catSay = cat.say; // typeError

객체 안에 있는 함수를 바깥으로 꺼내버리면 this 관계가 사라집니다.

객체 - Getter 와 Setter 함수

객체안에 getter, setter 함수를 셋팅할수 있습니다.

getter함수는 특정값을 호출하는것이 아니라 조회하려고 할때 특정코드를 실행 시키고 연산된 값을 받아서 사용하는것

setter함수는 특정값을 설정할때마다 벨류를 파라미터로 받아와서 어떤값을 설정할수도 있고 코드를 실핼 할수도 있습니다.

const numbers = {
  _a: 1,
  _b: 2,
  sum: 3,
  calculate() {
    console.log("calculate");
    this.sum = this._a + this._b;
  },
  get a() {
    return this._a;
  },
  get b() {
    return this._b;
  },
  // set함수에는 파라미터를 넣어야합니다.
  set a(value) {
    this._a = value;
    this.calculate();
  },
  set b(value) {
    this._b = value;
    this.calculate();
  },
};

console.log(numbers.sum);
numbers.a = 5;
numbers.b = 7;
numbers.a = 9;

console.log(numbers.sum); // 16
console.log(numbers.sum); // 16
console.log(numbers.sum); // 16

값이 바뀔떄마다 계산하기 때문에 아까 계산했던 값을 재사용 하는것
그래서 get와 set을 같이 활용하는게 좋을듯

RAI TIL