JavaScript 중급 - 1

변수

• let, const, var
• var와 let은 크게 다르지 않음. 대부분의 경우 같이 사용함.
• var
  • 한 번 선언된 변수를 다시 선언할 수 있다.
  • 선언하기 전에 사용할 수 있다. 선언만 호이스팅 됨.
  • 할당하기 전에 사용할 수 없는 이유는 TDZ(Temporal Dead Zone) 때문임.
  • 함수 스코프(function-scoped)

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

  • 선언 및 초기화단계가 함께 진행됨.
• let
  • 한번 서언된 변수를 다시 선언할 수 없음.
  • 선언단계와 초기화단계가 따로 진행됨.
  • 블록 스코프(block-scoped)
• const
  • 선언+초기화+할당이 함께 진행됨.
  • 블록 스코프(block-scoped)
    • 함수, if문, for문, while문, try/catch 문 등

변수의 생성과정

1. 선언단계
2. 초기화단계
3. 할당단계

생성자 함수

객체 리터럴

let user = {
 	name : 'mike',
  	age : 30,
}

• 이런 객체를 여러개 만들어야 할 때 필요한 것이 생성자 함수

function User(name, age) { // 생성자 명의 첫 글자는 대문자로
 	this.name = name;
  	this.age = age;
  	this.sayName = function() {
  		console.log(this.name); 
    }
  
}

let user1 = new User('Mike', 30);
let user2 = new User('Jane', 22);

• new 연산자를 통해서 호출
• user1.sayName(); 을 호출할 경우 'Mike'가 호출됨 그 이유는 this는 .앞의 객체를 지칭하기 때문임.
• new를 붙이지 않으면 그냥 함수를 실행하는 것임. 생성자 함수는 반드시 new를 호출하여야 함.

객체

computed property(계산된 프로퍼티)

let a = 'age';

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

const user1 = {
 	[1 + 4] : 5,
  	["안녕" + "하세요"] : "Hello" // 식 자체를 넣는 것도 가능
}

• 대괄호를 쓰면 a 변수에 해당하는 값이 들어감.
• 계산식도 속성명으로 들어갈 수 있음.
• 어떤 것이 key가 될지 모르는 객체를 만들 때 유용

Method

Object.assign() : 객체 복제

const user = {
 	name : 'Mike',
  	age : 30, 
}
const cloneUser = user; // 복제 안됨. 같은 리터럴을 바라봄. 하나바꾸면 둘다 변경됨.

const newUser = Object.assign({}, user); // 빈객체는 초기값, 두번째 값이 초기값에 들어감)

const newUser1 = Object.assign({hair : 'blue'}, user); // hair에다가 user리터럴 추가

const newUser2 = Object.assign(user, user1, user2); // 각 객체의 값들 병합

const newUser3 = Object.assign({name : 'blue'}, user2); // 같은 속성명일 경우 두번째 값을 덮어쓰기

• 자바로 치면 얕은 복사, 깊은 복사의 개념인 듯 함.

Object.keys() : 키 배열 반환

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

Object.keys(user); // [ "name", "age", "gender" ] 키 값들을 배열로 반환

Object.values() : 값 배열 반환

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

Object.values(user); // [ "Mike", 30, "male" ] 값들만 배열로 반환

Object.entries() : 키/값 배열 반환

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

Object.entries(user); // [ ["name","Mike"], ["age",30], ["gender", "male"] ]

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

const arr = [ ["name","Mike"], ["age",30], ["gender", "male"] ];
      
Object.fromEntries(arr); // { 	name : 'Mike', age : 30, gender : 'male',}

심볼

property key : 문자형

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

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

symbol

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

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

console.log(a); // Symbol()

console.log(b); // Symbol()

a === b; //false

a == b; //false

• 유일성 보장

const id = Symbol('id'); // 설명을 추가하기 가능

• 심볼형

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

console.log(user); // { name: 'Mike', age: 30, [Symbol(id)]: 'myid' }

Object.keys(user); //[ 'name', 'age' ]
// values, entries, for문 등도 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 : 'Mike',
  	age : 30,
  	[id] : 'myid'
}

Object.getOwnPropertySymbols(user); // [Symbol(id)] 심볼 키 보기

Reflect.ownKeys(user); //["name", "age", Symbol(id) ] 심볼 포함 모든 키 보기

Number, Math

toString() : 10진수 -> 2진수/16진수

let num = 10;

num.toString(); //"10"
num.toString(2); // "1010"

let num2 = 255;

num2.toString(16); // "ff"

Math

• Math.pie() : 원주율
• Math.ceil() : 올림
• Math.floor() : 내림
• Math.round() : 반올림
• Math.random() : 0~1사이의 무작위 숫자 생성
  • 1 ~ 100사이의 임의수를 뽑고 싶다면? Math.floor(Math.random()*100)+1
• Math.max(1,2,3,4,5); -> 5
• Math.min(1,2,3,4,5); -> 1
• Math.abs(-1); -> 1
• Math.pow(2,10); -> 1024, 첫번째 인자의 두번째 인자 제곱
• Math.sqrt(16); -> 4, 제곱근

toFixed() : 소수점 자릿수

let userRate = 30.1234;

userRate.toFixed(2); // 30.12

userRate.toFixed(0); // 30

userRate.toFixed(6); // 30.123400

• toFixed()는 문자열로 반환하기 때문에 넘버로 바꾸어줘야함.

isNaN()

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

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

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

parseInt()

문자를 숫자로 바꿔 줌

let margin = '10px';

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

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

parseInt(redColor, 16); //243

parseInt('11',2) //3

parseFloat()

let padding = '18.5%';

parseInt(padding); //18

parseFloat(padding); //18.5

String

' , " , `

• ' , " , ` 이 있음. ' , "는 같은 역할을 하는데 상황에 따라 사용하면 됨

let html = '<div class="box_title">제목 </div>'; // 이럴 때는 ''

let desc = "It's 3 o'clock." // 이럴 때는 ""

// 백틱은 달러와 중괄호를 이용해 변수나 표현식을 넣을 수 있음.
let name = 'Mike';
let result = `My name is ${name}.` // My name is Mike.
let add = `2 더하기 3은 ${2+3}입니다.` // 2 더하기 3은 5입니다. 
// 백틱은 여러줄 표현 가능
let desc = `오늘은
맑고
화창합니다.`;
// 백틱을 안쓴다면
let desc = '오늘은 \n 맑고 \n 화창합니다.';

let desc = '오늘은
맑고
화창합니다.'; // error

length : 문자열 길이

let desc = '안녕하세요.';
desc.length // 6

desc[2] //하

desc[4] = '용'; //변화 없음

toUpperCase() 대문자 변환/toLowerCase() 소문자 변환

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

desc.toUpperCase(); // HI GUYS. NICE TO MEET YOU.

desc.toLowerCase(); // hi guys. nice to meet you.

str.indexOf(text) 문자의 index 반환

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

desc.indexOf('to'); // 14, 첫번째 위치만 반환

desc.indexOf('man'); // -1, 없음

str.slice(n,m) n(시작점)부터 m(없으면 문자열 끝까지 양수면 그 숫자까지(포함안함) 음수면 끝에서부터 셈)까지 문자 반환

let desc = 'abcdefg';

desc.slice(2) // "cdefg"

desc.slice(0,5) // "abcde"

desc.slice(2,-2) // "cde"

str.substring(n,m)

n과 m 사이 문자열 반환. n과 m, m과 n 상관없음. 음수는 0으로 인식

let desc = 'abcdefg';

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

str.substr(n,m)

n부터 시작, m개를 가져옴.

let desc = 'abcdefg';

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

str.trim() 앞 뒤 공백 제거

let desc = 'abcdefg        ';

desc.trim(); // "abcdefg"

str.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"

str.incloudes(문자열)

문자열이 있는지 검사. 있으면 true, 없으면 false

let str = "콜라는 맛있다."

if(str.includes("콜라")) {
  console.log("금칙어가 있습니다. 콜라 싫어");
}else if(str.includes("사이다")) {
         console.log("금칙어가 있습니다. 사이다 싫어");
         }

출처: 유투버 코딩앙마 - 자바스크립트 중급강좌 1 ~ 6