TIL - JavaScript 기초문법 정리2

1. 조건문 - if, else if, else, switch

1-1. if 문

let x = 10;

// if ("조건, 즉 true 또는 false 가 나오는 조건이 들어간다") {

// }

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

// 1-2
let y = "hello world";

if (y.length >= 5) {
    console.log(y.length);
}

1-2. if -else문

let z = 5;

if (z < 0) {
    // main logic #1
    console.log("x는 양수입니다.")
} else {
    // main logic #2
    console.log("x는 음수입니다.")
}

1-3. if - else if - else 문

let a = 10;

if (a < 0) {
    // main logic #1
    console.log("1")
} else if (a >- 0 && a < 10) {
    // main logic #2
    console.log("2")
} else {
    // main logic #3
    console.log("3")
}

1-4. switch

// 변수의 값에 따라, 여러 개의 경우(case)중 하나를 선택
// default
let fruit = "사과"; // 사과입니다 출력

switch (fruit) { 
    case "사과":
        console.log('사과입니다.');
        break;  // case 문에서는 한 case가 끝날 때마다 아래 break; 를 넣어야한다. 그렇지 않으면 뒤 case문까지 연결되지 않음!
    case "바나나":
        console.log('키위입니다');
        break;
    case '키위':
        console.log('키위입니다');
        break;
    default:
        console.log('아무것도 아닙니다.')   // case에 해당되지 않는 경우 default 값으로 출력
        break;
}

---

조건문의 중첩

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;

// and조건(&&)
x > 0 && console.log("x는 양수입니다."); // 이렇게 사용해도 okay. 요즘스러운 개발패턴

// or조건(||)
// 삼항 연산자와 단축평가
let y; // y라는값은 선언만 해놓고 값을 할당하지 않음. 즉, undefined 상태
let z = y || 20; // y 가 undefined 이면 20을 기본으로 세팅해줘! 라는 뜻! or!

console.log(z);

---

farly한 값, truthy한 값

if (0) {    
    // main logic
    console.log("hello");
}   //number 타입도 true, false로 사용될 수 있다. 이 경우 falsy한 값으로 console에는 출력되지않는다!

if ("") {    
    // main logic
    console.log("hello");
}   // 마찬가지로 falsy한 값!


if (null) {    
    // main logic
    console.log("hello");
}   // 마찬가지로 falsy한 값!

if (undefined) {    
    // main logic
    console.log("hello");
}   // 마찬가지로 falsy한 값!

if (NaN) {    
    // main logic
    console.log("hello");
}   // 마찬가지로 falsy한 값!

if (true) {    
    // main logic
    console.log("hello"); 
}   // 이거만 truthy 한 값으로 console에 출력된다!

---

2. 객체

: 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("홍길순", 20, "여자");

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

// 3. 객체 메소드(객체가 가진 여러가지 기능 : Object.~~~)
// 3-1. Object.key() : key를 가져오는 메소드
let person = {
    name: "홍길동",
    age: 30,
    gender: "남자"
};

let keys = Object.keys(person);
console.log("key => ", keys);   //key =>  [ 'name', 'age', 'gender' ]

// 3-2. values
let values = Object.values(person);
console.log("values => ", values);  //values =>  [ '홍길동', 30, '남자' ]


// 3-3. entries
// key와 value를묶어서 배열로만든 배열! (2차원 배열)
let entries = Object.entries(person);
console.log("entries => ", entries);    //entries =>  [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

// 3-4 assgin
// 객체 복사
let newPerson = {};
Object.assign(newPerson, person, {age : 14});
console.log("newPerson => ", newPerson);    //newPerson =>  { name: '홍길동', age: 14, gender: '남자' }

// 3-5. 객체 비교
// 크기가 크다 -> 메모리에 저장할 때 별도의 공간에 저장
// personA 별도 공간에 대한 "주소"
let personA = {
    name: "홍길동",
    age: 30,
    gender: "남자"
};

// personB 별도 공간에 대한 "주소"
let personB = {
    name: "홍길동",
    age: 30,
    gender: "남자"
};

console.log("answer => ", personA === personB); //false
console.log("answer2 => ", JSON.stringify(personA) === JSON.stringify(personB)) //true

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

console.log("answer3 => ", str1 === str2);  //true

// 3-6. 객체 병합
let person3 = {
    name: "홍길순",
    age: 30,
};

// person4 별도 공간에 대한 주소
let person4 = {
    gender: "여자"
};

// ... : spread operator
let perfectMan = {...person3, ...person4};
console.log(perfectMan);    // { name: '홍길순', age: 30, gender: '여자' }

 

---

3. 배열

// 1. 생성
// 1-1. 기본 생성
let fruit1 = ["apple", "banana", "orange"];

// 1-2. 크기 지정
let number = new Array(5); // 다섯개의 요소를 가지고 있는 배열을 새로 만들어줭

console.log(number.length);
console.log(fruit1.length);

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

// 3. 배열 메소드
// 3-1. push 뒤에 하나를 추가
let fruit = ["apple", "banana", "orange"];
console.log("1 => ", fruit);

fruit.push("cherry");
console.log("2 => ", fruit);

// 3-2. pop 뒤에 하나를 삭제
fruit.pop();
console.log("3 => ", fruit);

// 3-3. shift 앞에 하나를 삭제
fruit.shift();
console.log("4 => ", fruit);

// 3-4. unshift 앞에 하나를 추가
fruit.unshift("grape");
console.log("5 => ", fruit);

// 3-5. splice
fruit.splice(1, 1, "melon") //시작하는 위치에 대한 번호 : 지우는 갯수
console.log(fruit);

// 3-6. slice
let slicedFruit = fruit.slice(1, 2); // start에서 end를 지정 : 1번째부터 2번째 전까지를 새롭게 배열해서 줘
console.log(slicedFruit);


// forEach, map, filter, find
// forEach 를 제외하고 모두 return문이 필요하며
// 새로운 배열 또는 새로운 값을 return한다.

let numbers = [1, 2, 3, 4, 5];
// (1) forEach
// 매개변수 자리에 함수를 넣는 것 : 콜백 함수
numbers.forEach(function(item) {
    console.log("item입니다 => " + item);
});
// 배열에 forEach를 넣고 안에 매개변수로 함수를 넣으면, 
// 함수가 5번 실행이 되면서 이 5번은 배열의 갯수와 일치하며,
// 함수의 매개변수는 배열의 각각의 요소가 한개씩 들어가게 된다!

// (2) map : 기존의 배열을 가공해서 새로운 배열을 만들어 내는 역할
// ***항상 원본 배열의 길이만큼이 return 된다.
let newNumbers = numbers.map(function(item){

    return item * 2;
});

console.log(newNumbers);

// (3) filter
// ***map과는 다르게, 조건에 맞는 것만 return 된다.
let numbers1 = [4, 1, 5, 4, 5];

let filteredNumbers = numbers1.filter(function(item){
    return item === 5;
})

console.log(filteredNumbers);

// (4) find
// ***map과는 다르게, 조건에 맞는 것만 return 되며, 그 중 "첫번째 위치한" 배열만 출력
let numbers2 = [4, 1, 5, 3, 5];

let result = numbers2.find(function (item) {
    return item > 2;
});

console.log(result);

---

4. for, while => ~하는 동안 : 반복문

: 프로그램을 사용한다는 것 자체가 무언가를 반복적으로 하는 것

for, while을 통해서 if문을 통한 분기처리는 필수!

// for, while을 통해서 if문을 통한 분기처리는 필수!

// for (초기값; 조건식; 증감식) {
// }
for (let i = 0; i < 10; i++) {
    console.log(i);
}
// i라는 변수는 0부터 시작할거야
// i라는 변수가 10에 도달하기 전까지 계속할꺼야
// i라는 변수는 한 사이클이 돌고 나면 1을 더할거야!

// 배열과 for문은 짝꿍이다.
const arr = ["one", "two", "three", "four", "five"];
for (let i = 0; i < arr.length; i++) {
    console.log(i);
    console.log(arr[i]);
}

// ex : 0부터 10까지의 수 중에서 2의 배수만 console.log로 출력하기
for (let i = 0; i <= 10; i++) {
    if (i > 0) {
        if (i % 2 === 0) {
            // 2의 배수
            console.log(i + "는 2의 배수입니다!")
        }
    }

}

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

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

// while 문
let i = 0;
// while문 기본 형식
while (i < 10){
    console.log(i);
    i++; // 하나하나씩 돌면서 로직이 되려면 필수! 
// 그렇지 않으면 i=0에 고정되어 있어서 하나씩 돌지 못하고 무한루프!
}  

// while문을 활용해서 3초과 100 미만의 숫자 중 5의 배수인 것만 출력
let i2 = 3;
while (i2 < 100){
    if (i2 % 5 === 0 && i2 >= 5 ){
        console.log(i2 + "는 5의 배수");
    }

    i2++;
}

// do ~ while 문
// 일단 한번 코드를 실행한 후에 while 을 돌리는 문. do! first and while!
let i3 = 0;

do {
    console.log(i3);
    i3++;
} while (i3 > 10);

// break문
for (let i4=0; i4<10; i4++) {
    if (i4 === 5) {
        break; // i가 5일때 끝내고 for문을 깨버리고 밖으로 나가버리는 문.
    }
    console.log(i4);
}

// continue문
for (let i5=0; i5<10; i5++) {
    if (i5 === 5) {
        continue; // i가 5일때 다음 순서로 넘어가는 문.
    }
    console.log(i5); // 5를 제외하고 출력!
}