Javascript Recap - 1

js의 특징

 > js는 코드의 순서대로 동작한다!

 

데이터 타입 : js에서 이해할수 있는 데이터의 종류들

 

- string = "Text"

- number = 4 

- boolean : true / false

- null : 비어있음을 의미 > 변수 안에 아무것도 없다는것이 아니라 비어있다는 것이 있는것이다.

- undefinded : 변수의 값을 부여하지 않은 상태

> null과 undefined는 다른것이다



무엇인가를 선언하기 위해서는 아래의 것을 작성한뒤에 선언해야 한다.

 

- const : 선언 뒤 값 변경(업데이트) 불가

- let : 값 변경(업데이트) 가능

> 주로 const사용 업데이트가 필요한경우 let사용 var은 절대 사용하지 마!!

 

- 변수 : 데이터를 저장하는것

const a = 10;

 > 변수 a에 10이라는 number를 할당한다!

 

- 배열 : 한 변수안에 여러값을 정해주기위해 하는것 [] 를 사용해서 표현한다.

 

const a =[1,true,null,undefined,"text",me]

 > 배열 a에 []안에 있는 데이터 값이 있는 상태

 

배열 안에는 숫자/boolean/null/undefined/string/변수 등과 같은 모든것이 들어가도 된다.

 

> 배열의 시작 요소는 0번째부터 시작이다  a 배열에서 첫번재인 1은  a[0]이다.

 

- 배열의 값 변경하는 법

  >a[0] = 2; 로 한다면 가능하다.

그러면 배열 a는 아래처럼 변화 한다.

const a = [2,true,null,undefined,"text",me]

> 여기서 배열의 순서는 index 라고 하고 배열의 값은 element라고 한다.

 

- object(객체)

> 우리는 배열을 통해 데이터를 저장할 수 있지만, 배열의 index처럼 key값이 숫자가 아니라 텍스트로 사용해야 하는 경우가 있다.

객체에서는 property가 이때 사용하는게 객체이다

const obj = {
 name : "현태",
  age : 20
}

이런 식이다.

 

- 객체안에 접근법

obj.name = "이현태"

위처럼 진행하면 객체 obj는

const obj = {
 name : "이현태",
  age : 20
}

 

- 객체 요소 생성법

obj.sexy = true;

이런식으로 객체 안에 없는 key값을 가진 것을 코딩한다면 새로 생성된다. 그럼 obj 객체는

const obj = {
 name : "이현태",
  age : 20,
 sexy : true
}

이렇게 변화한다.

 

- 함수(function) 

 

> 함수는 어떤 코드를 캡슐화 해서 그걸 계속반복 사용하기 위해 사용하는것

function plus(){
	console.log(2+2);
}

 

이런식으로 선언한다 이때 함수를 호출하기 위해서는

 

plus();

>이런식으로 함수명()을 작성하면 해당 이름의 함수가 실행된다. ()는 실행한다를 의미한다.

 

이때 함수안에 데이터를 집어넣는것 보다 외부에서 데이터를 받는게 더 좋다

 

> 왜냐? 여러가지 일을 같은 코드로 하기위해서

 

함수 plus는 2개의 값을 더하는 함수라고 생각해본다면

 

function plus(a,b){
      console.log(a+b)
}

 

()안에 숫자는 매개변수 parameter 라고 하고 a b 는 예시를 적어놓는느낌이다.

> 데이터를 받으면 대체되는 placeholder (자리표시자) 느낌이다

 

plus(5,10);

 

하면 어떻게 될까 그럼 콘솔에 15가 노출된다.

 

> 중요한것은 함수의 변수는 함수 내부에서만 사용 가능하다는 점이다.

> 위의 개념을 scope라고 한다 scope란 해당 변수가 어디까지 사용 가능한 범위를 말한다.

함수 {} 안에 있는 변수는 {}내에서만 유효하다

 

객체안에 함수를 넣으면 어떻게 될까?

 

const a = {
     function b(x,y){
     	console.log(x+y)
  	}
}

 

이런 낌이 된다 객체 a안에 함수 b가 있는것이다. 객체안에 있는 함수를 호출하려면

 

a.b(1,2);

 

이런식으로 호출하면 된다 그러면 콘솔에는 

 

3 이 나온다.

 

- 함수의 리턴(return)

 

여기서 함수안에 console.log()는 괄호안에 것의 값을 콘솔을 찍어주는 것이다.

 

우리는 콘솔에 찍는것보다 해당 함수의 값을 노출시키고 싶을때가 있다. 이때 사용하는 것이

 

return 이다.

전처럼 두개의 매개변수의 합을 구하는 함수를 작성해보자

function add(a,b){

	return a+b;

}

이런식으로 작성할수 있다. 여기서 수학의 함수로 생각해보면

 

y = f(x)인데, 여기서 x가 매개변수 이고, y가 리턴값이다.

 

const result = add(2,3)

이런식으로 함수의 return값이 있어야 함수의 해당 값을 대입할 수 있다.

 

console.log()는 그냥 콘솔에 노출만 시켜주는 것이다. Return을 사용해야 해당 값을 인식할 수 있고, 해당 값을 함수 밖으로 꺼낼수있다.

 

여기서 return이 발생하게 되면 해당 중괄호 안에 있는 함수는 실행을 종료한다 이 말은 return 실행 이후에 코드는 동작되지 않는다

 

> 변수 result의 데이터 타입은 return값의 데이터 타입을 가진다.

 

- 연산자

 

= : 대입한다

== : 같다

===: 같다

! : not(아니다)

> : 좌항이 크다(미만)

< : 우항이 크다(초과)

>= :좌항이 크거나 같아(이하)

<= : 우항이 크거나 같아(이상)

&& : and -> 좌항과 우항의 값이 둘다 참이라면

|| : or -> 좌항 또는 우항 값중 둘중 하나만 참이라면

++ : 증가 연산자 -> 1을 더한다 

-- : 감소 연산자 -> 1을 뺀다.

 > 해당 증가 연산자와 감소 연산자는 이전 게시물에 자세한 설명이 나와있다.

 

- == 와 ===의 차이

==는 Equal Operator이고,  ===는 Strict Equal Operator이다. 

==는 a == b 라고 할때, a와 b의 값이 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.(값만 같으면 true이다.)

 

===는 Strict, 즉 엄격한 Equal Operator로써, "엄격하게" 같음을 비교할 때 사용하는 연산자이다. 

===는 a === b 라고 할때, 값과 값의 종류(Data Type)가 모두 같은지를 비교해서, 같으면 true, 다르면 false라고 한다. 

 

- 조건문

 

const a = 2

if(a>0){
	console.log("와우");
}

 

위 처럼 괄호 안에 조건이 참일때 중괄호 안에 있는 것을 실행한다 이를 조건문(if문) 이라고 한다.

 

- else if / else

if(a === 1){
	console.log("1이군요")
} else if(a === 2){
	console.log("2이군요")
}else{
	console.log("1도 2도 아니군요")
}

위 코드는 첫번째 if문의 조건이 a === 1을 확인후 a가 해당 값이 아니라면 다음 else문으로 넘어가게 된다.

 

이때 a === 2도 아니라면 다음 else로 또 넘어가는 이런 구조를 가진다.

 

> else는 정말 필요 한거 아니면 사용하지 않는것이 좋다. 왜냐하면 해당식을 for문안에 넣는다고 가정한다면

for(i=0;i<10);i++){
    if(a === 1){
        console.log("1이군요")
    } else if(a === 2){
        console.log("2이군요")
    }else{
        console.log("1도 2도 아니군요")
    }
}

for문이 실행될때 마다 조건 a===1 a ===2 을 반복할때마다 체크 하는 느낌으로 메모리를 많이 차지 하기 때문이다.

어떤식으로 하면되냐?

for(i=0;i<10);i++){
    if(a === 1){
        console.log("1이군요")
    }
    if(a === 2){
        console.log("2이군요")
    }
    console.log("1도 2도 아니군요")
    
}

이런식으로 작성하는게 좋다.

굳이 else를 사용하는것 보단 그냥 조건 a===1 a===2 아니면 if문은 실행하지 않을것 이므로 

 

굳이 else를 사용할 필요가 없다는 느낌이다.

 

 

- 반복문

 

for(i=0;i<10;i++){

	console.log(i);

}

 

위에 대한 코드를 설명하자면 값이 0인 i값이 있을때, i가 10미만이 될때까지 i값을 ++하고 중괄호 안에 것을 실행한다는 의미이다.

 

여기서는 i=0 > i=1 > i=2

 

이렇게 i의 값이 변화할때 마다 중괄호에 있는것을 실행한다는 의미이다.

 

 

-클래스(class)

> 객체의 설계도 라고 생각하면 된다.

 

보통 대장간의 거푸집으로 예시를 든다. 

 

class 거푸집 설명 이미지

칼의 모양의 틀을 클래스라고 하고 틀에서 나온것들은 인스턴스라고 한다

 

공식화 한다는 느낌으로 나는 이해한다.

 

1 + 2 라는 계산을 할때 우리는 중학교 때 이를

 

x + y라고 수학에서의 변수를 사용해서 정의 하였다.

 

아 x + y는 변수 x 와 y의 값을 합치는 거구나 이와 같은 것을 class라고 한다.

 

class MyMath {

  constructor(a, b) {
    this.a = a;
    this.b = b;
  }

  getNumber() {
    let arr = [];
    arr.push(this.a);
    arr.push(this.b);
    return arr;
  }
  add() {
    return this.a + this.b;
  }
  substract() {
    return this.a - this.b;
  }
  multiply() {
    return this.a * this.b;
  }
  //this.변수 는 이 클래스 내에서 생성자에 this.a = a; 일 경우 
  //this.a 는 클래스 내의 
}

클래스를 이용해 객체를 생성하는 과정을 인스턴스화 라고한다.

 

const result = new myMath(1,2);

result.add();

위 코드를 실행했을때, result란 myMath 객체를 생성하고,

class 내부에 있는 add()를 불러와서 해당 과정을 실행한다.

 

- this

this 는 함수 내에 해당 것을 지칭하는 느낌이다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

this - JavaScript | MDN

MDN에서 해당 설명을 보는데 무슨 소리인지 솔직히 모르겠다. 그냥 지칭한다는 느낌이다.

 

class MyMath {

  constructor(a, b) {
    this.a = a;
    this.b = b;
  }

  getNumber() {
    let arr = [];
    arr.push(this.a);
    arr.push(this.b);
    return arr;
  }
}

여기선 생성자를 통해 매개변수 a b 가 this.a this.b 에 할당되어있다. 이제 myMath 클래스 내에서는 매개변수 a b 값은 this.a this.b로 지칭된 느낌이다.

 

- 생성자(constructor) 

> 생성자는 해당 클래스를 인스턴스화 할때 나오는 인스턴스가 생성 될때 마다 호출되는 것이다.

 

const result = new myMath(1,2);

result.add();

여기선 첫째줄(myMath 객체를 생성했을때) 생성자가 실행된다.

 

- 메서드(methods)

메서드는 함수입니다. 그런데 객체가 프로퍼티 값으로 갖고 있는 것을 메서드라고 부릅니다.

Class의 method는 Object(객체)의 문법과 똑같습니다.

다만 객체는 프로퍼티마다 comma(,)로 구분해줘야 했지만, 클래스는 그렇지 않습니다.