개발일지📝_08

💡 이번 주에는 객체 타입에 해당하는 함수, 배열 등에 대해 알아보았으며 문자열과 배열의 프로퍼티 및 메서드에 대해서도 살펴보았다.

새로 배운 내용🌼

✔ 조건문
: 조건문은 주어진 조건식에 따라 코드 블록의 실행을 결정함
▪ if ... else문

👉동일한 작업을 if 문 대신 삼항 조건 연산자로 할 경우

: 조건에 따라 단순히 값을 결정하여 변수에 값을 할당할 경우, 삼항 조건 연산자를 쓰는 것이 가독성에 좋음. 하지만 조건에 따라 실행해야 할 내용이 많을 경우, if ... else문을 쓰는 편이 가독성에 나음.

▪ switch문

let month = 5;
let monthName;

switch (month) {
  case 1:
    monthName = "1월";
    console.log("1");
    break;
  case 2:
    monthName = "2월";
    console.log("2");
    break;
  case 3:
    monthName = "3월";
    console.log("3");
    break;
  case 4:
    monthName = "4월";
    console.log("4");
    break;
  case 5:
    monthName = "5월";
    console.log("5");  // 5
    break;
  case 6:
    monthName = "6월";
    console.log("6");
    break;
  default:
    monthName = "유효하지 않은 값입니다";
}

console.log(monthName); // 5월

✔ 반복문
▪ break문은 조건식의 평가 결과가 true면 코드 블록을 탈출함

✔ 함수
: 입력 input 을 받고 결과 output를 내놓음

// 함수 선언문
// 함수 정의
function add(x, y) {
	return x + y;
}

// 함수 호출
add(5, 20); // 25 

▪ 함수 내부로 입력을 전달받는 변수를 매개변수 parameter,
입력을 인수 argument, 출력을 반환값 return value 이라고 함
▪ 함수는 객체 타입의 값, 따라서 다음과 같이 함수 리터럴 생성할 수 있음 (리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기 방식)

// 함수 표현식
// f라는 변수에 함수 리터럴을 할당
let f = function add(x, y) {
  return x + y;
};

f(5, 20); //25 

👉함수 리터럴과 함수 선언문은 형태가 동일하지만, 차이가 있음. 함수 리터럴은 함수 이름을 생략할 수 있고, 함수 선언문은 함수 이름을 생략할 수 없음.

📌함수를 정의하는 4가지 방식
1. 함수 선언문

// 함수 선언문
function add(x, y) {
	return x + y;
}

2. 함수 표현식

// 함수 표현식
// 변수에 함수 리터럴을 할당
let f = function add(x, y) {
  return x + y;
};

3. Function 생성자 함수

let add = new Function('x', 'y', 'return x + y');

4. 화살표 함수

let add = (x, y) => x + y;

add(5, 20); // 25

👉화살표 함수는 function 키워드 대신 화살표 ⇒ 를 이용해 좀 더 간략한 방식으로 함수를 선언함

✔ 배열 Array
: 배열은 객체 타입의 값
-> 객체는 프로퍼티와 메서드의 집합체

🔗 배열의 프로퍼티

: 프로퍼티는 key와 value의 포맷을 가짐. 배열에 들어있는 요소는 프로퍼티 value이며, 각각의 요소에는 배열에 들어있는 순서(인덱스 index)대로 key값이 주어짐.

▪ 배열에는 length라는 프로퍼티도 있는데 length 프로퍼티는 배열의 길이, 즉 배열에 들어있는 요소의 수를 나타냄

🔗배열의 메서드

: 자바스크립트는 배열을 다룰 때 유용한 다양한 빌트인 메서드를 제공함. 매우 多!!

✔ 문자열 String
: 문자열 String은 객체 타입
-> 객체는 프로퍼티와 메서드의 집합체

🔗 문자열의 프로퍼티

: 띄어쓰기한 공백을 포함하여 각 문자마다 인덱스를 프로퍼티 값으로 갖고 있음

▪ length라는 프로퍼티도 있는데 length 프로퍼티는 문자열의 길이를 프로퍼티 값으로 가짐

🔗문자열의 메서드

: 이외에도 매우 多!!

과제

✍문제풀이

Q1. 수정이의 하루 일과는 어떻게 흘러갈까요?

🔽이 문제는 반복문 중 for문을 사용하여 풀어보았다. for문에서는 배열로 나타낸 schedule의 인덱스 0번부터 schedule 배열의 전체 길이까지 i를 증가시키는 동작을 반복하는데 그 안에 포함된 if 문이 true 인 경우 코드 블록을 실행한다. if 문에서 schedule.place의 i번째 요소가 "이불 속"이면 push를 통해 schedule.behavior을 요소 result에 추가함으로써 해당결과인 ["늦잠자기","넷플릭스랑 좋은 시간 보내기","쿨쿨"] 이 콘솔창에 나타나는 것이다.

Q2. 우리 반에 수정이는 몇 명일까요?

// 아래 사진에서 let classMates에 해당하는 부분

let classMates = [
  "지원",
  "유진",
  "아린",
  "재윤",
  "지원",
  "수정",
  "예은",
  "유미",
  "하영",
  "지원",
  "수정",
  "서현",
  "아진",
  "다혜",
  "수정",
  "해인",
  "나연"
];

🔽classMates 배열의 전체길이까지 classMates 배열의 인덱스를 증가시키며 만약에 classMates 배열 요소 중에 "수정"이 있으면 result 값(초기 result 값은 0으로 설정해놓았음)을 하나씩 증가시켜 콘솔창에 결과가 나타나도록 for 문과 그 안에 if문을 사용하여 문제를 풀어보았다.

Q3. 간장 공장 공장장에는 장이 몇 번?

🔽split 메서드는 대상 문자열에서 첫번째 인수로 전달한 문자열 또는 정규 표현식을 검색하여 문자열을 구분한 후 분리된 각 문자열로 이루어진 배열을 반환한다. 이 문제에서는 "간장 공장 공장장"이라는 값이 할당된 str에서 "장"이라는 문자열이 총 몇번 나왔는지 물어보고 있으므로 split 메서드를 사용하는 것이다. for 문을 사용하여 반복실행하도록 하였고 그 안에 if 문을 사용하여 조건이 맞는 경우 result값이 하나씩 증가하여 콘솔창에 뜨도록 하였다.

Q4. 배열의 짝수번째 요소에만 더하기 2하기

🔽배열의 인덱스는 0부터 시작하므로 arr의 짝수번째 요소는 배열 인덱스의 경우 홀수번째에 해당하는 요소를 말한다. 배열 인덱스 1번째 요소, 3번째 요소가 arr의 2번째 4번째 요소를 의미하는 것이다. 따라서 해당 내용을 if (i % 2 === 1) 로 배열의 인덱스 i를 2로 나눈 나머지가 1인 즉, 배열의 홀수번 인덱스에 해당하는 요소에 2를 더하도록 arr[i] += 2를 한 것이다.

Q5. 오이는 빼주세요!

🔽sandwich 에 있는 배열 요소들 중 "오이"가 아닌 것들만 result에 포함되도록 하기 위해 배열 인덱스 i를 0번부터 sandwich 배열의 총 길이까지 증가시키며 만약에 sandwich의 i번째 요소가 오이가 아닐 경우 result에 포함되도록 if (sandwich[i] !== "오이") result.push(sandwich[i])를 하였다.

느낀점

조건문과 반복문에 관련된 내용을 들을때 다른 수업에서 들어본 if else문, switch문, for문과 while문에 대해서 다시 들으며 복습할 수 있었고, 이외에 다양한 새로운 내용들을 알아갈 수 있어서 좋았다. 웹 페이지에서 개발자도구(F12키)로 들어가면 콘솔창을 이용하여 Codesandbox에서처럼 실습을 할 수 있다는 것도 새롭게 알게되었고 직접 써보니 신기했다. 객체타입의 프로퍼티와 메서드가 어떻게 표현되어있는지 배열과 문자열을 웹 페이지의 콘솔창에 작성하여 직접 확인할 수 있었다. 정말 다양한 메서드가 있다는 점에 놀라웠고 처음 들어보는 내용이라 흥미로웠다. 주어진 문제를 풀어보는 과제를 하면서 아직은 자바 스크립트 문법을 이용하여 다양한 방법으로 문제를 풀어나갈 실력이 안되며 연습이 필요하다는 것을 알 수 있었다. 그래도 해답의 풀이과정을 보면서 이 부분은 왜 이렇게 쓰인 것인지 고민해보며 배웠던 내용을 떠올릴 수 있었고 for문과 if문의 쓰임에 대해 더욱 알아갈 수 있었다. 앞으로 시간이 날때마다 틈틈이 자바 스크립트 문법에 관한 실습을 하여 익숙해지도록 해야겠다:-)