[항해99_JavaScript 문법 종합반] 1주차 - 2 (조건문, Boolean에서 true와 false로 나오는 값, 객체{ }, 배열[ ], 반복문)

 

 

 

조건문

 

 

//조건문(if, else if, else, switch)
//1.if문
let x = 10;

if ( x > 0 ) {
    //main logic
    console.log("x는 양수입니다.")
}

//1-2. 문제
//y의 길이가 5보다 크거나 같으면 길이를 console.log로 출력
let y = "Hello World";
if(y.length >= 5){
    console.log(y.length);
}

// //2. if - else문
let z = -3;
if(z>0) {
    console.log("z는 양수")
} else {
    console.log("z는 음수 또는 0 입니다.")
}

// 3. if - else if - else 문
// x1 0미만 : 1 출력, 
// x1 0이상 10미만 : 2출력,
// x1 10이상 : 3출력

let x1 = 10;
//---------------1
if (x1 < 0){
    console.log("1")
} else if (x1 >= 0 && x1 <10) {
    console.log("2")
} else {
    console.log("3")
}

//---------------2
if (x1 < 0){
    console.log("1")
} else if (0<= x1 <10) {
    console.log("2")
} else {
    console.log("3")
}



//1-4. switch
//변수의 값에 따라 여러 개의 경우(case) 중 하나를 선택
let fruit = "사과2";
switch (fruit) {
    case "사과":
        console.log("사과입니다.")
        break;
    case "바나나":
        console.log("바나나입니다.")
        break;
    case "키위":
        console.log("키위입니다.")
        break;
    default:
        console.log("아무것도 아닙니다.")
        break;
}

 

//조건문의 중첩
let age = 17; 
let gender = "남성";

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

 

//조건부 실행
let x = 10;

if (x>0){
    console.log("x는 양수입니다.")
}

//위의 if문을 아래와 같이 간단하게 사용할 수 있다.
//and 조건(&&)
(x>0) && console.log("x는 양수입니다.")

//or 조건(||)
//삼항 연산자와 단축평가
let y; // y에는 undefined
let z = y || 20;  //y가 undefined이면 z에 20을 할당해달라는 문법임

console.log(z);

 

 

---

 

 

코드를 작성하면서 항상 애매하게 의문인 점이 있었다. (아래와 같은 상황에) 나는 등호로 범위를 표현하는게 훨씬 보기가 좋은데 다른 사람들의 코드를 보면 논리곱 연산자를 이용해서 표현하곤 하는것이다. 물론 내가 논리곱연산자에 대해 익숙치않아 그런 것도 있었다. 이번 매니저님한테 여쭤보니 논리곱 연산자로 사용하는게 코드 읽기가 훨씬 편하다고 하셨다. 왜냐면 성능같은건 똑같으나 조건의 참 거짓을 따져서 읽을 때 편하기때문이라고... 그렇구나...! 이제 나도 논리곱연산자랑 친해져봐야겠다. 

//3. if - else if - else 문
// x1 0미만 : 1 출력, 
// x1 0이상 10미만 : 2출력,
// x1 10이상 : 3출력

let x1 = 10;
//---------------1
if (x1 < 0){
    console.log("1")
} else if (x1 >= 0 && x1 <10) {
    console.log("2")
} else {
    console.log("3")
}

//---------------2
if (x1 < 0){
    console.log("1")
} else if (0<= x1 <10) {
    console.log("2")
} else {
    console.log("3")
}

 

 

 

 

---

Boolean에서 true와 false로 나오는 값 (truely / false)

 

 

//falsy한 값, truthy한 값

if (0) {
    //main logic
}

//falsy한 값 : 0이외에도 "", null, undefined, NaN

 

 

 

---

객체{ }

 

 

 

//객체
//key - value pair
// 하나의 변수에 여러 개의 값을 넣을 수 있다.

//1. 객체 생성 방법
//1-1. 기본적인 객체 생성 방법
let person = {
    name: "홍길동",
    age: 30,
    gender: "남성",
};


//1-2. 생성자 함수를 이용한 객체 생성 방법
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남성");
let person2 = new Person("홍길희", 30, "여성");


//2. 접근하는 방법
console.log("1", person.name);
console.log("2", person.age);
console.log("3", person.gender);

//3. 객체 메소드 (객체가 가진 여러가지 기능: Object.~~~)
//3-1. Object.key() : key를 가지고 오는 메소드

let person3 = {
    name: "홍길동",
    age: 30,
    gender: "남성",
};

let keys = Object.keys(person3);
console.log("keys =>", keys);

//3-2. values
let values = Object.values(person);
console.log("values =>", values);

//3-3. entries
//key와 value를 묶어서 배열로 만든 배열 (2차원 배열)
let entries = Object.entries(person3);
console.log("entries =>", entries);

//3-4. assign
//객체 복사
let newPerson = {};
Object.assign(newPerson, person3, {age:31 ,gender:"여성"}) //첫번째 매개변수: 어디에 복사할래, 두번째 매개변수: 뭘 복사할래. 
// assign 괄호 안에 {age:31} 로 넣으면 age키를 갖는 value값을 수정해서 복사할 수 있다.
console.log("newPerson =>", newPerson);

//3-5. 객체 비교

let person4 = {
    name: "홍길동",
    age: 30,
    gender: "남성",
};

let person5 = {
    name: "홍길동",
    age: 30,
    gender: "남성",
};

let str1 = "aaa";
let str2 = "aaa";

console.log("answer1 =>", person4 === person5); //false
console.log("answer2 =>", str1 === str2); //true
//객체는 크기가 커서 메모리에 저장할 때 별도의 공간에 저장되고, person4,5의  별도 주소값을 갖는다. 그래서 주소값을 비교하므로(주소값은 다를 수 밖에 없음) false가 니온것.

//그럼에도 비교하는 방법 있음. JSON화 시켜서 비교가능.
console.log("answer3 =>",JSON.stringify(person4) === JSON.stringify(person5));

//3-6. 객체 병합
let person6 = {
    name: "홍길동",
    age: 30,

};

let person7 = {
    gender: "남성",
};

//중괄호를 다 풀어주는 키워드가 있음. ... 스프레드 오퍼레이터라고 함.
let perfectMan = {...person6, ...person7};
console.log(perfectMan);

 

 

 

 

---

배열[ ]

 

 

//배열

//1. 생성
//1-1. 기본 생성
let fruits = ["사과", "바나나", "오렌지"];

//1-2. 크기 지정
let numbers = new Array(5);

console.log(fruits.length);
console.log(numbers.length);

//2. 요소 접근
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

//3.배열 메소드
//3-1. push
let fruits1 = ["사과", "바나나"];
fruits.push("오렌지");
console.log(fruits1);

//3-2. pop (마지막 요소부터)
console.log("1 =>", fruits1);
fruits1.pop();
console.log("2 =>", fruits1);

//3-3. shift (맨 앞에 요소부터 삭제)
let fruits2 = ["사과", "바나나", "키위"];
fruits2.shift();
console.log("3 => ", fruits2);

//3-4. unshift(맨 앞부터 요소 넣기)
fruits2.unshift("포도");
console.log("4 => ", fruits2);

//3-5. splice(시작인덱스, 지우는 갯수, 지우고 어떤걸 넣을건지) : 요소지우고 요소 넣기
fruits2.splice(1,1,"애플망고");
console.log(fruits2);

//3-6. slice(시작인덱스~마지막 인덱스 전까지) :인덱스 범위내의 요소 반환
let fruits3 = ["사과", "바나나", "키위"];
let splicedFruits = fruits3.slice(1,2);
console.log(splicedFruits);

//forEash, map, filter, find
let numbers1 = [1,2,3,4,5];

//(1) forEach
// 매개변수 자리에 함수를 넣는 것: 콜백함수
numbers1.forEach(function(i) {
    console.log("item입니다= > "+ i )
});

//(2)map : return문이 꼭 들어가야함.항상 원본 배열 길이만큼 반환됨.
let newNumbers = numbers1.map(function(i){
    return i * 2;
})
console.log(newNumbers); //[ 2, 4, 6, 8, 10 ] : map으로 가공한 결과값이 들어감.


//(3) filter 
let newNumbers1 = numbers1.filter(function(i){
    return i === 5; //조건이 들어감.
})
console.log(newNumbers1); //조건에 부합하는 값들만 들어감.


//(4) find
let newNumbers2 = numbers1.find(function(i) {
    return i > 3;
})
console.log(newNumbers2); //filter와 같이 조건에 부합하는 값들만 들어가는데 첫번째 요소만 반환됨.

 

+ 덤 ) filter(Boolean)을 쓰면 왜 생기는지 모르는 비어있는 배열 요소를 지울 수 있음

let a = "Hello";
let b = "el";
let b1 = ["e", "l"];

let answer = a.split(b[0]).join("").split(b[1]);
let answer1 = a.split(b[0]).join("").split(b[1]).filter(Boolean);

console.log(answer);  //[ 'H', '', 'o' ]
console.log(answer1); //[ 'H', 'o' ]

 

 

 

---

 

반복문

 

 

반복문 _ for

//for, while => 반복문

//i 라는 변수는 0부터 시작
// 변수가 10에 도달하기 전까지 계속 반복
// 변수가 한 싸이클을 돌고 나면 증감식 실행
for(let i=0; i <10; i++){
    console.log(i);
}

//배열과 for문은 짝궁.
const arr = [1,2,3,4,5];
for(let i =0; i <arr.length; i++){
    console.log(i);
    console.log(arr[i]);
}

for (let i = 0; i<10+1; i++){
    if(i % 2 === 0){
        console.log("2의 배수" + i);
    }
}

//for ~ in 문 : 갹체의 속성을 출력하는 문법
let person = {
    name:"John",
    age: 30,
    gender: "male"
}

//person['key']
for( let key in person){
    console.log(key + ":" + person[key]);
}

 

 

반복문 _ while

//while문
let i = 0;

while (i < 10) {
    console.log(i);
    i++;
}

//while문을 활용 -> 3초과 100미만의 숫자 중 5의 배수 골라 출력
while (3<i && i<100) {
    if (i % 5 === 0){
        console.log("5의 배수: "+i)
    }
    i++;
}

//do - while : do 를 실행 후 while 문 돌리기
do {
    console.log(i);
    i++;
} while(i<10){
}

//break : 그만두기
for(let x = 0; x <10; x++){
    if ( x === 5) {
        break; //break를 만나면 for문 블럭을 벗어나버림
    }
    console.log(x);
}

//continue : 쓰루함
for(let x = 0; x <10; x++){
    if ( x === 5) {
        continue; //continue를 만나면 아래 코드들을 실행 안하고 다음 반복문 순서로 넘어감.
    }
    console.log(x);
}