자바스크립트 기초(모르는 것) 2편

5 minute read

🚀 자바 스크립트 기초(모르는 것) 2편

본 내용은 유튜브 “코딩앙마” 강의를 바탕으로 작성

❗ 개인이 공부한 내용을 적은 것 이기에 오류가 많을 수도 있음

2022-02-15

  • 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음
  • 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옴

배열

// push : 배열 끝에 추가
let days = ['월', '화', '수'];
days.push('목');
console.log(days); //['월', '화', '수', '목'] 출력


// pop : 배엘 끝 요소 제거
days.pop();
console.log(days); // ['월', '화', '수']; 출력


// shift / unshift 배열 앞에 제거 추가

// 1 . 추가 (여러 요소 추가 가능)
days.unshift('금','토','일')
console.log(days); // ['금','토','일','월', '화', '수']; 출력

// 2.   (맨 앞 요소 제거)
days.shift();
console.log(days); // ['토','일','월', '화', '수']; 출력

배열의 반복문

// 배열의 반복문
let days = ['월', '화', '수'];

for(let i =0; i<days.length; i++){
    console.log(days[i]);  // 월화수 출력
}

// for of 사용
for (let day of days) {
    console.log(day);  // 월화수 출력

}
  • for in 문은 객체를 이용할 때 사용

변수 var / let / const

var

// var
var name = "Mike";
console.log(name); // Mike 출력

var name = "Kyle";
console.log(name); // Kyle 출력

// var는 선언하기전에 사용할 수 있다.(호이스팅)
var name;
console.log(name); // undefined
name = "Mike";
  • 호이스팅 : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동
  • 변수의 생성과정 : 1. 선언 및 초기화 단계 2. 할당단계
  • 함수 스코프(function-scoped) : if 문에서 변수를 할당해도 if문 밖에서 사용가능

let

// let
let name = "Mike";
console.log(name); // Mike 출력

let name = "Kyle";
console.log(name); // error!

console.log(name);

// 호이스팅
console.log(name); // ReferenceError
let name = "Mike";
  • 변수의 생성과정 : 1. 선언 단계 2.초기화 단계 3.할당 단계
  • 블록 스코프(block-scoped) : ex) 함수, if문, for문 , while문, try/catch문 → if 문에서 변수를 할당했다면 if 문에서만 사용가능

const

  • 변수의 생성과정 : 선언 + 초기화 + 할당
  • 블록 스코프(block-scoped) : ex) 함수, if문, for문 , while문, try/catch문

생성자 함수

function User(name, age) {
    // this ={}; new를 붙여 실행하는 순간 실행시 생략

    this.name = name;
    this.age = age;

    // return this; new를 붙여 실행하는 순간 실행시 생략

	this.sayName= function() {
    console.log(this.name);  //여기서 this는 호출하는 것을의미
                            // user3.sayName()호출씨 this는 user3를 의미
    }
}

let user1 = new User("Mike",30); // User {name: 'Mike', age: 30, sayName: ƒ}
let user2 = new User("Jack",20); // User {name: 'Jack', age: 20, sayName: ƒ}
let user3 = new User("Chan",15); // User {name: 'Chan', age: 15, sayName: ƒ}
console.log(user1,user2,user3);
user3.sayName();  // chan 출력
  • 함수이름은 대문자
  • new를 사용해서 객체 만들기

객체 메소드

1. Object.assign() : 객체 복제

// 복제
const user = {
    name : "Mike",
    age : 30,
}

const cloneUser = user; // 객체의 값이 아닌 참조값이 저장
cloneUser.name = "Tom"; // cloneUser의 name뿐만 아니라 user의 name도 바뀐다
console.log(user); // {name: 'Tom', age: 30} 출력
console.log(cloneUser); // {name: 'Tom', age: 30} 출력

// Object.assign() : 객체 복제
const user = {
    name : "Mike",
    age : 30,
}

1.
const newUser = Object.assign({}, user); // { } + {name: "Mike", age : 30} =
newUser.name = "Tom";
console.log(newUser); // {name: 'Tom', age: 30} 출력
console.log(user); // {name: 'Mike', age: 30} 출력

2.
const newUser = Object.assign({ gender : "male"}, user);
console.log(newUser); // {gender: 'male', name: 'Tom', age: 30} 출력

3.
const user = {
    name : 'Kevin'
}

const info1 = {
    age : 25
}

const info2 = {
    gender : 'male'
}

const newUser = Object.assign(user,info1,info2);
console.log(newUser) // {name: 'Kevin', age: 25, gender: 'male'}
  • 객체를 복사하고 싶으면 Object.assign()을 써야한다
  • Object.assign( {초기값}, 복제할 대상);

Object.keys(), Object.values(), Object.entries()

const user = {
    name : "Mike",
    age : 30,
    gender : 'male',
}

// 키만 반환
Object.keys(user); ["name", "age", "gender"]

// 값만 반환
Object.values(user); ["Mike",30,"male"]

// 키와 값 둘다 반환
Object.entries(user) [  ["name", "Mike"],["age", 30],["gender", "male"]  ]

[키]

let n = "name";
let a = "age";

const user = {
    [n] : "Mike",
    [a] : 30,
}

console.log(user);  // {name: 'Mike', age: 30}

function makeObj(key, value){
    return {
        [key] : value
    }
}

const obj = makeObj("키", 187);
console.log(obj); // {키: 187}

Object.fromEntries() : 배열 → 객체

let arr = [
    ["mon", "월요일"],
    ["tue", "화요일"],
]

const result = Object.fromEntries(arr);
console.log(result); // {mon: '월요일', tue: '화요일'} 출력

Number, Math

// toString()

let num = 10;
num.toString();  // "10"
num.toString(2); // "1010(2진수)"

let num2 = 255;
num2.toString(16); // "ff"

Math

let num1 = 5.1;
let num2 = 5.7;

// 올림 : ceil
Math.ceil(num1); // 6
Math.ceil(num2); // 6

// 내림 : floor
Math.floor(num1); // 5
Math.floor(num2); // 5

// 반올림 : round
Math.round(num1); // 5
Math.round(num2); // 5

// 소수점 자릿수 : toFixed() → 문자로 나옴 그래서 숫자로 바꿔줘야함
let userRate = 30.1234;
userRate.toFixed(2); // 30.12
userRate.toFixed(0); // 30
userRate.toFixed(6); // 30.123400
userRate.toFixed(2); // "30.12"
Number(userRate.toFixed(2)); // 30.12

문자열 메소드

1.

// 금칙어 : 콜라

function hasCola(str) {
    if(str.indexOf("콜라")){
        console.log("금칙어가 존재");
    }else {
        console.log("통과");
    }
}

hasCola("사이다가 더 낫지"); // -1 if문 에서 -1는 true이다
hasCola("아니야 콜라가 더나아 ");
hasCola("콜라야"); // 0번째 인덱스에서 콜라가 등장  if문에서 0은 false

result.png

  • if 문에서 -1은 true 이고 0은 false이다

2.

//1.
function hasCola(str) {
    if(str.indexOf("콜라") > -1 ){
        console.log("금칙어가 존재");
    }else {
        console.log("통과");
    }
}

//2.includes활용
function hasCola(str) {
    if(str.includes("콜라")){
        console.log("금칙어가 존재");
    }else {
        console.log("통과");
    }
}
  • -1 이란 기준을 넣어야한다

result2.png

배열의 메소드

splice, slice

let arr = [1,2,3,4,5];
arr.splice(1,2); // 인덱스 1부터 2까지 지움
console.log(arr); // [1,4,5] 출력

// arr.splice(n,m,x) : 특정 요소 지우고 추가
let arr2 = [1,2,3,4,5];
arr2.splice(1,3,100,200); // 인덱스 1부터 3까지 지우고 100과 200 추가
console.log(arr2); // [1,100,200,5] 출력

let arr3 = ["나는", "민수", "입니다"];
arr3.splice(1, 0, "대한민국", "경찰관"); // 1번 인덱스에 삭제 없이 대한민국과 경찰관 추가
console.log(arr3); // ['나는', '대한민국', '경찰관', '민수', '입니다']

// arr.slice(n, m); n부터 m까지 반환
let arr4 = [1,2,3,4,5];
arr4.slice(1,4);
console.log(arr4); // [2,3,4]; 1~4바로앞인 3까지 출력

let arr5 = [1,2,3,4,5];
const arrClone = arr5.slice(); // arr5를 arrClone에 복사
console.log(arrClone) // [1, 2, 3, 4, 5]

forEach

// for each
let arr =["Mike","Jane","Silva"];
arr.forEach((name,index) => {
    console.log(`${index + 1}. ${name}`); // 1.Mike  2.Jane  3.Silva 출력
})

reduce

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

// reduce(누적 계산값, 현재값) => {return 계산값};
/*
arr.reduce((prev, cur) => { // prev : 누적 계산값 cur : 현재값

}, 초기값)
*/

const result = arr.reduce((prev, cur) => {
    return prev + cur;
},100)

console.log(result);

📑 출처

Categories:

Updated:

Leave a comment

You may also enjoy

@RequiredArgsConstructor

less than 1 minute read

의존성주입의 종류는Constructor(생성자),Setter,Field 타입이 존재한다.