[JS] 중급문법2 (+ Symbol, Math, toString, parseInt)

Symbol

const obj={
    1:'hi',
    false:'거짓',
}
console.log(Object.keys(obj)); //[ '1', 'false' ]
console.log(obj['1']); //hi

원래 객체 키값(property key)은 숫자나 boolean형으로 주어져도, 문자열로 반환된다. 따라서 밸류값에 접근할 때도 키값을 문자열 형태로 전달한다. 

그리고 객체의 property 키로 전달 가능한 형태가 문자열 말고 하나 더 있는데, 바로 Symbol 형이다.

const a = Symbol();
const b = Symbol();
const c = Symbol('hi');
console.log(a===b); //false
console.log(a==b); //false
console.log(c); //Symbol(hi)
console.log(c.description); //hi , 일반 심볼의 키값 출력

심볼은 유일한 식별자를 만들 때 사용한다. 즉 위 예시처럼 심볼형으로 생성하면 변수의 유일성이 보장된다. 전체 코드에서 딱 하나로 존재한다. 심볼 생성 시, ()안에 키(설명)를 문자열 형태로 전달할 수 있다. 이는 심볼 생성에는 어떠한 영향도 주지 않는다. 오직 가독성을 위해서 써준다. 

const id=Symbol('id');
const user={
    name:'Mike',
    age : 30,
    [id]:'myid', //competed property key 사용
}
console.log(user); 
//{ name: 'Mike', age: 30, [Symbol(id)]: 'myid' }

심볼 형은 객체의 keys(), values(), entries() 등의 다양한 메소드와 for in 문에서 인식되지 않는다. 따라서 심볼은 객체의 기존 데이터는 건드리지 않고, 새로운 데이터를 추가할 때 주로 사용한다.

 

그런데 하나의 심볼을 공유해서 사용해야 할 때는 Symbol.for() 로 전역심볼을 호출해서 사용한다. 일반 심볼 Symbol() 은 호출할 때마다 새로운 심볼이 만들어지지만, Symbol.for()로 하면 없으면 만들고 있으면 가져오기 때문에 하나의 심볼을 보장 받을 수 있다. 즉, 하나의 심볼을 키를 통해서 여러 곳에서 공유하는 것이다.

const id1=Symbol.for('id');
const id2=Symbol.for('id');
console.log(id1===id2); //true
//해당 심볼의 키값
console.log(Symbol.keyFor(id1)) //id

 

만약 심볼을 포함한 객체의 모든 키를 보고 싶다면 아래 같은 메소드를 이용할 수 있다.

console.log(Object.getOwnPropertySymbols(user)) //심볼만
console.log(Reflect.ownKeys(user)); //심볼 포함한 모든 키

결론은 이미 만들어져 있는 객체 데이터와 반복문에 영향을 주지 않으면서, 객체에서 유일한 프로퍼티를 사용하고 싶을 때 심볼을 사용한다는 것이다. 심볼을 쓰면 같은 이름의 키를 가진 프로퍼티가 있는지 고민할 필요도 없고, 다른 사람이 만들어논 객체를 건드릴 일도 없으니 유용하게 사용할 수 있다.

//이미 만들어져 있는 객체
const user1={
    name:"Mike",
    age:30,
};

//새로 추가할 작업
const showName=Symbol("show name");//심볼 생성
user1[showName]=function(){ //기존 객체에 심볼 형태로 프로퍼티 추가
    console.log(this.name);
}
user1[showName](); //Mike

//사용자가 접속해서 보는 메시지
for(let key in user1){
    console.log(`His ${key} is ${user1[key]}.`);
    /**
     * His name is Mike.
     * His age is 30.
     */
    //새로 추가한 심볼은 출력되지 않음
}

 

toString()

이 메소드는 숫자를 문자로 바꿔주는 기능을 한다. 하지만 () 안에 2, 8, 16 등의 숫자를 넣어주면, 10진수의 숫자를 해당 숫자의 진수로 바꿔준다.

let num=10;
console.log(num.toString(2)); //1010

 

Math

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

console.log(Math.ceil(num1)); // 6, 올림
console.log(Math.floor(num1)); // 5, 내림
console.log(Math.round(num1)); // 5, 반올림

 

toFixed

toFixed 는 문자열로 값을 리턴해주기 때문에 다시 Number()를 씌워서 사용해야한다. 

let num2=5.2356
console.log(num2.toFixed(2)) // 5.24 , 해당 소수점 자리수까지 표현

 

Number & parseInt

let x=Number('x'); //x는 숫자값이 아니므로 NaN
console.log(isNaN(x));//특정 변수가 NaN 인지 판단할 수 있는 유일한 메소드이다.

parseInt 는 앞에서부터 읽을 수 있는 숫자만 읽고, 문자열을 숫자로 반환해준다. 따라서 문자로 시작하는 문자열의 경우에는 숫자와 섞여 있어도 NaN을 출력한다.

Number는 해당 문자열 안에 숫자만 있어야 동작한다.

let margin='10px';
console.log(parseInt(margin)); //10, 문자가 섞어있어도 동작
console.log(Number(margin)); //NaN, 숫자만 있어야 동작

parseInt 에 2번째 인자로 전달한 문자의 진수를 전달한다면, 숫자로 바꾼 뒤 자동으로 10진수로 변환해서 출력해준다.

console.log(parseInt('f3', 16));
//243, 문자열을 16진수 숫자로 바꾸고, 다시 10진수로 바꿔서 243이 되었다. 

console.log(parseInt('11', 2)); 
//3 , 문자열을 2진수 숫자로 바꾸고, 이진수 11을 십진수 3으로 바꿔주었다.

 

parseFloat & parseInt

console.log(parseFloat('11.2345$%')); 
//11.2345 , 소수점까지 반환

console.log(parseInt('11.2345$%')); 
//11 , 정수만 반환, 소수점 무시

 

Math.random()

Math.random() //0~1 사이의 무작위 실수 생성
Math.floor(Math.random()*100)+1 //1 ~ 100 사이의 무작위 정수 생성

Math.max() // 최대값
Math.min() // 최소값
Math.abs() // 절대값
Math.pow() // 제곱
Math.sqrt() // 제곱근

 

 

 

* competed property (계산된 프로퍼티)

객체 안에서 [변수명]을 쓰면, '객체 외부에서 생성된' 변수의 참조값이 갖고 있는 해당 밸류값을 리턴해준다.

 

외부 참고 자료

https://www.youtube.com/watch?v=4_WLS9Lj6n4&t=1179s