15일차 - Javascript 문법(2) 조건문,객체,배열,반복문

이상민·2024년 8월 13일

TIL

목록 보기
14/50

조건문(if, else if, else, switch)

if문

1. 기본적인 if문

let x = 10;
// if(true 또는 false 가 나올 수 있는 조건)
if (x > 0) {
  console.log("x는 0보다 큰 수입니다.");
}
//if문 연습
let y = "hello world";
// y의 길이가 5보다 크거나 같으면 길이를 console.log로 출력해보기
if(y.length >= 5) {
 console.log(y.length);
}

2. if-else 문

let x = -10;
// x는 마이너스 10 이기 때문에 결과 도출 값은 "x는 음수입니다."가 나오게 된다.
if (x > 0) {
  // main logic #1
  console.log("x는 양수입니다.");
} else {
  // main logic #2
  console.log("x는 음수입니다.");
}

3. if-else if-else문

let x = -45;

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

4. switch문

//switch문은 여러 개의 경우(case)중 하나를 선택하여 해당하는 코드를 실행
let fruit = "수박";
// 경우(case)에 없는 default 수박을 선택하자 해당하는 과일이 없다고 뜸
switch (fruit) {
  case "사과":
    console.log("사과는 빨간색입니다.");
    break; // 케이스마다 break; 꼭 붙여 줘야함
  case "바나나":
    console.log("바나나는 노란색입니다.");
    break; 
  case "오렌지":
    console.log("오렌지는 주황색입니다.");
    break;
  default:
    console.log("해당하는 과일이 없습니다.");
    break;
}

5. 삼항 연산자

// 변수 age가 18세 이상인 경우 "성인입니다.", 그렇지 않은 경우 "미성년자입니다."라는 메시지를 출력
let age = 17; // 변수 age 17세
let message = (age >= 18) ? "성인입니다." : "미성년자입니다.";
console.log(message);   // "미성년자입니다."

6. 조건문의 중첩

// if문을 사용하여 성별에 따라 성인 미성년자 여부를 판별
let age = 16;
let gender = "여성";
//  조건문 안에 또 다른 조건문을 사용하여 복잡한 조건을 판별
if( age <= 20) {
    if (gender == "남성") {
        console.log("미성년 남성입니다.");
    } else {
        console.log("미성년 여성입니다.");
    }
} else {
    if (gender == "여성") {
        console.log("성인 여성입니다.");
    } else {
        console.log("성인 남성입니다.");
    }
}

7. 조건부 실행

let x = 10;

// and 조건(&&)
(x > 0) && console.log("x는 양수입니다.");

// or 조건(||)
let x;
let y = x || 10;

console.log(y);   // 10

객체

// 기본적인 객체 생성 방법
let person = {
    name : "홍길동",
    age : 27,
    gender : "남자"
};
// 생성자 함수를 이용한 객체 생성 방법
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}
let person1 = new Person("홍길동", 27, "남자");
let person2 = new Person("홍길순", 20, "여자");
// 접근하는 방법
console.log(person.name);
console.log(person.age);
console.log(person.gender);

객체 매소드

1. Object.keys() 메소드(속성 이름을 배열로 반환)

let person = {
    name : "홍길동",
    age : 27,
    gender : "남자"
};
let keys = Object.keys(person);

console.log("keys => ", keys);

2. Object.values() 메소드(속성 값들을 배열로 반환)

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자"
  };
  
  let values = Object.values(person);
  
  console.log("values => ", values);   // ["홍길동", 30, "남자"]

3. Object.entries() 메소드( 속성 이름과 속성 값들을 2차원 배열로 반환)

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

let entries = Object.entries(person);

console.log(entries);

4. Object.assign() 메소드

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};
// 메소드를 사용하여 새로운 객체 newPerson을 만듦
let newPerson = Object.assign({}, person, { age: 35 }); //나이가 30이 였지만 35로 바꿈

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

5. 객체 비교

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

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

// stringify 는 문자열화를 의미 즉 문자는 같으니 json.stringify 사용하면 true 값이 나온다 

console.log(person1 === person2);   // person1 과 person2 의 주소는 다르기 때문에 false
console.log(JSON.stringify(person1) === JSON.stringify(person2));   // true

6. 객체 병합( 연산자(...)를 사용하여 병합)

let Human1 = {
  name: "홍길순",
  age: 30
};

let Human2 = {
  gender: "여자"
};

let perfectHuman = {...Human1, ...Human2};

console.log(perfectHuman);   // { name: "홍길순", age: 30, gender: "여자" }

배열

배열 생성

1. 기본적인 배열 생성

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

2. 배열의 크기 지정(new Array()를 사용하여 배열 크기 지정)

let numbers = new Array(5);

3 기본적인 배열 생성

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

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

배열 메소드

1. push() 메소드

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

fruits.push("오렌지"); // 오렌지를 추가 해주는 push

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

2. pop() 메소드 (마지막 요소 없애기)

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

fruits.pop(); // 마지막 요소인 오렌지를 없애줌

console.log(fruits);   // ["사과", "바나나"]

3. shift() 메소드(첫번째 요소 없애기)

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

fruits.shift(); // 첫번째 요소인 사과를 없애줌

console.log(fruits);   // ["바나나", "오렌지"]

4. unshift() 메소드(첫번째 요소 붙이기)

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

fruits.unshift("사과"); // 첫번째 요소인 사과를 붙여줌

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

5. splice() 메소드(가운데 요소 붙이기)

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

fruits.splice(1, 1, "포도"); // 0이 사과고 1이 바나나, 거기서 1개를 지우면 가운데 요소인 바나나를 포도로 바꿔줌

console.log(fruits);   // ["사과", "포도", "오렌지"]

6. slice() 메소드(2번째자리부터, 3번째자리까지 전까지 반환)

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

let slicedFruits = fruits.slice(1, 2); // 1의 2번째 자리인 바나나부터 
                                       // 2의 3번째 요소 전인 바나나를 잘라서 가져옴

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

7. forEach() 메소드( 변수의 모든 요소를 출력)

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

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

//연습1
let animal = ["거북이", "올챙이", "사슴", "올빼미", "늑대"];

animal.forEach(function(item) { // function(__) 괄호 안에 item이 들어가도 나옴
    console.log(item)
});

8. map() 메소드(배열 numbers의 모든 요소를 새로 곱한 새로운 배열)

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

let newNumbers = numbers.map(function(item) {
  return item * 3;
});

console.log(newNumbers);   // [3, 6, 9, 12, 15]

9. filter() 메소드

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

let filterNumbers = numbers.filter(function(item) {
  return item > 2;
});

console.log(filterNumbers);   // [3, 4, 5]
let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0; // 2로 나눴을때 결과값이 0과 같음
});

console.log(evenNumbers);   // [2, 4] // numbers에서 짝수만 추출한 새로운 배열

10. find() 메소드 (3보다 큰 첫번째 숫자)

let numbers = [4, 1, 5, 4, 5]

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

console.log(findnumber); // 4

반복문

for문

  • for, while => ~동안 : 반복문
  • for (초기값; 조건식; 증감식;}

1. 기본적인 for문

// for(let 초기값, 조건식, 증감식)
for (let i = 0; i <10; i++) {
    console.log("For문 들어가고 있음 =>" + i);
}

2. 배열과 함께 사용하는 for문

const arr = ["엄마", "아빠", "할머니", "할아버지", "딸"];
for (let i = 0; i < arr.length; i++) {
    console.log(i);
    console.log(arr[i]);
}

// 연습 1 ex) 0부터 10까지의 수 중에서 2의 배수만 console.log로 출력하는 예시
for (let i = 0; i <= 10; i++) {
    if (i >= 2)
        if (i % 2 === 0) {
            //2의 배수
            console.log(i + "는 2의 배수입니다!!")
        }
}

3. for...in문

let person = { name: "John", age: 30, gender: "male" };

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

while문

let i = 0; 

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

//연습1
//While문을 활용해서, 3초과 100 미만의 숫자 중 5의 배수인 것만 출력하는 예
let i = 3;

while (i < 100) {
    if (i % 5 === 0 && i >= 5) {
        console.log(i + "는 5의 배수 입니다!!");
    }
    i++;
}

do...while문

let i = 0;

do {
    console.log(i);
    i++;
} while (i < 10); // 0부터 9까지의 숫자를 출력

break문과 continue문

1. break문

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // 브레이크를 만난 순간 for 문을 stop 하고 출력 x
  } // 브레이크는 그냥 그 자리에서 끝내버림
  console.log(i); // 
}

2. continue문

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i); // continue문을 사용하여 5를 제외한 0부터 9까지의 숫자를 출력
} // 컨티뉴는 5는 버리고 다음순서로 진행됨

0개의 댓글