[본 캠프 8일차] 1주차 숙제 + JavaScript 문법 종합반 강의 2주차

어제 제대로 이해를 못한 1주차 강의 숙제 다시 뜯어보기

 

1. 문자열 연습하기

대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다.
예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. 

 

s	answer
"pPoooyY"	true
"Pyy"	false

 

function solution(s) {
  var answer = true;

// 1. s (pPoooyY) 문자열을 모두 대문자로 통일한다.(바꾼다)
  s = s.toUpperCase(); // 문자열 s를 = s.toUpperCase(); 대문자로 바꿔준다

// 2. for 문을 통해서 문자열의 요소 하나하나씩을 비교
// 0 이라는 숫자를 지정해두고, p 와 일치하면 +, y와 일치하면 - 로 바꿔 마지막에 0이 되면 p와 y가 같다.
  var num = 0;
    for (var i = 0; i < s.length; i++) {
     if(s[i] === 'P') { // 만약에 s라는 문자열 안에 i 번째 요소가 대문자 'P'면 num을 ++ 해준다. (위에 대문자로 통일)
          num++; 
     } 
     if(s[i] === 'Y') {
          num--;        // 이러면 PPOOOYY 는 ++OOO-- 가 되는 것이다.
     }
  }
  if (num === 0) {
     answer = true;   // 이 부분은 맨 위에 선언해놔서 생략해도 된다. 혹은 맨 위를 삭제해도 된다.
  } else {
     answer = false;
  }
  return answer;
}

 

2. 반복문, 조건문 연습하기

어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다.
실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.

 

absolutes	signs	result
[4,7,12]	[true,false,true]	9
[1,2,3]	[false,false,true]	0

 

function solution(absolutes, signs) {
    let answer = 0;   // 1. return 해야 하는 answer 생성
    // 2. 두 배열을 비교해 가면서 값을 더하거나 빼줄 것
    for (let i = 0; i < absolutes.length; i++) {    // 부호에 따라 처리(+, -)
        if (signs[i] === true) {    // signs에 i번째 요소가 true 면
            answer += absolutes[i];    // answer 에 absolutes[i] 번째 요소를 더해라
        } else if (signs[i] === false) {  // 아니면 만약 signs에 i번째 요소가 false 면
            answer -= absolutes[i];    // answer 에 absolutes[i] 번째 요소를 빼라
        }
    }
    return answer;
}

 

걷기반 실습

 

문자열 변수 `greeting` 과 `name` 을 합쳐 ‘Hello World’를 출력해보세요.
중간에 공백(띄어쓰기)도 구현해보세요!

const greeting = "Hello";
const name = "World";

let result = greeting.concat(' ', name); 
console.log(result) // "Hello World" 출럭

* concat () 문자열 기능을 사용하여 결합을 했고, 매개변수 위치에 공백을 추가하여 구현하였습니다.

1. js 파일을 만들어 사자(lion) 객체를 만들어보세요.
   대사 속성을 ‘하쿠나마타타’를 출력하는 함수로 바꿔보세요!
   
   const lion = {    name: "심바",
                            age: 3,
                            main: true,
                            line: function () {
                                    return "하쿠나마타타"
       }
   }
   console.log(lion.line());
   
   * 대사를 line 으로 대체하여 사용했고, 처음엔 대사 속성을 함수로 어떻게 바꾸는지 몰랐는데, 함수=function 이면서,
   function (input) {output} 이 한 세트인걸 알았고, 매개변수에 "하쿠나마타타"가 들어가야 출력이 된다는 걸 이해했다. 근데 또 비슷한 문제 나오면 얼타지 않을까 싶다.
   
   
2. 문자열 sentence 변수의 “Javascript” 를 “Coding”으로 바꿔주세요.
    
   const sentence = "Learning JavaScript is fun!";
   const newSentence = sentence.replace("JavaScript", "Coding");
   console.log(newSentence); // "Learning Coding is fun!" 출력
   
   * replace() 기능을 사용하여 원하는 부분만 수정
   
   
3. 실습 문제 2번에서 작성한 lion 객체를 다시 사용합니다.
   incrementAge 함수의 내용을 채워주세요.
    - 사자 객체의 나이를1더해줍니다.
    - 변경된 사자 객체를 반환합니다.
   
   // 문제 2번의 사자 객체를 가져옵니다.
    const lion = {
       name: "심바",

       age: 3,

       main: true,

       line: "하쿠나마타타"

   }
   
   // 나이를 추가하는 함수입니다.
   // 함수 실행 이후 사자의 현재 나이를 출력합니다.
   
   function incrementAge(lion) {

   ...  return lion.age += 1;   // 위 사제 객체에서 age 라는 요소를 return 한 뒤 += 1 추가한다

   }
   

   console.log(incrementAge(lion));
   
   // 사자에 새로운 속성을 추가하는 함수를 만들어보세요! (ex. 다리: 4개)
   
   let newlion = (Object.assign(lion, { leg: "4개" }));  // assign 객체 메소드를 사용하여 복사 붙혀넣기를 한다.

   console.log(newlion)                                             // lion 이라는 객체에 {leg: "4개"} 다리가 4개라는 요소를 추가.

 

git

 

$ git commit -m '진짜 최종?'
On branch main
nothing to commit, working tree clean

 

// 다른 브랜치에 최신화된 파일이 있어서 pull 을 해와야 한다.

// 나같은 경우 main 에 저장하고 싶었는데 homework 라는 브랜치에 최신화가 되있어서 pull 을 해와서 수정했다.

// 처음엔 방법을 몰라서 rebase 를 했는데 그것도 안돼서 다시 처음부터 add > commit > pull homework 를 해서 수정했다

 

JavaScript 문법 종합반 2주차 강의

1. 각종 es6 문법

2015년도에 발표된 JavaScript 버전 중 하나

 

● let, const 

 - 기존 변수 선언을 위해 존재하던 var 을 대체해서 나온 변수 선언에 사용 되는 키워드

let : 변수를 선언

const : 상수를 선언

 

● arrow function 

 - 함수 선언하는 방법은 기존 2가지가 있었는데, 화살표 함수가 생겼다.

function add () {

}

let add = function () {

}

 

let add = (x) => {

    return 1;           // return 문이 한줄인 경우 {중괄호} 생략 가능

}

let add = x => 1;  // 그냥 괄호도 생략 가능.

 

● 삼항 연산자

- 조건 ? true 인 경우 : false 인 경우

console.log(true ? "참" : "거짓") / 참

console.log(false ? "참" : "거짓") / 거짓

console.log(1 === 1 ? "참" : "거짓") / 참

console.log(1 !== 1 ? "참" : "거짓") / 거짓

 

● 구조분해할당 : destructuring (de + structure + ing)

                            de = not, structure = 구조

- 구조를 분해해서 각각 다 할당한다.

- 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해준다.

1. 배열의 경우
   - let [value1, value2] = [1, "new"] //  1 = value1,  "new" = value2 배열을 분해해서 그 값을 변수에 담는다.
   - let arr = ["value1", "value2", "value3", "value4"];
     let [a, b, c, d=4] = arr;   // value1 value2 value3 4
   
   
2. 객체의 경우 
   let {name, age} = {
       name: "abc",
       age: 30,
   }
   
   
3. 새로운 이름으로 할당
   let user = {
      name: "abc",
      age: 30,
   };
   console.log("newName => ", newName);
   console.log("newAge => ", newAge); 
   
   let  {name, age, birthday="today" } = user;
   console.log(name); // abc
   console.log(age); // 30
   console.log(birthday); // 변수 자리에 today 는 초기값으로 위쪽에 선언하면 바로 덮어 씌워진다.

 ● 단축 속성명 : property shorthand

const name = "abc";

const newAge = "30";

// 왼쪽은 key , 오른쪽은 value

const obj = {
      name: name, // 오른쪽은 데이터, 변수로도 사용가능해서 같을 시, 오른쪽 생략가능

      age: newAge

}
// 만약 age 도 value와 같으면 생략가능
// const obj = { name, age }; 배열 같지만 객체이다. 단축 속성명을 사용한거다.

 

● 전개 구문 : spread operator

// destructuring 과 함께 가장 많이 사용되는 es6 문법 중 하나
// 이 배열 구조를 벗겨버리고 덮어씌워야 할 때 쓴다

let arr = [1, 2, ,3]; 
let newArr = [...arr, 4]; // 1 2 3 4

// 전개 구문 객체 적용

let user = {
    name: 'abc',
    age: 30,

}

let user = { ...user } 

 

● 나머지 매개변수 (rest parameter)
- ...args : 나중에 추가될 수도 있다라고 비워놓으라는 것과 비슷하다
function exampleFunc (a, b, c, ...args) {

  console.log(a, b, c);
  console.log(...args); 

}

exampleFunc(1, 2, 3, 호출); 
// 출력하면 1, 2, 3 만 뜨는데 나중에 호출에 4, 5, 6, 7 을 넣으면 함수에 들어있는걸로 호출된다.
// console.log(args); ...을 생략하면 배열로 나온다. [4, 5, 6, 7]

 

● 템플릿 리터럴 (Template Literal)

` ` : 자바스크립트나 연산도 들어갈 수 있다.
const testValue = "안녕하세요!"; 

console.log(`Hello World ${testValue}`); // 백틱을 입력하면 기능은 똑같이 나오지만 추가 기능이 있다. 

console.log(`
    Hello
          My name is JavaScript

          Nice to meet you
`)

이런식으로도 사용 가능하다 활용범위가 상당히 넓어 굉장히 많이 쓰인다. 중요

 

2. 일급 객체로서의 함수

- 자바스크립트에서 함수는 일급 객체(first-class object) 라고 한다.

- 일급 객체 (함수)는  다른 객체들이랑 일반적으로 똑같다.

- 함수를 매우 유연하게 사용할 수 있다.

1. 변수에 함수를 할당할 수 있다.
   // 함수가 마치 값으로 취급된다.
   // 함수가 나중에 사용될 수 있도록 조치가 되었다.
   const sayHello = function () {
        console.log('Hello!');
   }
   
   
2. 함수를 인자로 다른 함수에 전달할 수 있다.
    - 콜백함수 : 매개변수로써 쓰이는 함수
    - 고차함수 : 함수를 인자로 받거나 return 하는 함수
   
   
3. 함수를 반환할 수 있다.
   function createAdder(num) {
      return function (x) {
          return x + num;
      };
   } 
   const addFive = createAdder(5);
   console.log(addFive(10));
   
   const addFive = function (x) {
     return x + 5;
   };
   15
   // 너무 열받네 왜 이렇게 하는건데 처음부터 이렇게 쓰지 고차함수  
4. 객체로써의 함수 (위에 걷기반 실습 1번문제에 사용)
   const person = {
       name: 'John',
       age: 31,
       isMarried: true,
       sayHello: function () {
        // console.log("Hello, My name is " + this.name);
        // console.log(`Hello, My name is ${this.name}`); // 빽틱 사용, this 사용
        // sayHello: () => { console.log(`Hello, My name is ${this.name}`); // 화살표 함수 사용, 빽틱 사용,
                                                                                                                 // 화살표 함수는 this 적용 안함 undefined 나옴
       },
   };
   person. sayHello();
   
   
5. 배열의 요소로 함수를 할당
   

   

6. 다른 예제

 

Map 소개 및 예시코드 연습

다음 시간에..

 

진짜 최대한 강의 들으면서 같이 TIL 로 손글씨 써가면서 이해하려고 엄청 노력하고 있는데, 아예 이해가 안되서 답은 복습인 것 같다. 100번 1000번 들으면서 이해해야지 내꺼가 될 것 같은데 시간이 부족해서 할 수 있을지 모르겠다. 나만 이런게 아닌 것 같은데 어떻게 벌써 3주차 4주차 강의를 다 듣고 이해하셨는지 모르겠다.. 진짜 현타 욕 나올정도로 쌔게 온다.