Java Script STUDY2

💡 Conditional Statements- 조건문

if

-if: 표현식이 참으로 평가될 때, 실행되는 블럭
if(표현식){
표현식이 참으로 평가될 때, 실행되는 문장들의 모음
}

if(true){
	console.log('항상 실행');
}
if(false){
	console.log('항상 실행되지 않음');
}

💡블록에 코드가 한줄이면, 중괄호 {} 생략가능
if(true) console.log('항상 실행');

표현식이 거짓으로 평가될 때-Falsy

-false, 0, ", null, undefined, NaN

표현식이 참으로 평가될 때-Truethy

-true, 37, 'Mark', {}, []

else

-else: 표현식이 if에 해당하지 않을때
else{
if에 해당하지 않을때
}

const n = 37;

if( n > 0){
	console.log('n이 0보다 큰 경우');
}else{
	console.log('n이 0보다 크지 않은 경우');
}

if( n > 0) console.log('n이 0보다 큰 경우');
else console.log('n이 0보다 크지 않은 경우');

else if

-표현식이 if에 해당하지 않을때
else if(){
if에 해당하지 않을때
}

const n = 15;
if(n % 3 === 0 ){
	console.log('n 은 3의 배수 입니다.');
}else if(n % 5 ===0){
  console.log('n 은 5 배수 입니다.');
}else{
   console.log('n 은 3의 배수도 아니고, 5의 배수도 아닙니다.');
}


if(n % 3 === 0 && n % 5 === 0){
   console.log('n 은 15 배수 입니다.');
}else if(n % 3 === 0){
  console.log('n 은 3 배수 입니다.');
}else if(n % 5 === 0){
  console.log('n 은 5 배수 입니다.');
}else{
   console.log('n 은 3의 배수도 아니고, 5의 배수도 아닙니다.');
}

//값이 여러번 반복되므로, 변수나 상수로 넣는다.
const multipleofThree = (n % 3 === 0);
const multipleofFive = (n % 5 === 0);
if(multipleofThree && multipleofFive){
   console.log('n 은 15 배수 입니다.');
}else if(multipleofThree){
  console.log('n 은 3 배수 입니다.');
}else if(multipleofFive){
  console.log('n 은 5 배수 입니다.');
}else{
   console.log('n 은 3의 배수도 아니고, 5의 배수도 아닙니다.');
}

//중첩으로 표현 가능. else안에 if
if(multipleofThree && multipleofFive){
   console.log('n 은 15 배수 입니다.');
}else{
  if(multipleofThree){
    console.log('n 은 3 배수 입니다.');
  }else if(multipleofFive){
    console.log('n 은 5 배수 입니다.');
  }else{
    console.log('n 은 3의 배수도 아니고, 5의 배수도 아닙니다.');
  }
}

&& || !

논리 연사자를 이용한 조건문 평가

//&&
if(true && true){
	console.log('두개 모두 참이면 참');
}
if(true && false){
	console.log('한개만 참이면 거짓');
}
if(false && true){
	console.log('한개만 참이면 거짓');
}
if(false && false){
	console.log('두개 모두 거짓이면 거짓');
}

//||
if(true || true){
	console.log('두개 모두 참이면 참');
}
if(true || false){
	console.log('한개만 참이면 참');
}
if(false || true){
	console.log('한개만 참이면 참');
}
if(false || false){
	console.log('두개 모두 거짓이면 거짓');
}

//!
if(!true){
	console.log('참이면 거짓');
}
if(!false){
	console.log('거짓이면 참');
}

⭐논리 연사자를 이용한 조건부 실행

let n = 5;
n % 5 === 0 && console.log('5로 나누어 떨어질때만 실행');//true

let n = 6;
n % 5 === 0 && console.log('5로 나누어 떨어질때만 실행');//undefined

let n = 5;
n % 5 === 0 || console.log('5로 나누어 떨어지지 않을 때만 실행');//undefined

let n = 6;
n % 5 === 0 || console.log('5로 나누어 떨어지지 않을 때만 실행');//true

삼항 연사자를 이용한 조건부 실행

let n = 5;
console.log(n % 5 === 0 ? '5의 배수 입니다.' : '5의 배수가 아닙니다.');//5의 배수 입니다.

const message = n % 5 === 0 ? '5의 배수 입니다.' : '5의 배수가 아닙니다.';//5의 배수 입니다.
console.log(message);

switch

switch를 이용한 조건문(어떤 값인지에 따라 true.false 판단)

let n = 5;
switch(n){
  default:{
    console.log(n);//5
  }
}

let n = 5;
switch(n % 5){
  case 0 :{
    console.log(//'5의 배수입니다.');//'5의 배수입니다.'
  }
  default:
    console.log(n);//5
}

let n = 5;
switch(n % 5){
  case 0 :{
    console.log(//'5의 배수입니다.');//'5의 배수입니다.'
    break;//만약 해당 블럭 실행후, 다음 블럭 거치지않고 switch문을 나가고 싶다면, 혹은 해당 블럭이 맞기때문에 굳이 실행하고 싶지 않다면 break
  }
  default:
    console.log(n);
}
    
let n = 6;
switch(n % 5){
  case 0 :{
    console.log(//'5의 배수입니다.');
    break;
  }
  case 1 :
  case 2 :
  case 3 :
  case 4 :
    console.log('5의 배수가 아닙니다.');//'5의 배수가 아닙니다.'
  default:
    console.log(n);//6
}    

💡 Iteration Statements- 반복문

-보통 어떤 유한한 횟수만큼 반복할 때는 for문을 사용합니다.

for

for(초기화; 반복조건; 반복이 된 후 실행되는 코드){
반복이 되는 코드 블럭
}
.
for(a; b; c){
d
}
e
a > d > c > b > d > c > b > e
.
for(;;){
d
}
d의 무한루프

for (let i = 0; i < 5; i++){
	console.log('안녕하세요.');//해당 문구 5번 반복
}

for(;;){
  console.log('안녕하세요.');
  if(Math.random() * 100 > 90){
  break;//랜덤한 숫자로 해당 문구가 반복되어 나오다가 랜덤으로 멈춘다.
  }
}

while

while(조건){
조건이 거짓이 될 때까지 반복 실행
}

while(true){
  console.log('안녕하세요.');
  if(Math.random() * 100 > 90){
  break;//랜덤한 숫자로 해당 문구가 반복되어 나오다가 랜덤으로 멈춘다.
  }
}

do while

do{
  console.log('안녕하세요.');
}while(Math.random() * 100 <= 90);//랜덤한 숫자로 해당 문구가 반복되어나온다.

for of

-iterable

for(const i of[1, 2, 3]){
console.log(i);//1 2 3
}

for in

-모든 프로퍼티

object.prototype.test = function(){};
for(fonst i in {a: 1, b: 2, c: 3 }){
  console.log(i);// a b c test 
}

💡 function- 함수

-함수를 만들 때 사용하는 키워드

⭐ 매개변수

-해당 함수를 호출할 때 전달된 인수를 "매개"하는 역할이다.

function hello2(name) {
  // 2. 전달된 인수 'Jin'을 매개변수 name에 할당
  // 3. name 변수의 값을 출력
  console.log(name);
}

// 1. hello2 함수에 인수 'Jin'을 전달하여 호출
hello2('Jin');

function hello(){}

//hello1인이름으로 함수 선언
function hello1 (){
 	 console.log('hello');
}
 console.log(hello1, typeof hello1');//hello1, function
             
//함수의 매개변수
//함수를 호출할 때 값을 지정
function hello2 (name){
 	console.log('hello2', name);
 }

//함수의 리턴
//함수를 실행하면 얻어지는 값
function hello3 (name){
 	return 'hello3 ${name}';
 }

console.log(hello3('Mark'));//hello3 'Mark

const hello = function (){}

const hello1 = function(){
	console.log('hello1');
};
console.log(hello1, typeof hello1);


const hello2 = function(name){
	console.log('hello2', name);
}

const hello3 =function(name){
  retrun 'hello3 ${name}';
}

선언적 function과 익명함수를 만들어 변수에 할당
-자바스크립트에서 함수는 객체, 객체는 "값"이다.
즉, 함수 객체를 변수와 같은 자료구조로 할당할 수 있다.

// 함수 선언문을 사용하여 함수를 정의
function hello(name) {
  // ...
}

// 함수 표현식을 사용하여 함수를 정의, 변수에 할당
const hello2 = function(name) {
  // ...
};

console.log(hello2);//var 호이스팅. undefined

hello1();//hello1
hello2();//hello2 not a function
function hello1(name){//선언적 방식. 함수 선언문을 사용하여 함수를 정의
	console.log('hello1'); //hello1
}
//함수 표현식을 사용하여 함수를 정의, 변수에 할당
var hello2 = function(){
	console.log('hello2');//hello2 not a function. 함수가 없다.
}

const hello3 = function(){
	console.log('hello3');//hello3 is not undefined. 존재하지 않는다.
}

⭐ 익명 함수와 기명 함수

함수 표현식 사용시, 함수의 이름을 생략할 수 있고, 이러한 함수를 "익명 함수" 라고 한다.
반대로, 함수의 이름을 생략하지 않은 함수를 "기명 함수" 라고한다.
-함수 표현식을 사용할 경우, 대부분 익명 함수 표현식을 사용하여 함수를 정의한다.

// 기명 함수 표현식(혹은 리터럴)
const hello1 = function hello1(name) {
  // ...
};

// 익명 함수 표현식(혹은 리터럴)
const hello2 = function(name) {
  // ...
};

-🚨주의사항, 기명 함수의 표현식을 사용하여 함수를 정의하여도 해당 함수를 호출할 때 함수의 이름이 아닌 해당 함수 객체가 할당되어 있는 변수의 이름으로 호출해야 된다.

//주의사항
const hello1 = function hello2(name) {
  // ...
};

// WRONG
hello2('Jin');

// GOOD
hello1('Jin');

const hello = new Function ();

-생성자 함수로 함수를 만드는 방법

console.log(sum(1, 2, 3));//sum is not defined
const sum = new Function('a', 'b', 'c', 'retrun a+ b + c');

console.log(sum(1, 2, 3));//6

function과 new Function();의 차이점

//전역변수
//global.a = 0;
{
const a = 1;

const test = new Function('retrun a');
  
console.log(test()); //a is not  defined. global이 잇으면 0
}


{
const a = 2;
  const test = function(){
    retrun a;// 이 a는 글로벌 a가 아닌 바로 위에 선언된 2를 의미한다.
  }
  console.log(test());
}

()=>{}

-arrow function(es6)

//arrow함수를 만들어 hello1 변수에 할당
const hello = () => {
	console.log('hello1');
};

//함수의 매개변수
//함수를 호출할 때 값을 지정


//매개변수가 한일 때, 괄호 생략 가능
const hello2 = (name) =>{
 console.log('hello2', name);
};
const hello3 = (namem age) => {
	console.log('hello3', name, age);
};

//함수의 리턴
//함수를 실행하면 얻어지는 값
const hello4 = name => {
	retrun 'hello4 ${name}';
};
const hello5 = name => 'hello5 ${name}';

new 함수();

-생성자 함수

1.생성자 함수를 이용하여 새로운 객체를 만들어내는 방법

//생성자 함수를 이용하여 새로운 객체를 만들어내는 방법
function Person(name, age){
  console.log(this);//Person {}
	this.name = name;
  	this.age = age;
}
const p = new Person('Mark', 37);
console.log(p, p.name, p.age);//{name:'Mark', age: 37} 'Mark' 37

const a = new Person('Anna', 16);
console.log(am a.name, a.age);//{name:'Anna', age: 16} 'Anna' 16

const Cat = (name, age) => {
  console.log(this);
	this.name = name;
  	this.age = age;
}

const c = new Cat('냥이', 1);//Cat is not a constructor

2.함수를 호출하면 함수를 만들어서 리턴

//함수를 호출하면 함수를 만들어서 리턴
function plus(base){
  retrun function(num){
      retrun base + num;
  }
}
const plus5 = plse(5);
console.log(plus5(10));//15

const plus7 = plus(7);
console.log(plus7(8));//15

3.함수를 인자로 하여 함수를 호출