[JS문법 1주차] 자바 기초 문법 정리 2 - 조건문, 객체, 배열, 반복문, break, continue

1. 조건문

// 문(if, else if , else, switch ~)
// 조건문
// if (조건문 true or false) {main logic}

let x = 5;

let y = "hello world";

if (y.length >= 5) {
  console.log(y.length);
}

if (x > 0) {
  console.log("x는 양수입니다.");
} else if (x === 0) {
  console.log("x는 0 입니다");
} else if (x < 0) {
  console.log("x는 음수입니다.");
} else {
  console.log("x는 숫자가 아닙니다");
}

// switch
// 변수의 값에 따라, 여러 개의 경우(case) 중 하나를 선택
// default: 어떤 case에도 해당 안될 시

let fruit = "사과";
switch (fruit) {
  case "사과":
    console.log("사과 입니다");
    break; //case 안에 꼭 있어야 그 다음으로 진행안되고, 빠져나올 수 있음
  case "키위":
    console.log("키위 입니다");
    break;
  case "바나나":
    console.log("바나나 입니다");
    break;
  default:
    console.log("아무것도 아닙니다");
    break;
}

// 조건문 중첩
let age = 20;
let gender = "여성";

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




// truthy here 제외 다 falsy
// falsy한 값, truthy한 값
if (0) {
  console.log("truthy")
}
if (NaN) {
  console.log("truthy");
}
if ({}) {
  console.log("truthy here"); //여기
}
if ([]) {
  console.log("truthy here"); //여기
}
if ("") {
  console.log("truthy");
}
if (null) {
  console.log("truthy");
}
if (undefined) {
  console.log("truthy");
}
if (false) {
  console.log("truthy");
}
if (true) {
  console.log("truthy here"); //여기
}


// 조건부 실행
// if (x > 0) {
//   console.log("x는 양수입니다.");
// }

//and 조건
x > 0 && console.log("x는 양수입니다."); //이렇게 && 이용해서 조건문 축약 가능
// x가 0보다 크면 오른쪽 실행.

//or 조건
// 삼항 연산자와 단축평가
let z = 10; //z에는 undefined
let r = z || 20; //z가 undefined이면 20을 갖음
r = 20 || z; 
//둘다 true일때 왼쪽에 있는거 
console.log(r)

/* x > 0 && console.log("x는 양수입니다.");
여기서는 x > 0이 true일 때만 오른쪽의 console.log가 실행됩니다.
&& 연산자는 앞쪽 값이 false이면 뒤의 값을 확인하지 않기 때문에, x > 0이 false이면 console.log는 실행되지 않습니다. 이를 단축 평가라고 부릅니다.*/


/*let z = 10; let r = z || 20;
여기서 z가 10으로 정의되어 있으므로 z는 true로 평가됩니다.
|| 연산자는 앞쪽 값이 true면 뒤쪽을 평가하지 않습니다. 따라서 r은 10이 됩니다.

r = 20 || z;
여기서 20은 true로 평가되기 때문에, z는 평가되지 않고 r은 20이 됩니다.

즉, || 연산자는 첫 번째로 true로 평가되는 값을 반환*/

 

 

2. 객체

// 객체
// key- value pair
// value에는 함수, 스트링, 변수, 다른 객체 등 다양한 형태의 값이 올 수 있음
// 하나의 변수에 여러 값을 넣을 수 있음

let person = {
  name: "luta",
  age: 20,
  gender: "m",
};

// 생성자 함수를 이용해서 객체 생성 가능

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

let person1 = new Person("도리", 30, "f");
let person2 = new Person("도리호", 20, "m");

console.log("1", person1.name);
console.log("2", person1.age);
console.log("3", person1.gender);
// 1 도리
// 2 30
// 3 f

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 객체 메소드: 객체가 가진 여러가지 기능(Object.~~)////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

// 1. Object.key() : Key를 가져오는 메소드
// 2. Object.value() : value를 가져오는 메소드
// 3. Object. entries(): key와 value를 묶어서 배열로 만든 배열(2차원 배열 형태로 만들어짐)
// 4. Object.assign(): 객체 복사

let keys = Object.keys(person);
let values = Object.values(person);
let entries = Object.entries(person);

// Object.assign(복사할 객체, 복사될 객체, 바꿀 내용(선택) 혹은 추가할 내용)
let copy = {};
Object.assign(copy, person, { height: 120 });
console.log(keys, values, entries, copy);

/////////////////////////////////////////////////////////////
// 객체 비교/////////////////////////////////////////////////
////////////////////////////////////////////////////////////

let person3 = new Person("나", 10, "m");
let person4 = new Person("나", 10, "m");

// 둘이 같은 객체
console.log(person3 === person4); //false

let str1 = "test";
let str2 = "test";
// 같은 스트링

console.log(str1 === str2); //true

// Q. 왜 같은 문자열은 true로 나오는 데 같은 내용의 객체는 false가 나오는가?
// A. 객체와 배열은 다른 데이터 타입들에 비해 크기가 상당히 큼으로, 메모리에 저장할 때  별도의 공간에 저장함.
// 그래서 각각의 객체가 저장될 떄 각각의 내용을 따로 저장한다기 보다는 각 객체의 주소를 저장함.(person3 별도 공간에 대한 주소, person4 별도 공간에 대한 주소로 저장)
// 즉, 각각의 주소가 다르기 때문에 두 객체 비교 시 false로 나옴.
// 반면, str1과 str2는 직접 값을 저장하기 떄문에 true가 나옴.

// 그럼 두 객체를 비교할 때는 어떻게 해야하는가???
// JSON.stringfy 이용: 객체를 문자열화 시킴 그 후 비교.
console.log(JSON.stringify(person3) === JSON.stringify(person4)); //true

/////////////////////////////////////////////////////////////
// 객체 병합/////////////////////////////////////////////////
////////////////////////////////////////////////////////////

//  ... : spread operator (객체의 중괄호를 풀어줘)

let nameAge = {
  name: "냐냐",
  age: 20,
};

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

let all = { ...nameAge, ...gender }; //spread operator사용해서 합치기

console.log(all); //{ name: '냐냐', age: 20, gender: '여자' }

• 객체는 참조 타입이므로, 객체가 생성될 때 각각의 주소값이 다릅니다.
  • person3과 person4는 각각 별도의 메모리 공간에 저장되며, 그 주소값을 비교하기 때문에 person3 === person4는 false가 됩니다.
• 문자열 (str1, str2):
  • 문자열은 기본 타입이므로, 같은 값은 동일하게 메모리에 저장됩니다.
  • str1과 str2는 값이 같기 때문에 str1 === str2는 true가 됩니다.
• JSON.stringify(person3) === JSON.stringify(person4)를 사용하여 객체를 문자열로 변환한 후 비교하면, 두 객체의 속성 값이 같으면 true가 나옵니다.
  • 하지만 이 방법은 객체의 순서나 중첩된 객체가 있을 때 문제가 될 수 있습니다. 객체 속성의 순서가 달라지면 동일한 객체라도 false가 나올 수 있으므로, 상황에 따라 유용하지만 항상 최선의 방법은 아닙니다.
  • Deep comparison: 객체의 속성과 하위 객체까지 포함해 값을 비교하는 방법
    • 기본적인 === 비교는 객체의 참조값을 비교하기 때문에, 같은 속성을 가진 객체라도 false가 나오지만, deep comparison은 속성 하나하나를 비교.
    • 1. 직접 비교 구현하려면, 객체의 속성을 재귀적으로 비교해야 합니다. (기본 데이터 타입은 ===로 비교하고, 객체나 배열일 경우에는 속성을 하나씩 비교해 나가는 방식)

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) return true; // 참조가 같으면 true

  if (typeof obj1 !== "object" || typeof obj2 !== "object" || obj1 === null || obj2 === null) {
    return false; // 기본 타입일 경우 비교
  }

  let keys1 = Object.keys(obj1);
  let keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false; // 키의 개수가 다르면 다르다
  }

  // 모든 키와 값을 재귀적으로 비교
  for (let key of keys1) {
    if (!deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }

  return true; // 모두 통과하면 true
}

// 사용 예시
let person3 = { name: "나", age: 10, gender: "m" };
let person4 = { name: "나", age: 10, gender: "m" };

console.log(deepEqual(person3, person4)); // true

 

• 2. 라이브러리 사용하기 (Lodash의 _.isEqual): 객체의 깊은 비교를 위한 _.isEqual 함수

const _ = require("lodash");

let person3 = { name: "나", age: 10, gender: "m" };
let person4 = { name: "나", age: 10, gender: "m" };

console.log(_.isEqual(person3, person4)); // true

 

 

3. 배열

// 배열 (인덱스 중요)

// 생성
// 1. 기본 생성
let numbers = [1, 2, 3, 4, 5];

// 2. 크기 지정
let name = new Array(5); //크기(요소 개수)가 5인 배열
console.log(name); //[ <5 empty items> ]

// 3. 요소접근
console.log(numbers[2]); //3

/////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////
// 배열 메소드///////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////

// push, pop(마지막 요소 삭제), shift(첫번째 요소 삭제), unshift(맨 앞에 요소 추가)

let foods = ["국", "밥", "고기", "탕후루"];

foods.push("쿠키");
console.log(foods); //[ '국', '밥', '고기', '탕후루', '쿠키' ]

console.log(foods.pop()); //쿠키
console.log(foods); //[ '국', '밥', '고기', '탕후루']

console.log(foods.shift()); //국
console.log(foods); //[ '밥', '고기', '탕후루', '쿠키' ]

foods.unshift("쫀드기");
console.log(foods); //[ '쫀드기', '밥', '고기', '탕후루' ]

/////////////////////////////////////
// splice(시작 위치, delete할 요소 총 개수, 대신 추가할 것): 지우고 대체
///////////////////////////////////////
foods.splice(0, 2, "도가니탕");
console.log(foods); //[ '도가니탕', '고기', '탕후루' ]
foods.splice(0, 2, "도가니탕", "도미", "파스타");
console.log(foods); //[ '도가니탕', '도미', '파스타', '탕후루' ]

//////////////////////////////////////////
//배열에서 특정 부분만 끊어내서 추출: slice(시작 위치, 끝위치)
/////////////////////////////////////////////////////////

let slicedFoods = foods.slice(1, 4);
console.log(slicedFoods); //[ '도미', '파스타', '탕후루' ]

///////////////////////////////////////////////////////////////////////
//forEach, map, filter, find ////////////////////////////////////////
////////////////////////////////////////////////////////////////////

// 매개변수 자리에 함수를 넣는 것: 콜백 함수

// (1) forEach: 배열의 각 요소를 순회
numbers.forEach(function (item, index) {
  console.log(index, item);
});
/*
0 1
1 2
2 3
3 4
4 5
*/

// (2) map: 배열을 가공해서 새로운 배열로 리턴(항상 리턴 값을 갖음!!)
// 항상 원본 배열의 길이만큼 return됨:
// 설령 return값을 쓰지 못했어도, [undefined, undefined...] 이런 형식으로 원래 배열 길이 만큼의 undeifined 개수를 갖음.
let newNum = numbers.map(function (item) {
  return item * 2;
});

console.log(newNum); //[ 2, 4, 6, 8, 10 ]

// (3) filter: 조건이 들어감. 조건으로 거르고 새로운 배열을 리턴함.
let filteredArray = numbers.filter(function (item) {
  return item % 2 === 0; //조건에 해당되는 것
});

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


// (4) find: 조건문에 해당되는 것 중 첫번째 해당 요소를 찾아내사 반환함.(1개만 배열 아닌 값으로 반환)
let found = numbers.find(function (item) {
  return item % 2 === 0; //조건에 해당되는 것
});

console.log(found); //2

// forEach 빼고 모두 return문 필요!!!!!!!!!

4. 반복문

// 반복문
// for 문
// for(초기값, 조건식, 증감식)

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

for (let i = 0; i < 11; i++) {
  if (i % 2 === 0 && i !== 0) {
    console.log("0부터 10까지의 숫자 중 2의 배수:" + i);
  }
}

// for ~ in문
// 객체의 속성을 출력하는 문법

person = {
  name: "돌",
  age: 20
}

for (let key in person) {
  console.log(`${key}에 해당하는 값은 ${person[key]}`)
}

 

5. break, continue

// while
let x = 0

console.log("3초과 100 미만 5의 배수 숫자:")
while (x < 100) {
  if (x > 3 && x % 5 === 0) {
    console.log(x);  
  }
  x++;
}

// do ~ while :일단 실행하고, 그담에 조건문

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


console.log("........................")
// break와 continue문
for (let j = 0; j < 10; j++){
  if (j === 6) {
    break; //그자리에서 끝남
  }
  console.log(j) //0 1 2 3 4 5
}

for (let j = 0; j < 10; j++) {
  if (j === 6) {
    continue; //현재 반복을 건너뛰고 다음 반복으로 넘어감.
  }
  console.log(j); //0 1 2 3 4 5 7 8 9
}

 

1주차 완강!!