[JavaScript] 중급 정리 (생성자 함수, 객체 메소드, 심볼, Math, 문자열)

혜연·2023년 2월 8일

자바스크립트

JavaScript

목록 보기

3/13

📚 중급개념 정리 #1

1. 변수

1.1 var

var name = 'Mike'
console.log(name);
var name = 'Jiwon'
console.log(name);

var은 한 번 선언된 변수를 다시 사용해도 에러가 발생하지 않고 출력된다.
let의 경우에는 선언된 변수를 다시 사용하면 에러가 발생한다.

1.2 let

1.2.1 hosting(호이스팅)이란?

변수 선언이 코드의 최상위에서 선언된 것처럼 행동하는 것

아래 코드를 통해 이해해보자.

console.log(a)
var a; //undefined

일반적으로 변수가 선언되고 초기화된 다음 변수를 사용한다. 하지만 위 코드에서는 변수가 선언되기 전에, 변수를 사용하고 그 다음 코드에서 변수를 선언하고 있다.
이때, var a;코드가 최상위에서 선언된 것처럼 행동하는 것을 호이스팅이라 한다.
var은 (선언 + 초기화) -> 할당 단계를 거쳐 변수가 할당된다.
var은 선언과 초기화가 함께 되기에 호이스팅 되면 에러가 아니라 undefined 값을 출력한다. 선언과 초기화가 완료되어 변수가 만들어졌지만, 값은 할당되지 않았기에 undefined이 나오는 것이다. var, let, const 모두 호이스팅이 적용된다.
let의 경우에는 어떻게 작동할까?

console.log(a);
let a;

// Cannot access 'a' before initialization
let은 선언 -> 초기화 -> 할당 단계를 거쳐 변수가 할당된다.
var과 다르게 let은 선언과 초기화 작업이 동시에 이뤄지지 않는다.위 코드는 a가 초기화되기 전이기에 접근할 수 없다는 에러가 출력된다. 호이스팅이 되어 변수 선언이 최상위로 올라가지만, 초기화 작업이 이루어지지 않은 변수이기에 에러가 발생하는 것이다.

1.3 const

const PI = 3.14;

const는 선언+초기화+할당 단계가 한번에 선언되어야 한다. const는 값이 변하지 않는 변수이기에 당연한 것이다.
var, let은 변수 선언 뒤에 값을 할당할 수 있다.

let name 
name = 'Jiwon'
console.log(name);

예측 가능한 결과를 출력하고, 에러를 줄이기 위해서 var보다는 let, const를 사용하자😉

2. 생성자 함수

여러명의 학생이나 고객처럼 비슷한 객체를 여러개 만드는 경우, 일일히 객체를 생성하지 않고 생성자 함수를 작성해 쉽게 객체를 생성할 수 있다.
빠르고 일관성있는 객체를 생성할 때 효율적으로 사용된다.

// 생성자 함수
function Student(name,age) {
  this.name = name;
  this.age = age;
  this.sayHello = function(){
    console.log(`저는 ${this.name}이고 ${age}살 입니다.`);
  }
}

let stu1 = new Student('Minji',20);
let stu2 = new Student("Jiwon",22);

stu1.sayHello(); //"저는 Minji이고 20살 입니다."
stu2.sayHello(); //"저는 Jiwon이고 22살 입니다."

new 연산자로 함수를 호출하고, 함수에 맞는 매개변수만 전달하면 원하는 객체를 생성할 수 있다. 필요한 재료만 넣어주면 그대로 찍어주는 틀의 개념인 것이다. 생성자 함수의 이름은 항상 첫글자는 대문자로 작성해주자.

3. 객체 메소드, 계산된 프로퍼티

3.1 object.assign()

assign()은 객체를 복제하는 메소드이다. 아래 코드를 살펴보자.

const user = {
  name : 'Minji',
   age : 20,
}
const user2 = user; // 복제??
user.age=30;

console.log(user); //{ "name" : "Minji", "age" : 30}

const user2 = user로 객체 복제가 제대로 이루어진 것이 아니다. 출력 결과물을 보면 user2의 나이를 변경하니 기존의 user의 나이가 변경된 것을 확인할 수 있다. 이는 user2와 user가 하나의 객체를 참조하고 있다는 의미이다.
객체 복제는 Object.assign() 메소드를 통해 제대로 이뤄진다.

const user = {
  name : 'Minji',
   age : 20,
}
const user2 = Object.assign({},user); // 복제하기
user2.age=30;
console.log(user); //{"name": "Minji","age": 20}
console.log(user2); //{"name": "Minji","age": 30}

빈 객체{}에 user가 병합되어 user2가 생성된다. user와 user2는 다른 객체이기에 user2의 값을 변경해도 user의 값은 그대로인 것을 확인할 수 있다.

const user = {
  name : 'Minji',
   age : 20,
}
const user2 = Object.assign({height:160, name:'Jiwon'},user);
console.log(user2); //{"height": 160,"name": "Minji", "age": 20}

위 코드처럼 {}사이에 원하는 프로퍼티 값을 주고, 이에 병합할 수도 있다.

const user = {
  name : 'Minji',
   age : 20,
}
const info1 = {
  height : 170,
}
const info2 = {
  weight : 55,
}

Object.assign(user,info1,info2); // 합치기
console.log(user); //{"name": "Minji","age": 20,"height": 170,"weight": 55}

위 코드처럼 user객체에 info1, info2를 합쳐줄 수도 있다.

3.2 키/값 반환 메소드

Object.keys() : 객체의 키를 배열로 반환
Object.values() : 객체의 키의 값을 배열로 반환

const user = {
  name : 'Minji',
   age : 20,
}
console.log(Object.keys(user)); // [object Array] (2)["name","age"]
console.log(Object.values(user)); //[object Array] (2)["Minji",20]`

Object.entries() : 키/값 둘 다 배열로 출력

const user = {
  name : 'Minji',
   age : 20,
}
const result=Object.entries(user);
console.log(result); //[object Array] (2)[// [object Array] (2)["name","Minji"],// [object Array] (2)["age",20]]

Object.fromEntries : Object.entries()와 반대

let arr =
    [
      ["name","Minji"],
      ["age", 20],
    ]
const result=Object.fromEntries(arr);
console.log(result); //// [object Object] {"name": "Minji","age": 20}

3.3 계산된 프로퍼티

function makeObject(key,val){
  return{
    [key] : val,
  }
}

const user1=makeObject('나이',20);
console.log(user1) /// [object Object] {"나이": 20}

키로 어떤것이 들어오는지 확실치 않거나 항상 다를때 사용할 수 있다. 위의 코드에서 [key]는 makeObject('나이',20)에서의 '나이'가 된다.
만약 makeObject('성별','female')로 주어지면 [key]는 '성별'을 받는다.

function makeObject(key,val){
  return{
    [key] : val,
  }
}

const user1=makeObject('성별','female');
console.log(user1) //{ "성별": "female"}

4. Symbol 심볼

심볼은 다른 개발자가 작성한 기존 객체를 건드리지 않고 자신이 원하는 프로퍼티를 추가할 때 유용하게 사용된다. 즉, 자신만의 유일한 프로퍼티를 만들고 싶을 때 사용한다.🤫

const user={
  name:"Mike",
  age:20,
}
const id=Symbol('id');
user[id]='Myid';
console.log(user.[id]) //"Myid"
console.log(user) //{ "name": "Mike", "age": 20}

위의 코드에서 console.log(user);로 user 객체를 출력하면 id 프로퍼티는 출력되지 않는 것을 확인할 수 있다. 기존 객체에 종속되지 않은 유일한 객체이기에 숨겨지는 것이다.

5. 숫자, 수학 method

자바스크립트의 Math 내장 객체는 수학과 관련된 여러 프로퍼티와 메소드를 가지고 있다.

Math.ceil() : 올림
Math.floor() : 내림
Math.round() : 반올림

console.log(Math.ceil(1.2)) // 2
console.log(Math.floor(1.8)) // 1 
console.log(Math.round(1.5)) // 2

Math.PI : 원주율을 표시
toFixed() : 소수점 몇자리까지 표현

const PI = Math.PI;
console.log(PI) // 3.141592653589793
console.log(PI.toFixed(2)) // "3.14"
console.log(Number(PI.toFixed(2))) // 3.14

문자열로 반환해주기에 반환된 값을 다시 Number()를 통해 숫자로 변환해서 주로 사용된다.

isNaN() : NaN인지 아닌지 유일하게 판단해주는 메소드
parseInt() : 정수 반환, 문자열을 만나기 전까지의 숫자를 반환

const str="100살"
const str2="하이2"
console.log(parseInt(str)) // 100
console.log(parseInt(str2)) // NaN

parseFloat() : 정수 이후의 부등소수점까지 반환

console.log(parseInt(100.34)) // 100
console.log(parseFloat(100.34)) // 100.34

Math.random() : 0~1사이의 무작위 숫자를 생성함
ex) Math.random()100 + 1 // 1 ~ 100 사이의 랜덤 숫자를 생성함
Math.random()50 + 2 // 2 ~ 50 사이의 랜덤 숫자를 생성함

console.log(Math.floor(Math.random()*100)+1) // 41
console.log((Math.random()*100)+1) // 82.48999447585408

Math.floor을 해주는 이유는 위 코드처럼 0~100 사이의 정수만 얻기 위해서이다.

Math.max() : 최댓값을 반환
Math.min() : 최솟값을 반환

console.log(Math.max(1,5,20,9,3)) // 20
console.log(Math.min(1,5,20,9,3)) // 1

Math.abs() : 절댓값 반환
Math.sqrt() : 제곱근(루트)값 반환
Math.pow(n,m) : n의 m제곱 반환

console.log(Math.abs(-1)) // 1
console.log(Math.pow(2,3)) // 8 
console.log(Math.sqrt(16)) // 4

6. 문자열

${} 달러와 중괄호를 사용해 표현식, 변수값을 표현할 수 있다.
베틱의 장점 : 베틱 안에서 여러줄을 사용할 수 있다.
아래 코드처럼 여러줄을 한번에 출력할 수 있다.

msg = `안녕하세요
저는 학생회장입니다.
오늘 날씨가 참 좋아요.`;
console.log(msg);

length : 문자열 길이를 반환
문자열도 배열처럼 인덱스로 접근 가능, 하지만 인덱스로 특정 글자를 바꾸거나 삭제는 불가능
toUpperCase( ) / toLowerCase( ) :대소문자 바꾸는 메소드
str.indexof(text) : str에 text가 위치한 인덱스를 반환해줌
만약, 해당 text가 없으면 -1을 반환함. 문자열에 해당 글자가 있는지 확인하고 싶을 땐, 반환값이 -1인지 아닌지 확인!
str.slice(n,m) : 인덱스 n부터 m사이의 문자를 반환

list = [
  "01. 들어가며",
  "02. 소개",
  "03. 맺음말"
];
newlist=[];
for(let i=0;i<list.length;i++){
  newlist[i]=list[i].slice(4); //인덱스 4부터 끝까지 반환
}
console.log(newlist); //["들어가며","소개","맺음말"]

substring(n,m) : n부터 m사이 문자 반환, slice()와 같음
substr(n,m) : n부터 m개의 문자 반환

const str="hello, world!"
const str1 = str.substring(0,5); 
const str2 = str.substr(0,5); 

console.log(str1)// "hello"
console.log(str2)// "hello"

trim() : 앞 뒤 공백을 제거, 사용자로부터 입력을 받을 때 주로 사용

let str = prompt("입력해주세요.");
rstr = str.trim();
console.log(str) //"  hello world!   "
console.log(rstr) //"hello world!"

repeat(n) : n번 반복

let str = 'hi';
rstr = str.repeat(3);
console.log(rstr) //"hihihi"

문자도 서로 비교 가능

대문자보다 소문자가 크다.
대문자 경우 : A > Z
소문자 경우 : a < z

유투버 코딩앙마님 자바스크립트 중급강좌를 보고 정리한 내용입니다.
코딩앙마-자바스크립트 중급 강좌

혜연

이전 포스트

[JavaScript] 기초 정리 (반복문, 함수, 화살표 함수, 객체, 배열)

다음 포스트

[JavaScript] 중급 정리 (생성자 함수, 객체 메소드, 심볼, Math, 문자열)

JavaScript

📚 중급개념 정리 #1

1. 변수

1.1 var

1.2 let

1.2.1 hosting(호이스팅)이란?

1.3 const

2. 생성자 함수

3. 객체 메소드, 계산된 프로퍼티

3.1 object.assign()

3.2 키/값 반환 메소드

Object.keys() : 객체의 키를 배열로 반환
Object.values() : 객체의 키의 값을 배열로 반환

Object.entries() : 키/값 둘 다 배열로 출력

Object.fromEntries : Object.entries()와 반대

3.3 계산된 프로퍼티

4. Symbol 심볼

5. 숫자, 수학 method

6. 문자열

[JavaScript] 기초 정리 (반복문, 함수, 화살표 함수, 객체, 배열)

[JavaScript] 배열 메소드 💡

0개의 댓글

[JavaScript] 중급 정리 (생성자 함수, 객체 메소드, 심볼, Math, 문자열)

JavaScript

📚 중급개념 정리 #1

1. 변수

1.1 var

1.2 let

1.2.1 hosting(호이스팅)이란?

1.3 const

2. 생성자 함수

3. 객체 메소드, 계산된 프로퍼티

3.1 object.assign()

3.2 키/값 반환 메소드

Object.keys() : 객체의 키를 배열로 반환Object.values() : 객체의 키의 값을 배열로 반환

Object.entries() : 키/값 둘 다 배열로 출력

Object.fromEntries : Object.entries()와 반대

3.3 계산된 프로퍼티

4. Symbol 심볼

5. 숫자, 수학 method

6. 문자열

[JavaScript] 기초 정리 (반복문, 함수, 화살표 함수, 객체, 배열)

[JavaScript] 배열 메소드 💡

0개의 댓글

Object.keys() : 객체의 키를 배열로 반환
Object.values() : 객체의 키의 값을 배열로 반환