02월05일 자바스크립트 중급1

코딩앙마 https://www.youtube.com/c/%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88

코딩앙마

 

#변수, 호이스팅, TDZ

var는 한번 선언된 변수를 다시 선언할 수 있고, 선언하기 전에 사용할 수 있다.

 

TDZ(Temporal Dead Zone)

변수의 선언과 변수의 초기화 사이의 변수에 접근할 수 없는 지점

 

호이스팅 : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동(let도 호이스팅이 된다)

 

변수의 생성단계 

1. 선언 단계

2. 초기화 단계

3. 할당 단계

 

var는 1번과 2번이 동시에 된다(초기화가 없다면 undefined를 할당해줌)

그러나 let은 1번과 2번이 분리되어 있다. const는 1+2+3이 동시에 되어야 한다.

 

var : 함수 스코프(function-scoped)

let, const : 블록 스코프(block-scoped)

함수, if문, for문, while 문, try/catch문에서만 사용 가능

 

var도 함수 내에서 선언하면 함수 밖에서 사용할 수 없음

 

#생성자 함수

function User(name, age) { //첫글자는 대문자로 
    this.name = name;
    this.age = age;
    this.sayName = function(){
    	console.log(this.name); //여기서 this는 user3
    }
}

//new 연산자를 사용해서 호출
let user1 = new User('Mike', 30);
let user2 = new User('Jane', 30);
let user3 = new User('Tom', 30);

user3.sayname(); //Tom

 

#객체 메소드(Object methods)와 계산된 프로퍼티(Computed property)

//Computed property

let a = 'age';

const user = {
    name : 'Mike',
    [a] : 30 // age : 30
}

const user = {
    [1+4] : 5,
    ["안녕"+"하세요"] : "Hello"
}

 

Object.assign() : 객체 복제

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

const cloneUser = user; // 복제가 되지 않음 user 변수가 가리키는 것은 객체가 아닌 참조 값이기 때문이다

const newUser = Object.assign({},user); //빈 객체는 초기값임
// {} + {name : 'mike', age : 30 }
// 키 값이 같다면 덮어쓴다.

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"]
]
*/

Object.fromEntries() : 키/값 배열을 객체로

#심볼(Symbol)

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

const a = Symbol();
const b = Symbol();

// a===b false 
// a==b  false

const id = Symbol('id');
const id2 = Symbol('id');

// id === id2

 

property key : 심볼형

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

Object.keys(user); //["name","age"]
Object.values(user); //["Mike", 30]

특정 개체에 원본 데이터를 건드리지 않고, 내가 원하는 속성을 추가할 수 있다.

 

Symbol.for() : 전역 심볼

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

// id1 === id2 true

Symbol.keyFor(id1) //id


//전역 심볼이 아닐 경우
const id = Symbol('id 입니다.');
id.description; //"id 입니다."

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

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

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

 

숨겨진 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)]

 

#숫자, 수학 method

Math.ceil() 올림

Math.floor() : 내림

Math.round : 반올림

 

소수점 자릿수 : toFixed()

let userRate = 30.1234;
요구사항 : 소수점 둘째 자리까지 표현
userRate.toFixed(2); //30.12
userRate.toFixed(6); //30.123400

유의할 점 : toFixed()는 문자열을 반환

 

isNaN() : 오직 이 함수만이 NaN인지 판단할 수 있음

 

parseInt() 

let margin = '10px';

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

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

parseInt(redColor, 16); // 16진수를 10진수로 243
parseInt('11',2) // 3

parseFloat() : 소수점반환

 

Math.random() : 0~1사이 무작위 숫자 생성

// 1~100 사이 임의의 숫자를 뽑고 싶다면?
Math.floor(Math.random()*100)+1

Math.max(), math.min() : 최댓값, 최솟값 구할 수 있음

 

Math.abs() : 절대 값

Math.pow(n,m) : 제곱 n^m

Math.sqrt() : 제곱근

 

#문자열 메소드(String methods)

` 백틱

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

length : 문자열 길이

배열과 달리 문자열은 한글자 바꾸는 걸 허용하지 않음

 

toUpperCase() / toLowerCase() :

소문자 -> 대문자, 소문자 -> 대문자

 

str.indexOf(text)

문자열이 위치한 인덱스 반환. 없을 경우 -1

let desc = "Hi guys. Nice to meet you.";

//">-1"없이 그대로 쓰면 hi가 0이기에 if문이 false가 됨 
if(desc.indexOf('hi')>-1){
	console.log("hi가 포함된 문장입니다.");
}

str.slice(n,m)

n은 시작점, m은 없으면 문자열 끝까지, 양수면 그 숫자까지(포함하지 않음) 음수면 끝에서부터 셈

 

str.substring(n,m)

n과 m 사이 문자열 반환(둘이 바꿔도 동작)

음수는 0으로 인식

 

str.substr(n,m)

n부터 시작해서 m개를 가져옴

 

str.trim() 

앞 뒤 공백 제거

 

str.repeat(n)

n번 반복

 

//문자열 비교

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