모각코 1회차 활동 내용 정리

 

2023.7.10 모각코 1회차

 

목표 : javaScript 기초 강의를 듣고 정리하기.

 

https://ethereal-coder.tistory.com/28

[JavaScript] 연산자

기본연산자

더하기	+
빼기	-
곱하기	*
나누기	/
나머지	%

 

*더하기를 하는 두 수 중 하나라도 String형이면 string을 합친 모양이 된다( ex) 1+ "2" = 12)

 

 

복합연산자

let a = 4;
a = a + 5;
a += 5;

변수 a에다가 5를 더하고 싶을 때 위와 같이 두가지 방법을 사용할 수 있습니다. 

두 번째 줄의 방법은 비효율적인 방법이므로 세번째 줄과 같이 복합연산자를 사용합니다.

 

더하기	+=
빼기	-=
곱하기	*=
나누기	/=
나머지	%=

 

증감연산자

1을 더한다	++
1을 뺀다	--

let a = 4;
console.log(a++); //1
console.log(a--); //2
console.log(--a); //3
console.log(++a); //4

1과 2는 후위연산자, 3과 4는 전위연산자라고 한다.

후위연산자를 사용하면 현재 실행되고 있는 줄 다음부터 변수에 1이 더해지거나 빠지고

전위연산자를 사용하면 현재 실행되고 있는 줄부터 변수에 1이 더해지거나 빠진다.

 

논리연산자

NOT	!
AND	&&
OR	||(shift 누르고 원화 기호 누르기)

 

비교연산자

a == b	a와 b가 같다.
a===b	a와 b가 자료형까지 같다.
a != b	a와 b가 같지 않다.
a <= b	a가 b보다 작거나 같다.
a >= b	a가 b보다 크거나 같다.
a < b	a가 b보다 작다.
a > b	a가 b보다 크다.

 

typeof 연산자

let a = 4;
a = "4" //가능 에러 안남
console.log(typeof a) // string 출력

변수의 자료형이 무엇인지 알 수 있게 해준다.

 

null변환 연산자

 

let a;
a = a?? 4; //a는 undefine이니까 4가 대입된다.
console.log(a)  //4출력

a자리에 들어가는 변수가 null이거나 undefine이면, ??뒤에 있는 요소를 대입힌다

 

 

 

https://ethereal-coder.tistory.com/29

[JavaScript] 조건문

 

if문

 

if문은 java, c언어와 동일하다.

 

let a = 5;

if(a == 5){
    console.log("five");
    }
else if(a == 4){
    console.log("four");
    }
else{
    console.log("not");
    }

a가 5이면 five를, a가 4이면 four을, 둘 다 아니면 not을 출력한다.

 

switch문

 

else if가 너무 많으면 지저분함 -> switch문 사용

 

let a = "l"

switch(a){
   case "l":
     console.log("엘");
     break;
   case "m":
     console.log("엠");
     break;
   case "n":
     console.log("엔");
     break;
   default:
     console.log("기타");
     break;
     }

 

switch 옆에 넣은 변수가 l이면 엘을, m이면 엠을, n이면 엔을 출력하고, 셋 다 아니면 기타를 출력하는 코드이다. 

break를 사용하지 않으면 해당 case다음의 case들이 전부 실행되므로 break를 꼭 해줘야한다.

 

https://ethereal-coder.tistory.com/30

[JavaScript] 함수

기본형

 

function 함수명(매개변수){
   //함수내용
   
   return 변수;
   }
   
   
   let k = 함수명(매개변수);  // 함수 호출하기
   //k에 함수 리턴값 저장

 

리턴 자료형을 따로 해주지 않아도 된다.

function안에서 선언된 변수는 외부에서 접근 불가능하다.

하지만 반대로 function에서는 funtion밖에서 선언된 변수에 접근 가능하다.

 

https://ethereal-coder.tistory.com/31

[JavaScript] 호이스팅과 화살표함수

함수도 값이라 변수나 상수에 담아서 사용이 가능하다.

 

let a = function(){
   return "안녕하세요";
   };
   
 console.log(a); // hello()함수 형식으로 출력된다.
 
 const aText = a();
 console.log(aText);// 안녕하세요가 출력된다.

 

호이스팅

 

호이스팅은 함수가 선언된 위치보다 위에서 함수를 호출하는게 가능하게 해주는 기능이다.

console.log(a());
console.log(b());

let a = function(){
   return "hi";
   }; // 함수 표현식
   
function b(){
   return "hello";
   }//함수 선언식

 

함수 선언식은 호이스팅이 가능하지만, 함수 표현식은 호이스팅이 불가능하다.

 

 

화살표 함수

 

let k = function(){
  return "hi";
  };
  
  console.log(k);
  
  
  
let sum = function(a,b){
    return a+b;
    };

let k = () => "hi";
console.log(k());


let sum = (a, b) => a + b;

두 함수는 같은 기능을 하지만 화살표함수는 호이스팅이 불가능하다는 단점이 있다.

 

https://ethereal-coder.tistory.com/32

[JavaScript] 콜백함수

콜백함수는 함수를 매개변수로 받는 함수이다.

 

예시 코드

 

function day(time, morning, night){
    if(time === "morning"){
       morning(); //wakeUp이 출력
       }
    else{
       night();  //goToSchool이 출력
       }
  }
  
  
  function wakeUp(){
    console.log("wakeUp");
    }
  
  function goToSchool(){
    console.log("goToSchool");
    }
    
  day("morning", wakeUp, goToSchool);

 

위와 같이 함수명을 매개변수로 넘겨주면 호출되는 함수에서 해당 변수를 함수로 쓴다.

 

 

소감

 

자바스크립트는 처음 배워보는데 기존에 배웠던 언어들과 비슷하지만 꼭 알아야 할 차이점도 있어 이 점에 주의하면서 공부해야겠고, 프로젝트를 하기 위해 부지런하게 강의를 다 듣고 더 심화적인 기능들까지 알아보는 시간을 가져야겠다고 다짐하게 되었습니다.