2024.01.01 TIL(미완)

오늘 배우고, 해결하고, 느낀 것들.

1. 반복문(for, for~in, while, do~ while, contiue, break)

1-1. for문
- for문의 기본형태
for(초기값; 조건식; 증감식) {...}

ex) for(let i = 0; i < 10;  i++) {
console.log(i);
}

// i라는 변수는 0부터 시작한다.

// i라는 변수가 10에 도달하기 전까지 계속한다.

// i라는 변수는 한 사이클이 돌고나면 1을 더한다.

10보다 작을 때까지 반복을 한다고 했으니 결과 값은 10을 제외한 0~9까지가 출력이 된다.

새롭게 배운 for 반복문의 사용
예시) 0 ~ 10 사이의 숫자 중 2의 배수만 출력을 하시오
for 반복문을 사용하는 방법은 배웠지만 2의 배수는 어떻게 나타내지? 싶었다.
사실 수학 자체는 너무 못하고 포기를 했기 때문에 설명을 통해 이해를 할 수 있었다.

for(let i = 0; i < 11; i ++) {
if(i >= 2) {
if(i % 2 === 0){
console.log(i + "는 2의 배수입니다.")
}}};
위의 코드는 이해를 위해 강의를 따라서 쳐본 코드이다.
위 코드에서 배수를 구하는 방법을 배울 수 있었는데,
배수를 구하는 방법을 토대로 기억을 더듬이 스스로 코드를 한번 써보았다.

for (let i = 0; i < 11; i++) {

    if (i % 2 === 0 && i !=0) {

        console.log(i + "는 2의 배수입니다.")

    }

};

코드를 짠 순서
1. for 반복문의 초기값, 조건, 증감 연산자를 적었다.
2. 조건을 주기 위해 if문을 했다.
(i를 2로 나눈 나머지 값이 절대적으로 0일 때)
3. console.log를 통해서 출력을 시도했다.

이대로 진행을 했을 때는 역시나 0을 포함을 해버렸고, 문제 파악을 시작했다.
문제: 0을 제외할 조건을 적어주지 않았다.
해결: 0을 제외할 수 있게 조건부 실행을 통해 i는 0이 아닐 경우 라는 조건을 넣어주었다.
2는 2의 배수입니다.
4는 2의 배수입니다.
6는 2의 배수입니다.
8은 2의 배수입니다.
10은 2의 배수입니다.
후기: 조금 얼떨떨하다 이게 되네? 싶었다... 

1-2. for ~ in 문
for ~ in문은 객체의 속성을 출력해 주는 문법이다.

let person = {

    name : 'John',

    age : 30,

    gender : "male"

};

for(let key in person) {

    // person의 키를 불러 온 후 person의 키 값을 불러온다.

    console.log(key + ":" + person[key]);

}

for ~ in문을 사용하여 객체 person의 property(속성)를 출력한다.
for ~ in문은 객체의 프로퍼티를 순서대로 접근할 수 있다.

1-3. while문

while문의 기본 형태
while(조건식) {
메인 로직;
증감식;
}

 let i = 3;

   

    while(i < 10) {

        console.log(i);

        i++;

    }

while문은 조건식이 참일 경우에만 코드를 반복적으로 실행한다.

while문에서 주의해야 할 것!
1. 변수 선언은 반복문 앞에!
2. for문과 다르게 while문은 조건식만 괄호 안에 적어주는데,
증감식을 꼭 넣어줘야함!(아니면.. 무한반복문이 만들어짐)

while문 실습

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

while(i < 100) {

        if(i % 5 === 0 && i >= 5) {

            console.log(i + "는 5의 배수입니다.");

        }

        i++;

    }

while반복문(i는 100보다 작다는 조건){
만약 i를 5로 나눈 나머지 값이 0이고, i 가 5와 같거나 크면 console.log로 출력을 해준다}
i는 1씩 커지면서 조건에 false가 될 때까지 반복한다.
}

1-4. do while문
do를 먼저 실행한 후 while을 반복하는 반복문
(do while문을 일단 코드를 한번 실행을 하고, 그 이후에 조건에 맞으면 반복을 한다.)

    let i = 0;

       

    do {

        console.log(i);

        i++;

    } while(i < 10);

1. do에 들어있는 메인 로직 console.log(i)를 실행시켜 준다.
2. 증감식을 확인한 후 i값을 증가시킨다.
3. while문의 조건만큼 반복문을 실행시킨다.

1-5. continue, break(조건을 넘기느냐, 멈추느냐)

  for(let i = 0; i < 10; i++) {

        if(i === 5) {

            break; // if의 조건에 들어오면 break가 실행되어 for문 블록을 나가버리게 한다.

        }

        console.log(i); // 결과는 0, 1, 2, 3, 4, 5

    }

주석 처리한 내용이 곧, 설명인데 i가 10보다 작을 경우에 계속 반복을 하라고 명령을 했지만,
break문으로 "응~ 싫어~ if문 안에 있으니까 if문 조건만큼만 할 거야~"라고 하는 거다.라고 외우기로 함.
* break문은 조건을 충족해 버리면 반복문 자체를 중단시켜 버린다. *

    for(let i = 0; i < 10; i++) {

        if(i === 5) {

            continue; // if의 조건에 들어오면 continue는 메인 로직을 실행 시키지 않고, 다음으로 넘겨준다.

        }

        console.log(i);

    }

위는 continue의 사용 예시이다.
break과 다르게 continie는 말 그대로 계속하는 녀석이다.
10보다 작을 때까지 반복적으로 작업을 하라고 조건을 주었고

그 안에 별도의 조건을 넣어 줬는데 "만약 i가 5면 계속해!" =>??
계속이긴 한데 엉성한 계속인 것 같다. 출력을 통해 살펴보면 0, 1, 2, 3, 4, 6 ,7, 8, 9 가 출력이 되는데 
continue는 조건에 해당하는 값들을 마주치면 회피한다.(메인 로직을 실행하지 않고 조건에서 벗어나려고 한다.)
* continue문은 조건에 해당되면 메인 로직을 실행하지 않고(출력 값에서도 없음), 다음 반복을 실행한다. *

---------- 여기까지가 1주 차 강의에 내가 배운 내용들이다 ----------

경. 2015년도에 ES6 문법이 대규모로 문법적인 향상이 이뤄져 개발자들에게 더 편리한 개발 환경을 만들어줬다. 축
(물론 나한테는 그냥 이게 뭐람... 이런 느낌으로 아직까지는 와닿지 않는다.)

1. let과 const의 등장
let과 const가 없을 때는 var 명령을 사용했다.
const는 절대로 변하지 않는 '상수'를 선언할 때 사용하는 명령어인 것은 이미 알고 있지만,
let 같은 경우에는 var와 함께 사용하면서 실습을 했지만, 어떤 차이였는지 명확하게 기억이 나질 않았었음.

1-1. var과 let의 차이 : 재선언이 가능한가?
var는 같은 이름의 변수로재선 언, 재할당이 가능하지만 let은 재선언은 불가능 하지만 재할당은 가능하다.

1-2. let과 const의 차이와 공통점은?
공통점: 재선언이 불가능하다.
차이점: let은 재할당이 가능하지만, const는 상수를 선언하기 때문에 재할당도 불가능하다.
* 상수 선언은 신중하게!

1-3. var, let, const 정리
기준 1.  재선언이 가능한가? : var
기준 2. 재할당이 가능한가? : var, let
기준 3. 재선언이 불가능한가? : let, const
기준 4. 재할당이 불가능한가? : const

2. 화살표 함수의 등장
화살표 함수의 등장 이전 함수를 선언하는 2가지 방법과 ES6에 추가된 화살표 함수

2-1. 함수선언식
function myFunc() {메인로직};
=> 내가 알고 있는 가장 기본적인 함수 선언 방법이며, 가장 많이 사용함.
2-2. 생성자 함수
let myFunc = function() {메인로직};
2-3. 화살표 함수(arrow function)

let arrowFunc01 = (x, y) => 

    return x + y

};

3. 삼항 연산자
조건? ture인 경우 : false인 경우
ex) 1 ===1 ? "진실" : "거짓";
1이 데이터 타입까지 1과 같니? => true이므로 결과로는 true가 출력된다.

4. 구조 분해 할당(destructuring)
: 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법이다.

4-1. 배열의 구조 분해 할당
let =[value1, value2] = [1, "new"]
console.log(value1, value2); 를 실행해 보면
구조 분해 할당으로 배열을 풀어서 각각 value1, value2에 1, new가 할당된 것을 확인 가능하다.

let [value1, value2] = [1, "ok"];

console.log(value1);

console.log(value2);

console.log('------');

console.log(typeof value1);

console.log(typeof value2);

데이터 타입이 궁굼해서 typeof 연산자로 확인을 해봤는데 숫자, 문자형임을 알 수 있었다.

4-2. 객체의 구조 분해 할당