본문 바로가기
공부/javascript

Javascript 기본 2 (조건문, 반복문, 배열, 객체)

밍고의서식지 2024. 7. 22. 20:42
반응형

조건문 📖

1. if문

let x = 10;

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

 

if문은 조건이 참인 경우에만 코드를 실행합니다.

 

2. if-else문

let x = -10;

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

 

if-else문은 조건이 참인 경우와 거짓인 경우 각각 다른 코드를 실행합니다.

 

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입니다.");
}

 

여러 개의 조건을 순서대로 비교하여, 해당하는 조건에 맞는 코드를 실행합니다.

 

4. switch문

let fruit = "사과";

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

 

변수의 값에 따라 여러 개의 경우(case) 중 하나를 선택하여 해당하는 코드를 실행합니다. `default`는 모든 경우에 맞지 않는 경우에 실행되는 코드를 작성합니다.

 

5. 삼항 연산자

let age = 20;
let message = (age >= 18) ? "성인입니다." : "미성년자입니다.";
console.log(message);   // "성인입니다."

 

삼항 연산자는 if문과 비슷한 역할을 하며, 조건이 참인 경우와 거짓인 경우 각각 다른 값을 반환합니다.

 

6. 조건문의 중첩

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

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

 

조건문 안에 또 다른 조건문을 사용하여 복잡한 조건을 판별할 수 있습니다

 

7. 조건부 실행

let x = 10;

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

 

&& 연산자를 사용하여 조건부 실행을 할 수 있습니다.

 

8. 삼항 연산자와 단축 평가

let x;
let y = x || 10;

console.log(y);   // 10

 

삼항 연산자를 사용하여 변수 x가 존재하지 않는 경우 기본값으로 10을 사용합니다. || 연산자를 사용하여 단축 평가(short-circuit evaluation)를 할 수 있습니다. 변수 x가 존재하지 않는 경우, || 연산자는 false 값을 반환하고, 기본값으로 지정한 10을 반환합니다.

 

9. falsy 한 값과 truthy 한 값

if (0) {
  console.log("이 코드는 실행되지 않습니다.");
}

if ("") {
  console.log("이 코드는 실행되지 않습니다.");
}

if (null) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (undefined) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (NaN) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (false) {
  console.log("이 코드는 실행되지 않습니다.");
}

 

falsy한falsy 한 값들을 사용해 if문의 조건을 만족시키지 못하도록 했습니다. (0, 빈 문자열, null, undefined, NaN, false)는 falsy 한 값으로 if의 조건을 만족시키지 못합니다.

 

반복문 📖

1. for 문

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

 

for문은 초기값, 조건식, 증감식을 사용하여 반복 횟수를 제어합니다.

 

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

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

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

 

배열 numbers와 함께 for문을 사용하여 배열의 요소를 출력합니다. 배열의 요소 개수만큼 반복하여 실행합니다.

 

3. for ...in 문

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

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

 

for...in문은 객체의 프로퍼티를 순서대로 접근할 수 있습니다.

 

4. while 문

let i = 0;

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

 

while문은 조건식이 참인 경우에만 코드를 반복해서 실행합니다.

 

5. do ...while 문

let i = 0;

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

 

do...while문은 일단 한 번은 코드를 실행하고, 그 후에 조건식을 체크하여 반복 여부를 결정합니다.

 

6. break문과 continue문

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

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

 

`break`문은 반복문을 종료합니다.

`continue`문은 해당 요소를 건너뛰고 반복문을 계속 진행합니다.

 

배열 📖

`배열`을 사용해 여러 개의 연속적인 값을 저장하고 관리할 수 있습니다!

1. 배열 생성

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

 

배열을 만들 때는 대괄호([])를 사용하며, 각 요소는 쉼표(,)로 구분합니다.

 

2. 배열 크기 지정

let numbers = new Array(5);

 

 

`new Array()`를 사용해 크기가 5인 배열 numbers를 생성합니다.

 

3. 배열 요소 접근

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

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

 

배열의 요소에 접근할 때는 대괄호([]) 안에 인덱스 값을 넣습니다.

 

 

배열 메소드 📖

1. push() 메서드

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

fruits.push("오렌지");

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

 

`push()` 메서드는 배열의 끝에 요소를 추가합니다.

 

2. pop() 메소드

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

fruits.pop();

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

 

`pop()` 메소드는 배열의 마지막 요소를 삭제합니다.

 

3. shift() 메소드

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

fruits.shift();

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

 

`shift()` 메소드는 배열의 첫 번째 요소를 삭제합니다.

 

4. unshift() 메소드

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

fruits.unshift("사과");

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

 

`unshift()` 메소드는 배열의 맨 앞에 요소를 추가합니다.

 

5. splice() 메소드

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

fruits.splice(1, 1, "포도");

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

 

`splice()` 메소드는 배열의 요소를 삭제하거나, 새로운 요소를 추가할 수 있습니다.

 

5. slice() 메소드

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

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

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

 

`slice()` 메소드는 배열의 일부분을 새로운 배열로 만듭니다.

 

6. forEach() 메소드

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

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

 

`forEach()` 메소드는 배열의 각 요소에 대해 콜백 함수를 실행합니다.

 

7. 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]

 

`map()` 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.

 

8. filter() 메소드

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

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

console.log(evenNumbers);   // [2, 4]

 

`filter()` 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소만 새로운 배열로 반환합니다.

 

9. find() 메소드

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

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

console.log(foundNumber);   // 4

 

`find()` 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번째 요소를 반환합니다.

 

10. some() 메소드 

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

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

console.log(hasEvenNumber);   // true

 

`some()` 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인합니다.

 

11. every() 메소드

let numbers = [2, 4, 6, 8, 10];

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

console.log(isAllEvenNumbers);   // true

 

`every()` 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 모든 요소인지 확인합니다.

 

12. sort() 메소드

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

numbers.sort(function(a, b) {
  return a - b;
});

console.log(numbers);   // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

 

`sort()` 메서드를 사용하여 배열 numbers를 오름차순으로 정렬합니다. sort() 메서드는 배열의 요소를 정렬합니다.

 

13. reverse() 메소드

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

numbers.reverse();

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

 

`reverse()` 메소드는 배열의 요소를 역순으로 정렬합니다.

 

 

객체 📖

1. 객체 생성

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

 

객체 person을 생성합니다. 객체를 만들 때는 중괄호({})를 사용하며, 속성과 값을 콜론(:)으로 구분하여 작성합니다. 각 속성과 값은 쉼표(,)로 구분합니다.

 

2. 생성자 함수를 사용한 객체 생성

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

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

 

생성자 함수 Person()을 사용하여 객체 person1과 person2를 생성합니다. 생성자 함수를 사용하면 객체를 일괄적으로 생성할 수 있습니다.

 

3. 객체 속성 접근

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

console.log(person.name);   // "홍길동"
console.log(person.age);    // 30
console.log(person.gender); // "남자"

 

객체의 속성에 접근할 때는 점(.)을 사용하여 속성 이름을 입력합니다.

 

 

객체 메소드 📖

1. Object.keys() 메소드

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

let keys = Object.keys(person);

console.log(keys);   // ["name", "age", "gender"]

 

`Object.keys()` 메소드는 객체의 속성 이름을 배열로 반환합니다.

 

2. Object.values() 메소드

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

let values = Object.values(person);

console.log(values);   // ["홍길동", 30, "남자"]

 

`Object.values()` 메소드는 객체의 속성 값들을 배열로 반환합니다.

 

3. Object.entries() 메소드

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

let entries = Object.entries(person);

console.log(entries);

 

`Object.entries()` 메소드는 객체의 속성 이름과 속성 값들을 2차원 배열로 반환합니다.

 

4. Object.assign() 메소드

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

let newPerson = Object.assign({}, person, { age: 35 });

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

 

`Object.assign()` 메소드는 기존 객체를 복사하여 새로운 객체를 만듭니다.

 

5. 객체 비교

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

 

객체를 비교할 때는 일반적으로 === 연산자를 사용할 수 없습니다. 대신 `JSON.stringify()` 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교를 합니다.

 

6. 객체 병합

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

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

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

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

 

객체 병합을 할 때는 전개 연산자(...)를 사용합니다.

 

 

 

출처 🏷️

https://www.iplocation.net/javascript

 

반응형

'공부 > javascript' 카테고리의 다른 글

javascript 심화 5 (Promise, async, await)  (0) 2024.07.29
javascript 심화 4 (콜백함수)  (0) 2024.07.29
javascript 심화 3 (this, 화살표함수, call, apply, bind)  (0) 2024.07.26
javascript 심화 2 (호이스팅, var let const 차이점, TDZ)  (5) 2024.07.24
javascript 심화 1 (실행 컨텍스트)  (0) 2024.07.24
javascript 기본 4 (불변 객체, 얕은 복사, 깊은 복사)  (0) 2024.07.23
javascript 기본 3 (기본형, 참조형 데이터와 불변성)  (1) 2024.07.23
Javascript 기본 1 (기본 문법)  (0) 2024.07.22

'공부/javascript' Related Articles

티스토리툴바