[TIL] D+49 자바스크립트야 친해지자...

 

시작부터 TMI 얘기해보자면

제가 며칠 전에 카톡을 탈퇴했었습니다... 사람들이랑 연락하는 거 재밌긴 한데 하다보면 너무 기빨리고 정신 없어서요...

카톡 없는 며칠은 정말 마음이 평온하고... 편했는데... 주변 사람들이 연락하기 어렵다고 해서 다시 깔았어요 결국...ㅠㅠ

 

근데 제가 핸드폰에 알림이 뜨면 자꾸 보게 되고 보다 보면 인스타도 보고 ... 그냥 개미지옥에 빠져버려서

카톡 알림을 아예 꺼버렸습니다 ㅎㅎㅎ (사실 급한 연락 올 일도 없고,,, 정말 급하다면 전화를 하겠지요?)

 

카톡 알림 끄고 핸드폰으로 스톱워치 켜놓고 공부하면 공부 시간도 측정할 수 있고 폰도 덜 만지게 돼서 좋은 것 같아요~

저는 스톱워치로 잰 공부시간을 매일 쓰는 공부 기록 노트에 적어둔답니다...

이렇게 하면 순수하게 공부에만 집중한 시간이 얼마 안된다는 것이 확 와닿아서... 공부 자극이 되어요 ^^.

진작 이렇게 할 껄 그랬어요... 이제라도 이 방법을 알았으니 다행이죠 뭐~

 

아무튼 오늘만 고생하면 또 주말이에요 ~ 아자아자 화이팅 ~!!!

 

1️⃣ 자바스크립트 문법 종합반

 

12강 배열부터 15강 break continue까지~

 

📌 배열(Array)

// 배열

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

// 1-2. 크기 지정
let number = new Array(5);
console.log(number.length);

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

// 3. 배열 메소드
// 3-1. push : 요소 추가하기
let fruits = ['사과','바나나'];
console.log("1=>", fruits);

fruits.push("오렌지");
console.log("2=>", fruits);

// 3-2. pop : 맨 뒤에 있는 요소 없애기
let fruits = ['사과','바나나'];
console.log("1=>", fruits);

fruits.pop();
console.log("2=>",fruits);

// 3-3. shift : 맨 앞에 있는 요소 없애기
let fruits = ['사과','바나나','키위'];
console.log("1=>",fruits);
fruits.shift();
console.log("2=>",fruits);

// 3-4. unshift : 맨 앞에 요소 추가하기
let fruits = ['사과','바나나','키위'];
console.log("1=>",fruits);
fruits.unshift("포도");
console.log("2=>",fruits);

// 3-5. splice : a번째부터 b개의 요소를 삭제하고 새로운 요소 추가하기
let fruits = ['사과','바나나','키위'];
fruits.splice(1, 1, "포도");
console.log(fruits);

// 3-6. slice : a번째부터 b번째 전까지 요소를 새롭게 배열하기
let fruits = ['사과','바나나','키위'];
let slicedFruits = fruits.slice(1, 2);
console.log(slicedFruits);

 

배열을 생성하는 방법과 접근하는 방법 그리고 배열 메소드(push, pop, shift, unshift, splice, slice)에 대해 배웠다.

아직까진 재밌는데 다음 강에서 어려운 내용이 나올 거라해서 살짝 두렵다... 

 

// forEach, map, filter, find
let numbers = [4, 2, 3, 1, 5];

//(1) forEach : 요소를 순서대로 순회하며 함수 실행
//매개변수 자리에 함수를 넣는 것 => 콜백함수
numbers.forEach(function(item){
    console.log('item입니다=>' + item);
});

//(2) map : 기존 배열을 가공하여 새로운 배열을 생성
//항상 원본 배열의 길이만큼 return 된다.
let newNumbers = numbers.map(function(item){
    return item * 2;
});

console.log(newNumbers);

//(3) filter: 조건에 맞는 값만 return
let numbers = [4, 2, 3, 1, 5];

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

console.log(filteredNumbers);

//(4) find : filter와 유사하지만 조건에 해당하는 첫번째 값만 return한다.
let numbers = [4, 2, 3, 1, 5];

let result = numbers.find(function(item){
    return item > 3;
});

console.log(result);

 

좀 더 어려운 배열 메소드인 forEach, map, filter, find를 배웠다

음.... 재밌는데여.....?

python에도 map함수 있는데 비슷한듯하면서 좀 다르군

(부캠 듣기 전에 백준 python 풀어봤는데 map함수 때문에 🐶고생 해서... 잊을 수 없는 함수임)

 

📌 for문

// for,while => ~동안 : 반복문
// for (초기값; 조건식; 증감식) {
// }

// i라는 변수는 0부터 시작할거야!
// i라는 변수가 10에 도달하기 전까지 계속할거야!
// i라는 변수는 한 사이클이 돌고나면 1을 더할거야!

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

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

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

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

 

for는 ~동안 이라는 뜻...

변수가 우리가 세운 조건에 도달할 때 까지(도달하는 동안)

계속 콘솔을 찍거나 하는 등...뭔가를 반복하는 것입니다~

 

for문 강의에서 깜짝 퀴즈~를 내주셨다.

>> 0~10 사이 숫자 중 2의 배수만 출력하기

 

여기까진 혼자서 성공했어요...

근데 0은 2의 배수가 아니잖아요?...

0을 빼주는 조건을 넣어야하는데...

else if문을 써야되나 고민하다가 아닌 것 같았어요

 

 

정답은 ~~ if문을 중첩으로 쓰는 것이었습니다 ~~~

2 이상의 숫자만 집어넣는 것으로 조건을 추가해주어야 하는 것이었네요 ~~~...

아싸 오늘도 틀리고 하나 배웠다 ^^!

 

📌 while문

// while
let i = 0;

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

 

while문은 for문이랑 기능은 유사한데

형태만 좀 다른 듯?!

 

이번에도 깜짝 퀴즈~ 를 내주셨다

>> while문을 활용해서, 3초과 100미만의 숫자 중 5의 배수만 출력하는 예

처음에는 잘못 만들어서 터미널에 말도 안되는 숫자들 찍히는 거 보고 기겁...

두번째 시도에서는 성공하긴 했으나 잘 만든 식인지는 몰으겟음 ㅎㅎ

 

 

강사님께서 만든 식은 이렇다네요... 

애초에 i = 3 으로 하면 되는 거였네ㅎㅎ

근데 &&  i >=5는 왜 들어간거지용... 없어도 결과값에는 변화가 없지 않나? 하는 생각...

 

// do ~ while

let i = 0;

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

 

do ~ while문이라는 것도 있다.

조건을 확인하기 전 한 번은 코드 블록을 실행하는 반복문이라고 한다.

조건이 거짓이더라도 최소 한 번은 실행되는 것이 특징이다.

 

📌 break와 continue

 

// break continue문은 for문과 함께 쓰인다

// break 반복문을 완전히 종료

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

//결과값은 0,1,2,3,4

//continue 현재 반복만 건너 뛰고 다음 반복으로 이동

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

//결과값은 0,1,2,3,4,6,7,8,9

 

break와 continue는 둘 다 반복문을 제어하는 역할을 하고 for문과 함께 쓰인다.

break는 조건에 해당하면 반복문을 완전히 종료하고,

continue는 조건에 해당하는 현재 반복만 건너 뛰고 다음 반복으로 이동한다.