[JavaScript] JavaScript 기초

📌 문자열 관련 JS 기능

✅ .length();

문자열 길이

 

✅ .indexOf("");

문자열 위치 찾기 

const str = "Hello, world";
console.log(str.indexOf("world"));
// 7

 

✅ .slice(start, end);

문자열 자르기

 

✅ .replace("찾을 문자", "바꿀 문자");

문자열 바꾸기

 

✅ .repeat(반복 횟수);

문자열 반복하기

let str = "우영";
let longStr = str.repeat(5) + "우";
console.log(longStr);

 

✅ .trim();

앞 뒤 공백 문자 제거하기

let str = "              우영우                 ";
let trimStr = str.trim();
console.log(trimStr); //우영우

 

📌 숫자 + 수학 관련 JS 기능

✅ int/ float

const pi = 3.14159265358979;
console.log(pi);

let integer = parseInt(pi);
let float = parseFloat(pi);

console.log(integer);
console.log(float);
console.log(typeof integer, typeof float);

정수형 변환: parselnt()

부동소수 변환: parseFloat()

 

✅ 그 외 수학 함수들

let minus = -999;
// Math -> JS 기본 내장 함수
console.log("abs : ", Math.abs(minus));
console.log("min : ", Math.min(1, 2, 3, 4, -1));
console.log("max : ", Math.max(1, 2, 3, 4, 77));
console.log("ceil : ", Math.ceil(3.14));
console.log("floor : ", Math.floor(3.99));
console.log("round : ", Math.round(3.14));
console.log("random : ", Math.random());

 

📌 배열 

✅ 추가, 삭제

// 주의, 원본 배열이 변함

• .push(); 마지막에 추가
• .unshift(); 처음에 추가
• .pop(); 마지막 요소 삭제 & 반환
• .shift(); 첫 요소 삭제 & 반환
• .splice(); 

// splice
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

✅ 길이 .length;

✅ 합치기 .concat();

원본 배열 변경하지 않음

반환값이 존재 

let numbers = [1, 2, 3, 4];
let fruits = ["사과", "딸기", "수박"];
console.log(numbers.concat(fruits)); //[1, 2, 3, 4, "사과", "딸기", "수박"]
console.log(numbers); // [1, 2, 3, 4]
console.log(fruits); // ["사과", "딸기", "수박"]

 

✅ for 문

배열안의 값 하나씩 출력

✔️ 기본 for문

let numbers = [1, 2, 3, 4, 5, 6];
let fruits = ["사과", "바나나", "수박", "포도", "파인애플"];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

✔️ for of문

let numbers = [1, 2, 3, 4, 5, 6];
let fruits = ["사과", "바나나", "수박", "포도", "파인애플"];
for (let i of numbers) {
  console.log(i);
}
for (let i of fruits) {
  console.log(i);
}

✔️ forEach문

let numbers = [1, 2, 3, 4, 5, 6];
let fruits = ["사과", "바나나", "수박", "포도", "파인애플"];
numbers.forEach(function (item, index, array) {
  console.log(item, index, array);
});
fruits.forEach(function (item, index, array) {
  console.log(item, index, array);
});

✔️ 화살표 함수 사용 

numbers.forEach((item, index, array) => {
  console.log(item, index, array);
});

 

✅ .map[]

데이터를 반환 + 배열로 만들어 줌

let numbers = [1, 2, 3, 4, 5, 6];
let fore = numbers.forEach(function (item) {
  return item;
});
let map = numbers.map(function (item) {
  return item;
});
// forEach는 return값 반환하지 않음
console.log(fore); // undefined
console.log(map); // [1, 2, 3, 4, 5, 6]

// 화살표 함수 1
let map2 = numbers.map(() => {
  return item;
});
// 화살표 함수 2
let map3 = numbers.map((item) => item);

// map 활용
const fruits = ["사과", "파인애플", "수박", "포도", "오렌지"];
let obj = fruits.map((item, index) => {
  return {
    id: index + 1,
    name: item,
  };
});
console.log(obj);

 

✅ [].reduce

배열의 합 구할때 많이 사용

let numbers = [1, 2, 3, 4, 5, 6];
let reduce = numbers.reduce(function (sum, item, index, arr) {
  console.log(sum, item, index, arr);
  return sum + item;
});

 

✅ [].filter((매개변수) => 조건);

const words = [
  "spray",
  "limit",
  "elite",
  "exuberant",
  "destruction",
  "present",
];
let arr = words.filter((item) => item.length >= 6);
console.log(arr);

✅ [].includes(요소);

const words = [
  "spray",
  "limit",
  "elite",
  "exuberant",
  "destruction",
  "present",
];
console.log(words.includes("spray"));
console.log(words.includes("hi"));

예제)

두 배열에서 동일한 요소만 가지는 배열 same 생성

두 배열에서 서로 다른 요소만을 가지는 배열 diff 생성

let fruits1 = ["사과", "딸기", "파인애플", "수박", "참외", "오렌지", "자두", "망고"];
let fruits2 = ["수박", "사과", "참외", "오렌지", "파인애플", "망고"];

let same = fruits1.filter((item) => fruits2.includes(item));
console.log(same);
//forEach 사용
fruits1.forEach(function (item) {
  if (fruits2.includes(item)) {
    same.push(item);
  }
});
let diff = [];
diff = fruits1.filter((item) => !fruits2.includes(item));
//forEach 사용
fruits1.forEach(function (item) {
  if (!fruits2.includes(item)) {
    diff.push(item);
  }
});
console.log(diff);

✅ find/ findIndex

find: 배열에 특정 값이 있는지 찾고 반환

findIndex: 배열에 특정 값이 있는지 찾고 index 반환

 

📌 Object 객체

✅ object.assign()

객체의 병합에 사용되는 메소드

정적 메소드 -> 기존에 선언된 객체에 사용하지 않고 가상의Object 라는 것을 불러와서 사용

let obj1 = { a: 1, b: 2 };
let obj2 = { b: 3, c: 4 };
let assignedObj = Object.assign(obj1, obj2);
console.log(assignedObj); // { a: 1, b: 3, c: 4 };
console.log(obj1); // { a: 1, b: 3, c: 4 };
console.log(obj2); // { b: 3, c: 4 }

 

✔️ 객체의 불변성 

const userName = {
  id: 1,
  name: "haru",
};
const userEmail = {
  id: 1,
  email: "***@naver.com",
};
const assignedObj = Object.assign(userName, userEmail);
console.log(assignedObj);
console.log(userName);
console.log(assignedObj === userName); // true

const a = { x: "y" };
const b = { x: "y" };
console.log(a === b); // false

데이터가 같은가? X

메모리 주소가 같은가? O

// object에 넣어주면 메모리가 다르기 때문에 false 반환
const assignedObj = Object.assign({}, userName, userEmail);
Object.assign(userName, userEmail);
console.log(assignedObj);
console.log(userName);
console.log(assignedObj === userName); // false

 

✅ object.key()

객체의 key 값을 배열로 반환해 주는 메소드

const user = {
  id: 1,
  name: "Haru",
  email: "***@naver.com",
};
const keys = Object.keys(user);
console.log(keys); // ["id", "name", "email"]
const values = keys.map((key) => user[key]);
console.log(values); // ["1", "Haru", "***@naver.com"]