[코딩앙마] 자바스크립트 중급 강좌 : 140분 완성 21-40

[코딩앙마] 자바스크립트 중급 강좌 : 140분 완성 21-40

2023. 3. 1. 12:45ㆍ카테고리 없음

property key : 문자형

const obj = {
    1 : '1입니다.',
    false : '거짓'
}

symbol(심볼)

: 유일한 식별자를 만들 때 사용

const a = Symbol(); //new를 붙이지 않습니다!
const b = Symbol();

console.log(a) //결과값 : Symbol()
console.log(b) //결과값 : Symbol()

but
a == b;
=> false로 출력

a === b;
=> false로 출력

symbol : 유일성 보장

const id = Symbol('id'); //뒤에 붙은 'id'는 설명해주는 것임. 심볼 생성에 영향x

심볼을 객체로 사용하여 보면

property key : 심볼형

const id = Symbol('id);
const user = {
    name : 'Mike',
    age : 30,
    [id] : 'myid'
}

>> user

=> {name: "Mike", age: 30, Symbol(id): "myid"}

>> user[id]

=> "myid"

>> Object.keys(user);

=> ["name", "age"]

>> Object.values(user);

=> ["Mike", 30]

>> Object.entries(user);

=> [Array(2), Array(2)]

>> for(let a in user){ }도 Symbol은 건너뜀

그렇다면 Symbol은 언제 사용?!

=> 특정 객체에 원본 데이터는 건들이지 않고 속성을 추가할 수 있음

const user = {
    name : 'Mike',
    age : 30
}
const id = Symbol('id');
user[id] = 'myid';

Symbol.for() : 전역 심볼

그런데, 가끔 전역 변수처럼 이름이 같으면 같은 객체를 가리켜야 될 때가 있음

이때 Symbol.for()를 사용

- 하나의 심볼만 보장받을 수 있음

- 없으면 만들고, 있으면 가져오기 때문

- Symbol 함수는 매번 다른 Symbol 값을 생성하지만,

- Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유

const id1 = Symbol.for('id');
const id2 = Symbol.for('id);

id1 === id2; //true

Symbol.keyFor(id1) //"id"

이름을 얻고 싶다면 Symbol.keyFor()를 이용하면 된다

단, 전역심볼이 아닌 심볼은 keyFor()를 이용할 수 없다

대신 description으로 그 이름을 알 수 있다

description

const id = Symbol('id 입니다.');
id.description; //"id입니다."

숨겨진 Symbol key 보는 법

const id = Symbol('id');
const user = {
    name : 'Mike',
    age : 30,
    [id] : 'myid'
}
Object.getOwnPropertySymbols(user); //[Symbol(id)]
Reflect.ownKeys(user); //["name", "age", Symbol(id)]

Symbol을 완전히 숨길 수 있는 방법은 없다

getOwnPropertySymbols를 사용하면 Symbols만 볼 수 있다

Reflect를 사용하면 Symbol키를 포함한 모든 키를 보여준다

실습

//다른 개발자가 만들어 놓은 객체
const user = {
    name: "Mike",
    age: 30,
};

//내가 작업
//user.showName = function () {};
const showName = Symbol("show name");
user[showName] = function () {
    console.log(this.name);
};

user[showName]();

//사용자가 접속하면 보는 메세지
for(let key in user) {
    console.log(`His ${key} is ${user[key]}.`);
}

Number, Math

Number

toString()

: 10진수 -> 2진수/16진수

숫자를 문자로 바꿔줌

let num = 10;

num.toString(); //"10"
num.toString(2); //"1010" //괄호 안에 있는 진법으로 바꿔줌

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

Math

Math.PI;
// >>3.141592653589793

Math.ceil() : 올림

let num1 = 5.1;
let num2 = 5.7;

Math.ceil(num1); //6
Math/ceil(num2); //6

Math.floor() : 내림

let num1 = 5.1;
let num2 = 5.7;

Math.floor(num1) //5
Math.floor(num2) //5

Math.round() : 반올림

let num1 = 5.1;
let num2 = 5.7;

Math.round(num1); //5
Math.round(num2); //6

소수점 자릿수

let userRate = 30.1234;
//요구사항 : 소수점 둘째자리까지 표현(셋째 자리에서 반올림)

Math.round(userRate * 100)/100 //30.12

소수점 자릿수 : toFixed()

let userRate = 30.1234;
//요구사항 : 소수점 둘째자리까지 표현(셋째 자리에서 반올림)

userRate.toFixed(2);
//30.12

toFixed()는 숫자를 인수로 받아 그 숫자만큼 소수점 이하 개수에 반영

만약 0이거나 기존 소수부의 개수보다 크면 정수로 남고(0) / 0으로 채워줌(기존 소수부의 개수보다 클 경우)

문제점은 toFixed()는 문자열로 반환한다는 것이다

따라서 Number 안에 넣어서 숫자로 변환하는 과정이 필요

let userRate = 30.1234;

userRate.toFixed(2); //"30.12"
Number(userRate.toFixed(2)); //30.12

isNaN()

: NaN인지 아닌지 판단해줌

let x = Number('x'); //NaN

x == NaN //false
x === NaN //false
NaN == NaN //false

isNaN(x) //true
isNaN(3) //false

parseInt()

: 문자열을 숫자로 바꿔줌

Number와 다른 점은 문자가 혼용되어 있어도 동작을 한다는 점

숫자로 읽을 수 있는 부분만 읽고 문자를 만나면 숫자를 반환함

그래서 숫자로 시작하지 않으면 parseInt()는 NaN을 반환

let margin = '10px';

parseInt(margin); //10
Number(margin); //NaN

let redColor = 'f3';
parseInt(redColor); //NaN

let redColor = 'f3'
parseInt(redColor, 16); //243 //16진수

parseFloat()

: parseInt()와 비슷하게 작동하지만 부동소수점을 반환

let padding = '18.5%'
parseInt(padding); //18
parseFloat(padding); //18.5

Math.random()

: 0~1 사이의 무작위 숫자 생성

그래서 만약 1~100 사이 임의의 숫자를 뽑고 싶다면?

Math.floor(Math.random()*100)+1

Math.max() / Math.min()

: 인수 중 최대값, 최소값을 구할 수 있다

Math.max(1, 4, -1, 5, 10, 9, 5.54); //10
Math.min(1, 4, -1, 5, 10, 9, 5.54); //-1

Math.abs()

: 절대값

Math.pow(n, m)

: 제곱

Math.sqrt()

: 제곱근

[String]

' " `

html은 '로 감싸는 것이 편함

반면에 문자열은 "로 감싸는 것이 편함

`의 유용한 기능

=> 여러줄을 표현할 수 있다

length

: 문자열 길이

ex) desc.length

toUpperCase()

: 모든 영문을 대문자로 바꿔줌

toLowerCase()

: 모든 영문을 소문자로 바꿔줌

str.indexOf(text)

: 문자를 인수로 받아 몇 번째에 위치하는지 알려줌

만약 찾는 문자가 없으면 -1을 반환

포함된 문자가 여러 개라도 처음 위치에 존재하는 것만 반환

if문을 쓸 때 주의해야 함

str.slice(n, m)

: n부터 m까지의 문자열을 반환

str.substring(n, m)

: n과 m 사이 문자열 반환

n과 m을 바꿔도 동작함

음수는 0으로 인식

str.substr(n, m)

: n부터 시작

m개를 가져옴

str.trim()

: 앞 뒤 공백 제거

str.repeat(n)

: n번 반복

당니의 블로그