[패스트캠퍼스 FE MGS] Day9~10(7월 7일~7월 8일/목 ,금- Javascript 기초-2)

Learn!!

• 데이터 타입 확인(typeof)
• 연산자
• 조건문
• 반복문
• 형변환
• 함수(화살표, 즉시실행)
• 호이스팅

1. 데이터 타입 확인

• typeof : 자바스크립트의 데이터의 타입을 확인하는 키워드

console.log(typeof 'Hello world!'); // string
console.log(typeof 123); // number
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof null); // object
console.log(typeof {}); // object
console.log(typeof []); // object

• typeof 를 통해 데이터 타입을 확인할수도 있지만 위와 같이 null, {}, [] 가 모두 object로 결과값이 나오는것을 확인 할 수 있다.
• 따라서 좀 더 명확하게 원하는 결과값을 얻기 위해 아래와 같이 별개의 함수를 만들어 사용할수도 있다.

function getType(data){
  return Object.prototype.toString.call(data).slice(8, -1)
}

console.log(getType(123)) // Number
console.log(getType(false)) // Boolean
console.log(getType(null)) // Null
console.log(getType({})) // Object
console.log(getType([])) // Array

---

2. 연산자

1) 산술 연산자(airthmetic operator)

• +, -, *, /, %(나머지값), **(제곱)

2) 할당 연산자(assignment operator)

• 산술 연산자의 연산자들을 할당 연산자에 사용 가능함
• +=, -=, *=, /=,%/
• 아래의 코드와 같이 연산시 축약 사용이 가능하다.

let a = 2;
// a = a + 1
a += 1 ;

console.log(a); // 3

3) 비교 연산자(comparison operator)

• 두개의 피연산자를 비교한 결과를 논리값(true/false)로 반환한다.

연산자	뜻	예제	결과
==	값이 같음	a == b	a와 b의 값이 같으면 true, 그외에는 false
! =	값이 다름	a ! = b	a와 b의 값이 다르면 true, 그외에는 false
===	값과 타입이 같음	a === b	a와 b의 값과 타입 모두 같으면 true, 아니면 false
! ==	값과 타입이 다름	a ! == b	a와 b의 값과 타입 모두 다르면 true, 아니면 false
<	작음	a < b	a가 b보다 작으면 true, 아니면 false
>	큼	a > b	a가 b보다 크면 true, 아니면 false
< =	작거나 같음	a < = b	a가 b보다 작거나 같으면 true, 아니면 false
> =	크거나 같음	a > = b	a가 b보다 크거나 같으면 true, 아니면 false

4) 논리 연산자(logical operator)

연산자	뜻	예제	결과
&&	논리곱	a && b	a와 b가 모두 true일때 true
ll	논리합	a ll b	a와 b중 하나라도 true면 true, 모두가 false면 false
!	부정	! a	a가 true면 false, false면 true

5) 삼항 연산자(ternary operator)

• 조건이 참이면 두번째 나오는 항, 조건이 거짓이면 세번째 나오는 항이 출력

let num = 100;
num%2===0 ? console.log('짝수') : console.log('홀수');

---

3. 조건문

1) If, If Else

• if의 조건을 만족하면 그 구문을 실행하고 종료
• if 조건 만족하지 못하면 else 구문으로 넘어감
• if 조건 만족하지 못하면 else if의 두번째 조건을 찾음

if(조건) { }
if(조건) { } else { }
if(조건1) { } else if (조건 2) { } else { }

2) Switch

• 매칭할 조건이 한정적일 경우 사용하면 좋음

let luckyNum=20;

switch (luckyNum) { 
// 10과 20에 같은 조건을 걸고 싶을때 case10의 조건과 break 생략 가능하다
    case 10: 
    case 20: console.log('당첨!TV');
        break; // 조건을 만족했을때 구문을 탈출하기 위해서
    case 30: console.log('당첨!에어프라이어');
        break;
    default: console.log('꽝 다음기회에');
}

---

4. 반복문

1) for

• for(시작조건; 종료조건; 변화조건){}

for(let i =1; i<5; i++){
    console.log(i);
}
// 결과값: 1~4까지 출력됨 

2) while

• 조건을 충족하지 않을때까지 계속 반복
• while(조건){ }
• 1부터 50사이에서 2의 배수인 동시에 7의 배수인 아이를 출력하시오

let i = 1;

while(i<=50){
    if(i%2===0 && i%7==0) console.log(i);
    i++;
}
// 결과값 : 14, 28, 42

3) do/while

• do부터 시작을 하기 때문에 조건을 만족하지 않더라도 초기값을 주고 싶을때 실행하기 좋다.
• do/while 문을 사용하게 될 경우 무조건 한번은 출력을 하게 됨
  아래의 코드에서 i값이 50이라도 do를 먼저 출력하기 때문에 문장 반복 출력이 로그에 찍히고 그 이후 i++ 를 해서 51이 되기 때문에 while문으로 넘어갔을때 더 이상 실행이 되지 않고 멈추게 된다.

let i = 50;

do{
    console.log('문장반복출력');
    i++;
}while(i<=10)

---

5. 형 변환(Type conversion)

const a = 1;
const b = '1';

console.log(a == b); // true

• == 는 동등 비교 연산자로 type은 달라도 값만 같다면 true를 반환하게 된다. 이 과정에서 형 변환이 일어나게 되며 따라서 의도치않게 서로 다른 값이 같은 값을 반환할 수 있으므로 === 연산자를 사용하는것을 권장한다.

Truthy(참 값은 값)

• true, {}, [], 1, 2, 'false', -12, '3.13' ...

Falsy(거짓 같은 값)

• false, '', null, undefined, 0, -0, NaN
  
  
• 원래 if문 안의 값이 false라면 무시되어야하지만 조건이 'false' 라면 false 문자열은 참의 값을 가지기 때문에 if 조건문이 실행되게 되며 이것은 형변환이라 한다.

if('false') {
  console.log(123);
}

---

6. 함수(Function)

• parameter(매개변수): 함수안에서만 사용이 가능함
• 인수: 매개변수에 들어가는 값 (전달하는 값)
• 인자: 전달받는 값
• return: 함수가 종료되면서 결과값을 반환, 반환할 값이 없다면 써주지 않아도 상관없음

화살표 함수

• () => {} vs function () {})
• 중괄호와 return 키워드를 생략 가능
  • const doubleArrow = (x) => x*2;
  • 단 , 실행문 부분을 return을 생략한채로 중괄호로 감싹게 되면 실행이 불가하다. 따라서 중괄호 안에서 특정 값을 반환하려면 return을 사용해야함.

const double = function(x){
  return x * 2;
}
console.log('double: ', double(7));

const doubleArrow = (x) => {
 return x * 2;
}
console.log('doubleArrow: ', doubleArrow(7));

즉시실행함수(IIFE)

• 즉시실행함수 사용시에는 함수가 끝난 후 ;명시해줄것
• 아래와 같이 두가지 방법으로 작성 가능하다.
  • (x)()
  • (x())

const a = 7
(function(){
	console.log(a*2)
})();

(function(){
  console.log(a*2)
}());

콜백함수(Callback)

• 함수의 인수로 사용되는 함수
• 아래의 코드와 같이 timeout() 함수를 호출할때 하나의 익명함수를 인수로 사용했다.
• 그 인수는 cb라는 매개변수로 들어가게 되고 내가 실행을 원하는곳에서 호출하여 함수를 실행한다.
• 따라서 아래의 코드는 3초가 지난뒤 honeybadger! 가 먼저 출력되고 바로 그 뒤에 Done! 이 출력되게 된다.

// setTimeout(함수, 시간)
function timeout(cb){
 setTimeout(() => {
   console.log('honeybadger!')
   cb()
 }, 3000)
}
timeout(() => {
  console.log('Done!')
})

---

7. 호이스팅(Hoisting)

• 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상을 말함.
• 함수선언이 함수의 호출보다 뒤에 있지만 호이스팅으로 인해 호출이 가능해진다.(함수표현을 사용할 경우 불가능)
• 함수의 이름만 보고도 함수의 로직을 추축하는것이 가능해진다.

const a = 7;

double();

function double(){
  console.log(a * 2);
}