JavaScript 문법 종합반 - 1주차 (2)

새벽로즈·2023년 10월 12일
TIL내일배움캠프웹개발자바스크립트프론트엔드
0

TIL

목록 보기
24/72
post-thumbnail
본 과정은 내일배움캠프 웹개발 사전캠프로 지급받은 강의의 내용을 바탕으로 정리한 글입니다.

조건문 if, else if, switch

특정 조건이 해당하는 경우 하위의 로직을 제어 할수 있음
1. if문

let x = 10;
if(true 또는 false)){
	//실행할 코드
}
  • y의 길이가 5보다 크다면 출력해줘
let y = "hello world"
if(y.length >= 5){
  console.log(y.length);
}
  1. if else문
let z = 10;
if(z > 0){
  console.log('x는 양수입니다.');
} else{
console.log('x는 음수입니다.');
}

☞ 참인 경우 윗줄이 출력되고 참이 아닌경우 아래줄이 출력됨

  1. if else if문
    차례대로 검증하면서 조건을 달 수 있음
if(조건1){

}
else if(조건2){

}
else{
  
}

switch


let fruit = "사과";

switch (fruit) {
  case "사과":
    console.log("사과입니다.");
    break;
  case "바나나":
    console.log("바나나입니다.");
    break;
  case "키위":
    console.log("키위입니다.");
    break;
  default:
    console.log("아무것도 아닙니다.");
    break;
}

☞ 변수의 값에 따라 여러개의 경우(case) 중 하나를 선택하는 조건문
☞ case문을 쓸때 꼭 break를 명시해줘야한다. (하지않으면 다 실행됨)
☞ defalut는 아무것도 해당이 안될때 출력됨

조건문 중첩

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

//미성년자 구분

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

조건문 축약 (조건 && 사용)

let x = 10; 
(x > 0) && console.log('x는 양수입니다.'); // if문을 축약할 수도 있음

삼항 연산자와 단축평가 (조건 || 사용)

let y; //선언은 되었으나 할당 안됨
let z = y || 20; //y에 할당이 되어있지않으면 20을 기본값으로 세팅해줘.
console.log(z);

falsy한 값과 truthy한 값

true에 가까운지 false에 가까운지 알 수 있음.

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"); //이것만 true
}

☞ true를 제외하고는 모두 false라서 실행이 안됨

객체

key value pair로 이루어져있음.
하나의 변수에 여러개의 값을 넣을 수 있음.

  1. 기본적인 객체 생성방법
let person = {
  name : '홍길동',
  age : 30,
  gender : '남자',
  
}
  1. 생성자 함수를 이용한 객체 생성방법
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 25, "여자");

☞ 객체를 한번에 많이 생성할 수 있는 장점이 있음.

객체의 접근 방법

console.log(person.name);

☞ 이런식으로 이름 출력이 됨.

객체 메소드

  1. Object.keys() : key를 가져오는 메소드 
let keys = Object.keys(person);
console.log(keys);

☞ ["name", "age", "gender"]으로 출력됨

  1. Object.values() : value를 가져오는 메소드
let values = Object.values(person);
console.log(values);

☞ ["홍길동", 30, "남자"]로 출력됨

  1. Object.entries() : 객체의 속성 이름과 속성 값들을 2차원 배열로 반환함
let entries = Object.entries(person);
console.log(entries);
  1. Object.assign() : 객체 복사
let newPerson = {};
Object.assign(newPerson ,person);
console.log("newPerson =>", newPerson);

☞ newPerson => { name: '홍길동', age: 30, gender: '남자' } 로 출력됨

  1. 중간에 데이터 일부를 바꿀때 
let newPerson2 = {};
Object.assign(newPerson2 ,person, **{age : 31}** );
console.log("newPerson =>", newPerson2);   
// { name: "홍길동", age: 35, gender: "남자" }

☞ newPerson => { name: '홍길동', age: 31, gender: '남자' } 로 출력됨

객체 비교

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

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

console.log(person1 === person2);   // false

☞ true가 아닌 false가 나온느 이유는 객체는 별도의 메모리에 저장하고 별도 공간에 대한 주소를 저장하기 때문에 불일치가 뜸, value를 저장하는것이 아님

그럼에도 불구하고, 꼭 비교를 하고싶다면 문자열화를 시키는 방법이 있음

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

☞ 문자열로 변환을 시키기 때문에 동일(true)하다고 나올수 있음.

객체 병합

각각 key가 다를때 모두 해체해서 합치는 방법이 있음.
...(스프레드 오퍼레이터)을 이용하면 됨.

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

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

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

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

배열

  • 순서가 매우 중요함
  • 순서는 0부터 시작함
  1. 배열의 생성
let fruits = ["사과", "바나나", "오렌지"];
  1. 배열의 크기 지정
let numbers = new Array(5);

☞ 배열의 크기를 지정할 수 있음.

배열의 요소 접근

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

☞ 인덱스번호를 입력하면 해당하는 순서에 있는 요소가 출력됨

배열의 메소드

  1. 배열에 추가하기 push
let fruits = ["사과", "바나나"];
fruits.push("오렌지");
console.log(fruits);

☞ [ '사과', '바나나', '오렌지' ]로 출력됨

  1. 배열에 삭제하기 pop
let fruits3 = ["사과", "바나나", "오렌지"];
fruits.pop();
console.log(fruits3);   // ["사과", "바나나"]

☞ 마지막 요소가 삭제됨

  1. 배열에 삭제하기 shift
javascriptCopy code
let fruits = ["사과", "바나나", "오렌지"];
fruits.shift();
console.log(fruits);   // ["바나나", "오렌지"]

☞ 맨처음 요소가 삭제됨

  1. 배열 맨앞에 추가하기 unshift
let fruits = ["바나나", "오렌지"];
fruits.unshift("사과");
console.log(fruits);   // ["사과", "바나나", "오렌지"]

☞ 맨처음 부분에 추가됨

  1. 배열 교체하기 splice
let fruits = ["사과", "바나나", "오렌지"];
fruits.splice(1, 1, "포도");
console.log(fruits);   // ["사과", "포도", "오렌지"]

☞ 시작하는 범위부터 끝나는 범위까지 지정하고 바꿀 데이터를 입력한다. 그러면 바나나라는 데이터 대신 포도로 교체됨

  1. 배열 추출하기 slice 
let fruits6 = ["사과", "바나나", "오렌지"];

let slicedFruits = fruits6.slice(1, 2);

console.log(slicedFruits);   // ["바나나"]

☞ 시작범위랑 끝나는 범위만 지정하면 그 지정된 데이터가 출력됨

forEach 메소드

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

  • 매개변수에 함수를 넣는 것을 콜백함수라 부름
    numbers.forEach(function(item){
    console.log()})

  • forEach는 배열numbers의 모든 요소를 출력함

map 메소드

let numbers = [1, 2, 3, 4, 5];

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

console.log(squaredNumbers);   // [1, 4, 9, 16, 25]

☞ 기존배열을 가공해서 새로운 배열로 생산해내는 역할임, 반드시 return이 필요함.
☞ 항상 원본 배열의 길이만큼 return 됨

filter 메소드

let numbers2 = [1, 2, 3, 4, 5];

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

console.log(filteredNumbers);

☞ 필터링할 조건에 해당하는 것만 출력함, 5만 출력됨

find 메소드

let numbers5 = [1, 2, 3, 4, 5];

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

console.log(result);

☞ 리턴문을 통해 조건에 맞는것만 출력함

반복문

  1. for 문
// 0부터 10까지 수 중에서 2의 배수만 출력하기

for (let i = 0; i < 11; i++) {
  if (i >= 2) {
    if (i % 2 == 0) {
      console.log(i);
    }
  }
}
  1. for in 문
let person = { name: "John", age: 30, gender: "male" };

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

☞ person 안의 key에 접근이 가능함

while 문

let a = 3;
while (a < 100){
  if(a % 5 === 0 && a >= 5){
    console.log(a);
  }
  a++;
}

☞ 조건이 참이면 반복한다.

do while 문

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

☞ do while문은 일단 한 번은 코드를 실행하고, 그 후에 조건식이 맞으면 반복한다.

for break

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

☞ break는 반복을 종료한다. 그래서 4까지 출력되고 종료된다.

for continue

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

☞ for문과 함께 continue문을 사용하여 5를 제외한 0부터 9까지의 숫자를 출력함

오늘의 한줄평 : 배열의 메소드 부분이 조금 어려웠지만 어느정도 개념은 잡은 것 같다.

profile
새벽로즈
귀여운 걸 좋아하고 흥미가 있으면 불타오릅니다💙 최근엔 코딩이 흥미가 많아요🥰
이전 포스트

JavaScript 문법 종합반 - 1주차 (1)

다음 포스트

JavaScript 문법 종합반 - 2주차

0개의 댓글