[개발 공부 8일차] JS 포문을 여는 for문..

 

 

JavaScript의 기초 중에 기초... 오늘도 계속해서 배우는 중입니당... 재밌는데 일단 음... 공부량이 많아서 그런지 점점 사람이 초췌해져가는 것 같은 건 기분 탓이겠져?... 아임 오께이입니다... 공부란 즐겁고 재밌는 것.. 익숙함에 속아 소중함을 잃지 않겠습니다.....

 

아무튼 오늘도! 자바스크립트 원리를 이해해가며 강의를 들었다. 지금 블로그 작성 기준, 순공시간이 9시간을 넘겼다. 매일 순공 11시간 이상은 하려고 하는데 아직까지는 수월하다. 허리와 목 건강에 유의할 필요는 있는 듯하다,,,

 

 

< 목차  >

1. for문 원리 질문 및 이해

2. 금일 JS 문법 배운 내용

3. 금일 소감 및 내일 해야 할 일

 

 

1. for문 원리 질문 및 이해

 

 

오늘도 강의 왈랄랄라 듣다가 for문은 이해가 가지 않아서 어제의 지니어스였던.. 그리고 팀원이었던 분에게 질문을 드렸다. 

 

1) i++ 이거 꼭 넣어야 하는가?

그렇다. 안 그러면 for문의 i는 증가하지 않는다. for(i 값 초기화; i 제어문; i 증가) 이런 식으로 작성해야 한다.

 

 

 

 

2) 위 사진처럼 조건을 작성하면 무한루프가 도는데, 이유가 무엇이고 왜 안 되는가?

for(i 값 초기화; i 제어문; i 증가) i 제어문 부분에서 조건은 하나만 성립되고, 여러 개를 설정하더라도 가장 먼저 제시된 맨 앞 조건 1개만 성립된다.  따라서,  i <= 2의 조건만 성립되어 while문처럼 무한루프가 되는 것이다.

 

그리고 2 <= i를 할 거면 for(let i =2 ; i < 11; i++)로 작성해서 초기값을 2로 맞춰주는 편이 더 낫다.

 

[수정!] 튜터님이 답변을 정정해주셨다.

자바스크립트에서 복수의 조건은 작성된 의도대로 동작하지 않는다. 따라서 i >= 2 && i < 11와 같은 식으로 분리해서 작성해야 한다.

 

 

위와 같은 과정 때문에 무한루프가 발생한다.

 

 

[ 추가 질문 ] 그렇다면 결과값이 true 혹은 false일 때, 왜 1과 0으로 치환하는 것인가?

false < 11 의 경우에는 불린 타입(false) 와 넘버타입 (11)을 < 연산자로 계산하려고 하면 타입이 달라서 사실 계산할 수 없다. 그런데 자바스크립트는 이걸 자동으로 타입을 바꿔서 계산까지 해주는 기능이 있다. 그래서 false < 11 상황에 놓이게 되면 false를 0으로 바꾼다.

 

[Reference]

https://developer.mozilla.org/ko/docs/Glossary/Type_coercion

 

 

2. 금일 JS 문법 배운 내용

// 배열

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

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

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

// 2. 요소 접근
console.log(fruits[0]); // 결과값: 0번째인 사과가 출력됨
console.log(fruits[1]);
console.log(fruits[2]);

// 3. 배열 메소드
// 3-1. push
console.log("1 => ", fruits);

fruits.push("오렌지");
console.log("2 => ", fruits); // push한 요소가 추가돼서 출력됨

// 3-2.pop
console.log("1 => ", fruits);
fruits.pop();
console.log("2 => ", fruits); // 배열 끝에 있던 요소가 사라지고 출력됨

// 3-3. shift
console.log("1 => ", fruits);
fruits.shift();
console.log("2 => ", fruits); // 배열 맨앞에 있던 요소가 사라지고 출력됨

// 3-4. unshift (맨앞에 요소를 추가할 때 사용)
fruits.unshift("포도");
console.log("unshift => ", fruits);

// 3-5. splice (어떤 자리에 어떤 요소를 대신하게 할 때 사용)
fruits.splice(1, 1, "포도"); // (1자리에 1개 지우고 그 자리에 "포도"를 넣어달란 의미)
console.log(fruits);

// 3-6. slice (n번째 요소를 빼내서 반환하게 만들고 싶을 때 사용)
let slicedFruits = fruits.slice(1, 2); // 결과값: "포도"만 나옴
console.log(slicedFruits);



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

// 콜백 함수: 매개변수 자리에 함수를 넣는 것
// 1. forEach (선언한 것에 각각 매개변수를 실행함)
numbers.forEach(function (item) {
    console.log("item입니다 => " + item);
});


// 2. map (기존에 있던 배열을 가공해서 새로운 배열 생산해냄)
// 무조건 항상 원본 길이만큼이 return 됨
let newNumbers = numbers.map(function (item) {
    return item * 2; // item의 각각 2배씩 한 값이 출력됨
});

console.log(newNumbers);


// 3. fliter (필터링할 조건이 들어감. 새로운 배열 return)
// 조건에 해당하는 것만 리턴함
let filterdnewNumbers = numbers.filter(function (item) {
    return item !== 5
});

console.log(filterdnewNumbers);


// 4. find (조건에 맞춰 반환하는데, 맨앞에 하나만 반환함)
let result = numbers.find(function (item) {
    return item > 3;
});

console.log(result);

 

 

오늘은 이해가 딱 되지 않았던 것만 TIL에 남겨볼 생각이다. 주말에 다시 봐야지...

 

// 단축 속성명: property shorthand
// [중요!] key와 value명이 똑같으면 key: value 쓸 것 없이 한 번만 써도 된다

// key - value
// const obj = { name, age }; // 이렇게 써도 아래 문장과 동일
// const obj1 = { name: name, age: age}


// 전개 구문 = spread operator ([핵심] 선언해뒀던 걸 다 펼칠 수 있다)
// destructuring과 함께 가장 많이 사용되는 ES6 문법 중 하나!
let arr = [1, 2, 3];

let newArr = [...arr, 4];
console.log(arr);
console.log(newArr);

// 객체
let user = {
    name: "abc",
    age: 30,
}

let user2 = { ...user }

console.log(user);
console.log(user2);


// 나머지 매개변수(rest parameter) - ... 꼭 붙여주기!
function exampleFunc (a, b, c, ...args) {
    console.log(a, b, c);
    console.log(...args);
}

exampleFunc(1, 2, 3, 4, 5, 6, 7, 8);


// 템플릿 리터럴(Template Literal) (따옴표 대신 백틱 사용 가능!)
const testValue = "안녕하세요!";
console.log(`Hello World! ${testValue}`);
console.log(`
    Hello World!
        My name is JS!
        Please take care of me.
`)

 

 

아 옮기다  보니 생각났는데 <Template Literal>이 정확히 무엇을 의미하고 보통 어떻게 쓰이는지도 알아봐야겠다. 공부할 양이 많아서 정말 주말에도 빡세게 공부해야 할 듯하다. 특히 월요일에는 개인 과제까지 제출해야 하기 때문에 정말 그냥 미친 듯이 앉아서 코딩만 하고 꿈도 코딩으로 꾸는 정도로 해야겠다,,

 

저번 프로젝트 때에는 정말 며칠간 코딩하는 꿈꾸고, 알람 때문에 일어날 때에는 코딩 영감 같은 게 떠올라서 꿈인지 생시인지 모를 정도였다. 몰입한 나... 칭찬해 ★

 

 

 

3. 금일 소감 및 내일 해야 할 일

이번 1/1 신정에 산 정상에서 일출 보러 등산 간 것 빼고는 한 달 가량 운동을 안 해서 굉장히 찌뿌둥하다,, 얼른 강의든 과제든 급한 것 끝나면 가볍게라도 운동을 할 시간을 내야겠다. 그리고 연말이다 신정이다 해서 1년 회고하고 신년 계획 세우는 핑계로(물론 하긴 했다 다) 좀 쉬었는데 공부할 걸 그랬다,, 고새 해이해졌닝 -.-

 

 

내일도 자바스크립트 강의 이어서 쭉 내리 들어야 한다. 오늘은 지금 듣는 주차 전부 다 듣고, 오늘 웹개발 종합반 강의 볼 수 있는 기한 마지막날이라 전체적으로 2배속 해서 빠르게 1회 재청강 할 생각이다. 자바스크립트 듣기에도 시간이 부족하긴 하지만 어쩔 수 없지,, 기초 중요하니까

 

낼도 파이팅!!