JavaScript - Symbol, Number, Math, String methods

📚 복습

선언 -> 초기화 -> 할당 순

변수 선언단계

• var는 선언 및 초기화 단계가 동시에 일어난다.
• let은 선언만 진행할 수 있다.
• const는 선언, 초기화, 할당 단계가 동시에 일어난다.

Object.entries(): 객체를 배열로 반환
Object.fromEntries(): 배열을 객체로 반환
Object.assign(): 객체 복제

🔎 심볼(Symbol)

Property key: 문자형

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

Object.keys(obj); // ["1", "false"]

// get
obj['1'] // "1입니다."
obj['false'] // "거짓"

Symbol

유일한 식별자를 만들 때 사용한다. 유일성이 보장된다.

const a = Symbol(); // new를 붙이지 않는다.
const b = Symbol();

console.log(a)
Symbol()

console.log(b)
Symbol()

> a === b;
false
> a == b;
false

문자열 형태로 설명을 붙여줄 수 있다. 디버깅할 때 유용하다.
설명이 동일한 심볼을 여러개 만들어도 각 심볼 값은 다르다.

const id = Symbol('id'); // 설명을 붙일 수 있다.
const id2 = Symbol('id');

> id
Symbol(id)
> id2
Symbol(id)
> id === id2
false
> id == id2
false

Property key: 심볼형

key 심볼형인 프로퍼티는 Object.keys, Object.value, Object.entries, for...in문까지 다 건너뛴다.

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

> user
{ name: "jubby", age: 25, Symbol(id): "myid"}

> Object.keys(user)
["name", "age"]

> Object.values(user)
["jubby", 25]

> Object.entries(user)
[Array(2), Array(2)]

Symbol을 사용하면 특정개체의 원본 데이터를 건드리지 않고, 속성을 추가할 수 있다.

Symbol.for(): 전역 심볼

하나의 심볼만 보장받을 수 있다. 없으면 만들고, 있으면 가져오기 때문이다.
Symbol 함수는 매번 다른 Symbol 값을 생성하지만, Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유한다.

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

> id1 === id2
true
> Symbol.keyFor(id1) // 심볼을 이용해서 이름을 얻음
"id"

전역 심볼이 아닐 경우 description으로 이름을 알 수 있다.

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

숨겨진 Symbol Key 보는 법

const id = Symbol('id');

const user = {
  name: 'jubby',
  age: 25,
  [id]: 'myid'
}

> Object.getOwnPropertySymbols(user);
[Symbol(id)]
> Reflect.ownKeys(user); // 심볼형 키를 포함한 객체의 모든 키를 보여준다.
["name", "age", Symbol(id)]

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

// 내가 작업
// 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 Method

toSring() : 숫자를 문자로 변환

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

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); // 6

/* 0~1 사이 무작위 숫자 생성*/
Math.random() //0.260235636236
Math.random() //0.77785859394

/* M ~ N 사이 임의의 숫자*/
Math.floor(Math.random()*N)+M

/* max(): 최대값*/
Math.max(1,4,-1,5,10,9,5.54); // 10

/* min(): 최소값 */ 
Math.min(1,4,-1,5,10,9,5.54); //-1

/* abs(): 절대값 */
Math.abs(-1) // 1

/* pow(): 제곱 */
Math.pow(2, 10); // 1024

/* sqrt(): 제곱근 */
Math.sqrt(16); // 4

Number

소수점 자릿수

let userRate = 30.1234;

// 소수점 둘째자리까지 표현
Math.round(userRate * 100)/100 // 30.12
userRate.toFixed(2); // "30.12"

userRate.toFixed(0); // "30"
userRate.toFixed(6); // "30.123400"

isNaN()

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

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

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

parseInt()

let margin = '10px';

parseInt(margin); // 10, 읽을 수 있는 부분까지 읽고 반환한다.
Number(margin); // NaN, 문자열이 포함되면 변환 불가

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

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

parseInt('11', 2); // 3

parseFloat()

let padding = '18.5%';

parseInt(padding); // 18
parseFloat(padding); // 18.5

✏ String Method

let html = '<div class="box_title">제목 영역</div>';
let desc = "It's 3 o'clock";

let name = 'jubby';
let result = `My name is ${name}.`;
let add = `2 더하기 3은 ${2+3}입니다.`;

`(백틱): 여러줄을 포함할 수 있다.

let desc = `오늘은 맑고 화창한
날씨가 계속 되겠습니다.
내일은 비소식이 있습니다.`;

let desc = '오늘은 맑고 화창한\n날씨가 계속 되겠습니다.';

length: 문자열 길이

/* length: 문자열 길이 */
let desc = '안녕하세요.';
desc.length // 6

특정 위치에 접근

/* 특정 위치에 접근 */
let desc = '안녕하세요.';
desc[2] // '하'
desc[4] = '용'; // 아무 변화 없다. 배열과 다름
console.log(desc); // 안녕하세요.

대소문자 변환

/* 대소문자 변환 */
let desc = "Hi guys. Nice to meet you";

desc.toUpperCase(); // "HI GUYS. NICE TO MEET YOU"
desc.toLowerCase(); // "hi guys. nice to meet you"

indexOf()

/* indexOf(): 인덱스 번호 */
let desc = "Hi guys. Nice to meet you";
desc.indexOf('to'); // 14
desc.indexOf('man'); // -1, 찾는 문자가 없을 시

if(desc.indexOf('Hi') > -1) {
  console.log('Hi가 포함된 문장입니다.');
}

slice()

/*  slice(n, m): 특정 범위의 문자열을 뽑아내기 */
// n: 시작점, m: 없으면 문자열 끝까지, 양수면 그 숫자까지, 음수면 끝에서 부터 셈
let desc = "abcdefg";

desc.slice(2) // "cdefg"
desc.slice(0, 5) // "abcde"
desc.slice(2, -2) // "cde"

substring()

/*  substring(n, m): n과 m 사이의 문자열 반환, n과 m을 바꿔도 동작한다. */
// 음수 허용 X, 0으로 인식
let desc = "abcdefg";

desc.substring(2,5); // "cde"
desc.substring(5,2); // "cde"

substr()

/*  substr(n, m): n부터 시작해서 m개를 가져옴*/
let desc = "abcdefg";

desc.substr(2,4) // "cdef"
desc.substr(-4,2) // "de"

trim()

/*  trim(): 앞 뒤 공백 제거 */
let desc = " coding         ";

desc.trim(); // "coding"

repeat()

/*  repeat(n): n번 반복*/
let hello = "hello!";

hello.repeat(3); // "hello!hello!hello!"

문자열 비교

1 < 3 // true
"a" < "c" // true

아스키 코드 변환

"a".codePointAt(0); // 97
String.fromCodePoint(97); // "a"

예제

let list = [
  "01. 들어가며",
  "02. JS의 역사",
  "03. 자료형",
  "04. 함수",
  "05. 배열",
];

let newList = [];

for (let i=0; i<list.length; i++) {
  newList.push( list[i].slice(4) );
};

console.log(newList); // ["들어가며", "JS의 역사", "자료형", "함수", "배열"]

// 금칙어 : 콜라
function hasCola(str) {
  if(str.indexOf('콜라')) {
  	console.log('금칙어가 있습니다.');
  } else {
  	console.log('통과');
  }
}

 hasCola('와 사이다가 짱이야!'); // -1, true이기 때문에 "금칙어가 있습니다" 출력
 hasCola('무슨소리, 콜라가 최고');
 hasCola('콜라'); // 0, false이기 때문에 "통과" 출력
  
/* 올바른 함수 */
function hasCola(str) {
  if(str.indexOf('콜라') > -1 ) {
  	console.log('금칙어가 있습니다.');
  } else {
  	console.log('통과');
  }
}

// 금칙어 : 콜라
// includes(): 문자가 있으면 true, 없으면 false 반환
function hasCola(str) {
  if(str.includes('콜라')) {
  	console.log('금칙어가 있습니다.');
  } else {
  	console.log('통과');
  }
}

 hasCola('와 사이다가 짱이야!'); // "통과"
 hasCola('무슨소리, 콜라가 최고'); // "금칙어가 있습니다."
 hasCola('콜라'); // "금칙어가 있습니다."