Javascript 개발 2일차

형식은 

if (조건이 true or false 로 나오게 짜주기 ) {
    //main logic
  }

if-else 문 

if (조건이 true or false 로 나오게 짜주기 ) {
   //main logic#1
 }
else {
  //main logic#2  ----->if 조건이 성립하지 않는 경우에 실행 되는 로직.
}

if-else if -else 문 

if (조건이 true or false 로 나오게 짜주기 ) {
   //main logic#1
 }
else if {
  //main logic#2  ----->if 조건이 성립하지 않는 경우에 실행 되는 로직.
}
else {
 //main logic#3 ----->else if 가 실행되지 않으면 마지막으로 실행되는 로직.
}

ex)

let x = 5;

if (x > 0) {
  console.log("1");
} else if (x >= 0 && x < 10) {           //&& 는 조건이 둘다 만족해야 함
  console.log("2.");
} else {
  console.log("3");
}

----------> 2번이 실행됨! 


switch 문

let fruit ="사과";

switch(fruit) {
        case "사과" : 
              console.log("사과 입니다.");
              break;      --------------->//반드시 break 적어야 조건 만족하면 빠져 나옴.
        case "바나나" : 
              console.log("바나나 입니다.");
              break;
        case "딸기" : 
              console.log("딸기 입니다.");
              break;
        default : --------->위 조건이 다 아닌경우. 
              console.log("아무것도  아닙니다.");
              break;

}



중첩 조건문
ex) 

let age =20;
let gender = "남성";

if(age >=18){
   if(gender === "여성"){
      console.log("성인 여성입니다");
   }
   else {
       console.log("성인 남성입니다");
   }
}
else{
   if(gender === "여성"){
      console.log("미성년 여성입니다");
   }
   else {
       console.log("미성년 남성입니다");
   }
}

// && 조건 
let x = 10;

x>0 && console.log('x는 상수 입니다');   //x>0 이면 콘솔 실행


// 삼항 연산자 와 단축평가

let a;
let b = a || 20 ;           
// a는 선언 하지 않았음. 즉 undefined 이고  b 는 a가 undefined 이면 20 이 들어간다. 이렇게 이해하기

console.log(b);


// falsy 한 값과 turthy 한 값?

if(0) {
    console.log("hello")
}

if(null) {
    console.log("hello")
}

if(undefined) {
    console.log("hello")
}

if(false) {
    console.log("hello")
}

if(NaN) {
    console.log("hello")
}

if("") {
    console.log("hello")
}

if(true){
    console.log("true값 입니다")
}

--------------------------->즉,  true 조건을 제외한 나머지 조건은 falsy 한 값이라고 한다. (선언이 안된?)


객체


// 객체 생성

let person = {
    name:"홍길동",
    age:21,
    gender:"남자"
}

// Object.key(객체 이름) 값을 활용해서 key값을 불러주기

let hong = Object.keys(person)

console.log(hong);

// Object.values(객체 이름) 값을 활용해서 value값을 불러주기

let hongv= Object.values(person);

console.log(hongv);

// Object.entries(객체 이름) 값을 활용해서 2차원 배열로 만들어주기.

let entry = Object.entries(person) 

console.log(entry);   //[ [ 'name', '홍길동' ], [ 'age', 21 ], [ 'gender', '남자' ] ]
 
// Object.assign(객체이름) 말그대로 복사 해주는것. (그대로)

let entt = {}        //빈 객체 선언시 반드시 {} 해줘야 함.

Object.assign(entt,person);     //여기서는 (채울 객체이름 , 대상 객체이름)

console.log(entt);  


// 객체 비교 

let pers1 = {
    name:"홍길동",
    age:21,
    gender:"남자"
}

let pers2 = {
    name:"홍길동",
    age:21,
    gender:"남자"
}

let str1 ='aaa';
let str2='aaa';
console.log(pers1 === pers2);   //false 값이 나오는 경우는? 객체는 각 저장된 공간의 주소값을 가지구 있는데, 각 객체를  선언하고 저장된 주소값이 다르기 때문
console.log(str1 === str2)  //이건 값을 직접 가지기 때문에 true 가 나오는 것.


//만약에 두 객체를 같게 보고 싶으면?
console.log(JSON.stringify(pers1) === JSON.stringify(pers2))  //두객체의 저장된 문자 길이의 값이 같다.


// ...:spread operator ->객체를 풀어 헤칠때 쓰는 방법 {} 이걸 해체한다고 보면됨
let spread = {...pers1 , ...pers2}   //이러면 두개 객체를 풀어서 다시 하나의 객체를 만듬
console.log(spread) 






// 배열의 기본 생성

let fruits =["사과","바나나","오렌지"]

// 배열 호출 방법
console.log(fruits[0])

// 배열의 크기 지정

let arr = new Array(5)  // [0,1,2,3,4]-5개 의 인덱스를 가진 배열.

//배열 매소드 
//push 가 있다.

fruits.push("오렌지");    //오렌지 요소를 추가하기. (끝에 추가됨)

//pop 메소드 -------->배열 속 삭제. 순서는 최근 추가된 순서로

fruits.pop();

//shift 메소드  ---------->이번엔 맨 앞쪽에 있는 요소를 삭제

fruits.unshift()
console.log(fruits)

//unshift 메소드 ---------->맨앞쪽으로 요소 추가

fruits.unshift('용과')
console.log(fruits)

//splice 메소드 

fruits.splice(1,1,'망고')  //(요소를 넣고싶은 인덱스 위치 , 넣고 싶은 요소부터 교체해주는 갯수 , 넣고싶은 요소)
console.log(fruits)       // [ '사과', '망고', '오렌지' ] 출력됨

//slice 메소드

let slice = fruits.slice(1,2)  //(자르기 시작할 인덱스 위치 , 자르는 인덱스 갯수(이건 맨 앞부터 두번째 ))





배열의 콜백 메소드

//foreach , map , filter , end 이렇게 4가지가 있다.

//foreach 부터 사용하자면?

let numbers = [1,3,4,6,2];

numbers.forEach(function(item){   ///이렇게 메소드 안에 함수가 들어 가는것을 "콜백 함수" 라고 합니다.
    console.log('item ->',item)
})                                /// 배열.foreach(function(item-->배열의 인덱스 요소들을 넣어줌 ){ return 필요없음!})


//map?

let newnum = numbers.map(function(item){
    return item*2  //가공한 값이 들어갈 새로운 변수가 필요 
})                /// foreach 와는 다르게, 새롭게 선언을 해주고, 반드시 리턴 값을 가짐.  (그리고 반드시 배열 값만큼 내뱉는당.)

console.log(newnum) 


//filter 

let filter_num = numbers.filter(function(item){
    return item === 6           //map 과는 달리 반드시 return 값에 조건을 붙여줘야 함
})

console.log(filter_num)


// find 

let find_num = numbers.find(function(item){
    return item>0               // return 에서 조건을 만족하는 배열중에 가장 앞에있는거 하나만 뽑아냄
})

console.log(find_num);   //배열이 벗겨진 상태로 반환.

//while 문

while(조건){
     //로직
     //증감 (여긴 반드시 써줘야함)
 }


//while 문을 활용하여 3초과 100미만의 숫자중 5의 배수만 출력 하는 예

let i =4

while(i<100){
    if(i % 5 ===0 && i>=5){
        console.log(i)
     }
    i++;
}

//do ~ while 문

do{
  //메인로직
  //증감
} while(조건)

 let a= 0;

do{
    console.log(a)
     a++
} while(a<15)


//for break 문 

for(i=0; i<10 ; i++){
    if(i ===5 ){
        break        //5가 딱 되면 멈춘다 그래서 출력은 0,1,2,3,4
    }
    console.log(i);
}          

//for continue 문

for(i=0; i<10 ; i++){
    if(i ===5 ){
        continue       //5가 딱 되면 5만 넘어가고 다 찍임 10 전까지.
    }
    console.log(i);
}