JS문법종합반 정리 1주차 02 - 반복문, 생성자함수 통한 객체 생성, 배열 관련 메서드

[ 반복문 ]

for...in문

 객체의 key를 기준으로 value를 순서대로 출력할 수 있는 구문

/* 기본 구조 */
for (let key in 객체명) {}

/* 예시 */
let person = { name : "Bob", age : 25, gender : "male" }

for (let key in person) {
  console.log(key + ": " + person[key]);
} 
// 반환
name : Bob
age : 25
gender : male

 

while문

 for문과 달리 증감을 실행 로직에서 진행

/* 기본구조 */
while (조건식) {
  실행로직;
  증감식;
}

/* 예시 */
let i = 0

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

 

do...while문

do문이 먼저 오기 때문에, 조건에 부합하지 않더라도 로직이 최소 한 번은 실행됨

/* 기본 구조 */
do {
  실행로직;
  증감식;
} while (조건식);

/* 예시 */
let i = 11;

do {
  console.log(i);
  i++;
} while (i < 10);
// 반환 : 11, 10보다 작다는 조건에 어긋나지만 do 때문에 한번은 출력

 

 

[ 객체 ]

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

 객체를 일괄적으로 생성할 수 있게 해주는 생성자 함수

/* 기본 구조 */
function 함수명(value1, value2, value3) {
  this.key1 = value1;
  this.key2 = value2;
  this.key3 = value3;
}

/* 예시 */
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

let person1 = new Person("Bob", 25, "male");
console.log(person1); // 반환 : {name : "Bob", age : 25, gender : "male"}

 

 

[ 배열 ]

배열 생성 두 가지 방법

/* 직접 요소를 채워 선언 */
let colors = ["red", "blue", "green"];

/* 길이만 지정해 선언 */
let colors = new Array(3);
console.log(colors); // 반환 : [ <3 empty items> ], 길이는 3이긴 한데 내용물이 없음

 

배열 관련 메서드

• splice() : 배열의 요소를 삭제하거나, 새 요소를 추가해줌. 동시에도 가능

/* 기본 구조 */
배열명.splice(자를위치,자를길이,넣을요소)

/* 요소 삭제하기 */
let colors = ["red", "blue", "green"];
colors.splice(0,1); // 0번째 인덱스 요소부터 한 개를 제거
console.log(colors); // 반환 : ["blue", "green"]

/* 요소 추가하기 */
let colors = ["red", "blue", "green"];
colors.splice(0,0,"yellow"); // 0번째 인덱스 요소부터 아무것도 제거하지 않고 그 위치에 요소 추가
console.log(colors); // 반환 : ["yellow", "red", "blue", "green"]

/* 요소 제거하고 추가하기 */
let colors = ["red", "blue", "green"];
colors.splice(0,1,"yellow"); // 0번째 인덱스 요소부터 한 개를 제거하고 그 위치에 요소 추가
console.log(colors); // 반환 : ["yellow", "blue", "green"]

• forEach() : 배열의 요소들을 콜백함수의 매개변수로 받아 반복문을 실행해줌

/* 기본 구조 */
배열명.forEach(function(매개변수) {
  실행로직;
});

/* 예시 */
let colors = ["red", "blue", "green"];

colors.forEach(function(color) {
  console.log(color);
});
// 반환
red
blue
green

• map() : 배열의 각 요소에 콜백함수를 실행하고, 그 결과를 새로운 배열로 반환

/* 기본 구조 */
배열명.map(function(매개변수) {
 실행로직(배열 각 요소에 적용);
});

/* 예시 */
let colors = ["red", "blue", "green"];

let new_colors = colors.map(function(color) {
  return color + "!!";
});

console.log(new_colors); // 반환 : ["red!!", "blue!!", "green!!"]

• filter() : 배열에서 원하는 조건에 부합하는 요소만 추출해 새로운 배열로 반환

/* 기본 구조 */
배열명.filter(function(매개변수) {
  실행로직(선별 조건)
});

/* 예시 */
let colors = ["red", "blue", "green"];

let new_colors = colors.filter(function(color) {
  return color.length > 4;
});

console.log(new_colors); // 반환 : ["green"]

• find() : 배열에서 원하는 조건에 부합하는 첫 번째 요소를 반환 (요소의 값을 반환!! 배열로 반환 X)

/* 기본 구조 */
배열명.find(function(매개변수) {
  실행로직(조건);
});

/* 예시 */
let colors = ["red", "blue", "green"];

let new_colors = colors.find(function(color) {
  return color.length >= 4;
});

console.log(new_colors); // 반환 : "blue"

• some() : 배열에서 원하는 조건에 부합하는 요소가 적어도 하나라도 있는지를 확인해 참 또는 거짓을 반환

/* 기본 구조 */
배열명.some(function(매개변수) {
  실행로직(조건)
});

/* 예시 */
let colors = ["red", "blue", "green"];

let new_colors = colors.some(function(color) {
  return color.length >= 4;
});

console.log(new_colors); // 반환 : true

• every() : 배열의 모든 요소가 조건에 부합하는지 여부를 확인해 모두 해당되면 참을, 그렇지 않으면 거짓을 반환

/* 기본 구조 */
배열명.every(function(매개변수) {
  실행로직(조건)
});

/* 예시 */
let colors = ["red", "blue", "green"];

let new_colors = colors.every(function(color) {
  return color.length >= 4;
});

console.log(new_colors); // 반환 : false

• reverse() : 배열 요소들의 기존 정렬을 역순으로 다시 세움

/* 기본 구조 */
배열명.reverse();

/* 예시 */
let colors = ["red", "blue", "green"];

colors.reverse();
console.log(colors); // 반환 : ["green", "blue", "red"]

• sort() : 기존 배열의 요소들을 정렬해줌 (새 배열 만드는 거 아님!)
• reduce() : 배열의 모든 요소에 콜백함수를 실행하고, 그 누적값을 하나의 결과 값으로 반환

(sort와 reduce는 241104 TIL에 정리 https://bb201802.tistory.com/53)