TIL No3. [패스트캠퍼스] JS 문법 요약

NULL : 없다.
Defined : 찾은게 없다?

연산자 종류

1. 산술 연산자

• 덧셈 / 뺄셈 / 나누기 / 곱하기

 let a= 1+1-1*1;
 console.log(a);
 -> 1

2. 대입 연산자

 let a=1;
 a += 1; //(or a-=1 등)
 console.log(a) -> 2

3. 논리 연산자
   NOT : !
   AND : &&
   OR : ||

   논리연산자 우선순위는 NOT->AND->OR

   ex)

 const a= true;
 console.log(a) -> true
 
 const a= !true;
 console.log(a) -> false

4. 비교연산자
   두 값을 비교 할 때, =를 3개사용
   but, ==도 가능은 하지만 그 차이는
   '==' : 문자, 숫자 등 타입을 구분하지 않기에 사용 시 조심할것

   고로, '==='를 사용하는게 필요함

   추가로, notEquals -> '!==' 임!

5. 그 외

 let a=1;
 console.log (a) -> 1
 
 let a=1;
 console.log (++a) -> 2
 
 let a=1;
 console.log (a++) -> 1
 
 *연속으로 작성 시 위의 console.log() 값에 따라 수가 달라짐*

조건문

1. if문

	const a=1;
	if (a+1 === 2) {
    	const a = 2;
		console.log('if문 안의 a 값은' + a);  //-> 2
	}
    console.log ('if문 밖의 a 값은' + a); //-> 1
    **블록이 나뉘면 const의 a값이 중복되도 다르게 표시 된다.**

2. if else if 문

	const a = 10;
    if (a === 5) {
    	console.log('5입니다.');
    } else if (a ===7) {
       	console.log('7입니다.');
    } else (a === 10) {
    	console.log('10입니다.');
    }
    -> 10입니다.

3. switch / case 문 (if/else문 반복하는것보다 좋은 함수)

	const device = 'iphone'
    switch (device) {
    	case 'iphone';
        	console.log('아이폰!)
            break; //-> break 안할 시, 아래의 함수도 다 출력됨
        case 'ipad';
        	console.log('아이패드!')
            break;
        default :   //-> case 외의 답변 시, 나오는 답
        	console.log('모르겠네요..')
    }
    
    -> 위의 답은 아이폰! 이 출력되며, const device 값을 바꾸면 달라짐

함수

ex) 특정 값의 합을 알고 싶다.

	const a=1;
    const b=2;
    const sum = a+b;

위 과정을 함수로 표현하면,

	function add(a,b){
		return (a+b);
    }
	const sum=add(1,2);
    console.log(sum);
    -> 3

*함수에서 return을 사용 시에는 해당 함수는 종료됨 (추가 작업 불가)

ES6 란!?

• ECMAScript 6라는 뜻으로 자바스크립트의 버전임
• ES2015라고 불리기도 함
  *현재는 ES10까지 나오고 있음 ES6의 문법 중 백틱 문법 있음 물결에 있는 버튼에 쉬프트 제외하고 누르면 됨
  ex)
  console.log(" aa " + " bb " + a(파라미터1) + b(파라미터2))
  쌍따옴표 플러스 등 지저분한 부분을 백틱으로 정리 가능함
  console.log(aa bb ${a} ${b})
  파라미터는 ${인자} 로 표기

  화살표 함수(ES6 문법)

  화살표 함수는 function 함수를 보다 간결하게 쓸 수 있다.
  ex

1. function을 쓸 경우,

	function add(a,b){
    	return(a+b);
    }
	const sum = add(1,2);
    console.log(sum);

-> 3
2. 화살표함수 '=>'를 쓸 경우,

const add = (a,b) => a+b;
const sum = add(1,2);
console.log(sum);

-> 3

*화살표값이 가르치는 this의 값과 function이 가르치는 this의 값이 다름 (차후 상세 설명 예정)

객체(object)

우리가 어떠한 값을 선언할 때, 하나의 값에 여러가지 이름을 선언하게 해줌
ex)
1. 기존 방식

const dogName = '멍멍이'
const dogAge = 2

console.log(dogName)
console.log(dogAge)

-> 멍멍이
-> 2

2. object를 활용한 방식

const dog = {
	name : '멍멍이',
    age : 2
    'key with space' : '{괄호}안의 값의 이름은 키 이며, 키의 값에 띄어쓰기 필요시 해당 문법처럼 ''를 해주면 됨' 
	}

console.log(dog.name);
console.log(dog.age);
console.log(dog.'key with space');

-> 멍멍이
-> 2
-> 출력 안됨 (이유는 나중에 확인해봐야지!)

객체에 함수를 더해서 사용하는 방법

ex)

const ironMan = {
	name : '토니 스타크',
    actor : '로버트 다우니 주니어',
    alias : '아이언맨'
};
    
const captainAmerica = {
	name : '스티븐 로저스',
    actor : '크리스 에반스',
    alias : '캡틴 아메리카'
};
    
function print(hero){
	const text = `${hero.alias}(${hero.name}) 역할 : ${	hero.actor}`
    console.log(text);
};

print(ironMan);

-> 아이언맨(토니 스타크) 역할 : 로버트 다우니 주니어
1. const로 객체를 설정(a, b) 후, function c(d){}으로 호출 선언.
2. 함수의 파라미터(매개변수) d= 아규멘트(전달인자) a || b 중 선택되는 것에 따라서 호출 값이 달라짐

비구조화 할당 (객체 구조 분해)

위의 함수에서 중복되는 값들을 묶음으로써, 코드를 깔끔하게 정리 할 수 있다.

ex)
1. 위에서 작성된 함수

function print(hero){
	const text = `${hero.alias}(${hero.name}) 역할 : ${	hero.actor}`
    console.log(text);
};

-> 히어로별명(히어로이름) 역할 : 히어로배우 로 출력

2. 중복되는 hero를 const로 묶었을 때,

function print(hero){
	const { alias, name, actor } = hero;
	const text = `${alias}(${name}) 역할 : ${actor}`
    console.log(text);
};

-> 동일한 결과 호출

3. hero를 없이 함수 파라미터에 키 값을 넣을 경우,

function print({ alias, name, actor }){
	const text = `${alias}(${name}) 역할 : ${actor}`
    console.log(text);
};

-> 동일한 결과 호출

#. 그 외 객체 구조 분해 예시

const ironMan = {
	name : '토니 스타크',
    actor : '로버트 다우니 주니어',
    alias : '아이언맨'
};

const { name } = ironMan;
console.log(name);

-> 토니스타크
해석
1. ironMan의 객체를 구성하는 name은 토니스타크이고, actor는 로버트 다우니 주니어이고, alias은 아이언맨인다.
2. ironMan이라는 객체에서 {name} 부분이 뭔지 궁금하다!
3. console.log(name)은 결국, ironMan의 {name}을 송출