TIL 5일차

주땡이·2023년 9월 7일

프리코스 2기

목록 보기

5/6

핵심 내용

함수 스코프, 화살표 함수
문(조건문, 반복문)
객체, 객체 메서드
배열, 배열 메서드

오늘 알게 된 내용

함수 스코프
1-1. 전역 스코프(global scope) : 전역 스코프에서 선언된 변수는 어디서든 참조 가능
```
let x = 10;

function printX() {
  console.log(x);
}

printX();   // 10
```
1-2. 지역 스코프(local scope) : 지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조할 수 있음
```
function printX() {
  let x = 10;
  console.log(x);
}

printX();   // Reference Error 발생함
```
1-3. 블록 스코프(block scope) : if문 내에서 선언된 변수는 해당 블록 내에서만 참조 가능
```
if (true) {
  let x = 10;
  console.log(x);
}

console.log(x);   // ReferenceError: x is not defined
```

화살표 함수
2-1. 화살표 함수 : 함수의 선언을 간결하게 하기 위함, but 함수 사용에 익숙해지면 사용하도록 하자
```
let add = (x, y) => {
  return x + y;
}

console.log(add(2, 3));   // 5
```
2-2. 한 줄 화살표 함수 : return문이 한 줄일 경우에만 작성 가능함
```
let add = (x, y) => x + y;

console.log(add(2, 3));   // 5
```
2-3. 매개변수가 하나인 화살표 함수 : 매개변수가 하나일 때만 괄호를 생략할 수 있음
```
let square = x => x * x;

console.log(square(3));   // 9
```

조건문

3-1. if문
(1) if문 : if문은 조건이 참인 경우에만 코드를 실행함
```
let x = 10;

if (x > 0) {
  console.log("x는 양수입니다.");
}
```
(2) if - else문 : 조건이 참인 경우엔 if문 안쪽의 코드를 실행, 거짓일 경우엔 else구문으로 넘어가서 else문 안쪽의 코드를 실행함
```
let x = -10;

if (x > 0) {
  console.log("x는 양수입니다.");
} else {
  console.log("x는 음수입니다.");
}
```
(3) if - else if - else문 : 여러 개의 조건을 순서대로 비교하며 코드를 읽어내려가다가 해당하는 조건에 맞는 코드를 실행함
```
코드를 입력하세요let x = 0;

if (x > 0) {
  console.log("x는 양수입니다.");
} else if (x < 0) {
  console.log("x는 음수입니다.");
} else {
  console.log("x는 0입니다.");
}
```

3-2. switch문 : 변수의 값에 따라 여러 경우(case) 중 하나를 선택하여 해당되는 코드를 실행함. default는 모든 경우에 맞지 않을 때 실행함

let fruit = "사과";

switch (fruit) {
  case "사과":
    console.log("사과는 빨간색입니다.");
    break;
  case "바나나":
    console.log("바나나는 노란색입니다.");
    break;
  case "오렌지":
    console.log("오렌지는 주황색입니다.");
    break;
  default:
    console.log("해당하는 과일이 없습니다.");
    break;
}

3-3. 삼항 연산자 : if문과 비슷한 역할을 하며, 조건이 참인 경우와 거짓인 경우 각각 다른 값을 반환함.
```
let age = 20;
let message = (age >= 18) ? "성인입니다." : "미성년자입니다.";
console.log(message);   // "성인입니다."
```

3-4. 조건문의 중첩 : 조건문 안에 또 다른 조건문을 사용하여 복잡한 조건을 판별할 수 있지만 가독성이 좋지 않으므로 꼭 필요한 경우가 아니면 사용하지 말자...

let age = 20;
let gender = "여성";

if (age >= 18) {
  if (gender === "남성") {
    console.log("성인 남성입니다.");
  } else {
    console.log("성인 여성입니다.");
  }
} else {
  console.log("미성년자입니다.");
}

3-5. 조건부 실행 : if문을 더 간결하게 쓰기 위하여 아래와 같은 방식으로 작성한다고 함. 최근에 많이 사용되는 구조라고 함
```
let x = 10;

(x > 0) && console.log("x는 양수입니다.");
```
3-6. 삼항 연산자와 단축 평가 : 변수가 존재하지 않을 경우(= 할당되지 않은 경우) ||연산자는 false를 반환하고 삼항 연산자에 따라 지정한 값을 기본값으로 지정한 후 반환함

주석 보려고 첨부한 내 코드

기술 매니저님 코드

3-7. falsy한 값, truthy한 값 :0/ 빈 문자열/ null/ undefined/ NaN/ false는 falsy한 값(false에 가까운), 그 외의 값들은 모두 truthy한 값

if (0) {
    console.log("hello");
}
if ('') {
    console.log("hello");
}
if (null) {
    console.log("hello");
}
if (undefined) {
    console.log("hello");
}
if (NaN) {
    console.log("hello");
}
if (false) {
    console.log("hello");
}

if (true) { // 무조건 실행될 코드
    console.log("hello");
}

반복문

1. for문
  (1) for문 : for문은 초기값, 조건식, 증감식 순서로 코드를 작성해야 함, 이를 통해 반복 횟수를 제어함, 배열과 for문은 짝꿍이다
```
for (let i = 0; i < 10; i++) {
  console.log(i);
}
```
  (2) 배열과 함께 사용하는 for문 : 대부분 배열의 요소 개수만큼 반복하는 코드를 작성하게 됨
```
let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {  //.length라는 배열 메서드 사용
  console.log(numbers[i]);
}
```
  (3) for ... in문 : 아래 코드는 객체의 프로퍼티를 순서대로 순서대로 접근할 수 있는 예제
```
let person = { name: "John", age: 30, gender: "male" };

for (let key in person) {
  console.log(key + ": " + person[key]);
}
```
1. while문 : 조건식이 참인 경우에만 코드를 반복해서 실행함
```
let i = 0;

while (i < 10) {
  console.log(i);
  i++;
}
```
1. do ... while문 : 일단 한 번은 코드를 실행한 후, 그 후에 조건식을 체크하여 반복 여부를 결정함
```
let i = 0;

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

break문 : 조건이 참일 때 break를 만나면 for문 밖으로 빠져나옴

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

1. continue문 : i가 참일 때 코드가 실행되지 않고 다음순서인 for문으로 넘어감
```
for (let i = 0; i < 10; i++) {
    if (i === 5) {
        continue 
    }
    console.log(i)
}
```

객체, 객체 메서드

1. 객체
  (1) 객체 생성 : 객체를 만들 때 중괄호({})를 사용하며 key(속성)와 value(값)를 (:)으로 구분함. 그리고! 각 key와 value는 꼭! ,(쉼표)로 구분해줘야함. 이거 빼먹기 쉬움
  (2) 생성자 함수를 사용한 객체 생성 : 생성자 함수를 사용하여 매개변수로 key값을 받아 객체를 여러개 생성할 수 있음
```
// 생성자 함수를 사용한 객체 생성
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 26, "여자");
```
1. 객체 속성 접근 : 객체의 속성에 접근할 땐 객체이름.키값
```
// ex)
console.log(person.name) 
```

객체 메서드
(1) Object.keys() : 객체의 key를 배열로 반환함
(2) Object.values() : 객체의 value를 배열로 반환함
(3) Object.entries() : 객체의 속성을 [key : value] 배열 형태로 반환함
(4) Object.assign() : 객체에서 일부 속성을 변경한 후에 새로운 객체를 생성하는 메서드.

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

// {} 빈 객체에 person 객체의 속성들을 복사함
// 속성 중 age 키에 해당하는 부분을 35로 변경하여 newPerson이라는 객체에 덮어씌움
let newPerson = Object.assign({}, person, { age: 35 });

console.log(newPerson);   // { name: "홍길동", age: 35, gender: "남자" }

(5) 객체 비교 : 객체를 비교할 땐 주소값까지 비교하는 ===연산자를 사용할 수 없기 때문에 객체를 문자열로 변환한 후 문자열 비교를 하는 JSON.stringify() 함수를 사용함. 메모리 관련해서 정리해 둔 것도 업로드 할 예정.

let person1 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let person2 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

console.log(person1 === person2);   // false
console.log(JSON.stringify(person1) === JSON.stringify(person2));   // true

(6) 객체 병합 : ...(전개 연산자)를 사용하여 객체를 병합할 수 있음. 원본 객체를 수정하지 않고 새로운 객체에 객체나 객체 속성을 병합하여 생성함

let person1 = {
  name: "홍길동",
  age: 30
};

let person2 = {
  gender: "남자"
};

let mergedPerson = {...person1, ...person2};

console.log(mergedPerson);   // { name: "홍길동", age: 30, gender: "남자" }

배열

1. 배열
  (1) 배열 생성 : 배열을 만들 땐 대괄호([])를 사용하고 각 요소는 쉼표(,)로 구분함
```
let fruits = ["사과", "바나나", "오렌지"]
```
  (2) 배열의 크기 지정 : new Array()를 사용하여 배열의 크기를 지정함
```
let numbers = new Array(5) // 크기가 5인 배열
```

배열 요소 접근 : 배열의 요소에 접근할 땐 대괄호 안에 인덱스 값을 넣음. 배열의 인덱스는 0번째부터 카운트 함.

let fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]);   // "사과"
console.log(fruits[1]);   // "바나나"
console.log(fruits[2]);   // "오렌지"

1. 배열 메서드
  (1) push() : 배열의 마지막 인덱스 요소 뒤에 요소를 추가하는 메서드
  (2) pop() : 배열의 마지막 인덱스 요소 뒤에 요소를 삭제하는 메서드
  (3) shift() : 배열의 0번째 요소를 삭제하는 메서드
  (4) unshift() : 배열의 0번째 요소 앞에 요소를 추가하는 메서드
  (5) splice() : 배열의 요소를 삭제하고 그 자리에 새로운 요소를 추가할 수 있는 메서드. 이 메서드는 원본 배열을 직접 수정하므로 원본 배열을 변경하지 않고 새로운 배열을 생성하려면 splice() 메서드를 사용해야함.
```
let fruits = ["사과", "바나나", "오렌지"];

fruits.splice(1, 1, "포도"); 
// .splice(수정을 시작할 인덱스, 삭제할 요소의 수, "추가할 요소") 

console.log(fruits);   // ["사과", "포도", "오렌지"]
```
  (6) slice() : 배열의 일부분을 새로운 배열로 만드는 메서드. 원본 배열을 변경하지 않고 새로운 배열을 반환하기 때문에 원본 배열은 그대로 유지됨.
```
let fruits = ["사과", "바나나", "오렌지"];

let slicedFruits = fruits.slice(1, 2);  
// .slice(복사를 시작할 인덱스, 복사를 종료할 인덱스로 이 인덱스의 요소는 포함되지 않음)

console.log(slicedFruits);   // ["바나나"]
```
  (7) forEach() : 배열의 각 요소에 대해 주어진 함수를 실행함. 배열을 반복(iterate)하면서 각 요소에 대한 처리나 작업을 수행할 때 사용함
```
let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
  // 배열로 반환하지 않고 각 요소를 순서대로 출력함
  // 1
  // 2
  // 3
  // 4
  // 5
});
```
  (8) map() : 배열의 각 요소에 대해 주어진 함수를 호출함. 그 결과를 가지고 원본 배열은 변경하지 않고 새로운 배열로 반환함(forEach()와 다른점)
```
let numbers = [1, 2, 3, 4, 5];

let squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers);   // [1, 4, 9, 16, 25]
// 요소를 순서대로 배열로 반환함
```
  (9) filter() : 주어진 함수의 조건을 만족하는 모든 요소를 가지고 새로운 배열을 생성함. 배열을 필터링하고 원하는 요소만 포함된 새로운 배열을 만들 수 있음.
```
let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers);   // [2, 4]
```
  (10) reduce() : 배열의 각 요소에 대해 주어진 함수를 실행하여 하나의 값(누적된 값)을 반환하는 데 사용. 배열의 요소를 순회하면서 값을 누적하거나 요약하는 작업을 수행할 수 있음. 배열의 요소를 순회하면서 값을 누적하거나 요약하는 작업을 수행할 때 유용함. 배열의 요소를 하나로 합치거나 평균값 등을 계산하는 데 활용됨.
```
const numbers = [1, 2, 3, 4, 5];

// 배열의 모든 요소를 더한 결과를 계산
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue; 
  // 누적값(accumulator)은 초기값(initialValue)으로 0을 사용
  // 현재 반복중인 요소(currentValue)를 누적값에 더한 값을 반환함
}, 0);

console.log(sum); // 15
```
  (11) find() : 주어진 조건을 만족하는 첫 번째 요소를 반환함. 배열에서 원하는 요소를 검색할 수 있음
```
let numbers = [1, 2, 3, 4, 5];

let foundNumber = numbers.find(function(number) {
  return number > 3;
});

console.log(foundNumber);   // 4
```
  (12) some() : 주어진 조건을 만족하는 요소가 배열 내에 "하나 이상" 존재하는지 여부를 확인하여 조건을 만족하는 요소가 하나라도 존재하면 true를 반환, 그렇지 않으면 false를 반환함
```
let numbers = [1, 2, 3, 4, 5];

let hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});

console.log(hasEvenNumber);   // true
```
  (13) every() : some() 메서드와는 달리 모든 요소가 조건을 만족해야 true를 반환하고, 하나라도 조건에 만족하지 않는 요소가 있으면 false를 반환함
```
let numbers = [2, 4, 6, 8, 10];

let isAllEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0;
});

console.log(isAllEvenNumbers);   // true
```
  (14) sort() : 배열을 정렬할 때 사용함. 주로 숫자 배열은 오름차순, 문자 배열은 영어는 알파벳 순, 한글은 가나다 순.
  (15) reverse() : 배열 요소의 순서를 뒤집어서 역순으로 정렬하는 메서드. sort()의 반대라고 생각하면 됨

오늘 어떤 문제가 있었는지

어떻게 해결했고, 무엇을 시도했는지

주땡이

내가 보려고 만들었습니당

이전 포스트

TIL 4일차

다음 포스트