JavaScript #2

흰콩·2022년 4월 20일
JavaScriptwhitebean공부기록흰콩
0

JavaScript

목록 보기
2/2

코딩앙마님의 자바스크립트 중급강좌 몰아보기 140분.
길어서 #2, #3 으로 나눠서 작성해야겠다.
글로도, 머릿속에도 잘 정리해두자.

1. 변수

  1. var
    1) 한번 선언된 변수를 다시 선언할 수 있다,
var name = ‘Mike’;
var name = ‘jane’;

2) var는 선언하기 전에 사용할 수 있다. (호이스팅)
단, 선언은 호이스팅되지만, 할당은 호이스팅되지 않는다.

var name;
console.log(name);     // undifined
name = ‘Mike’;  	   // 할당
  1. let
    1) 한번 선언된 변수를 다시 선언할 수 없다
    2) let도 호이스팅되지만, TDZ로 인해 var처럼 동작하지 않는다. (Temporal Dead Zone, 호이스팅은 스코프단위로 일어난다.)

** TDZ (Temporal Dead Zone)
직역하면 일시적 사각지대.
let, const는 var와 달리 선언과 초기화가 별도로 이루어진다. 이때, 선언 단계와 초기화 단계 사이를 TDZ라고 부른다. 초기화 단계와 할당 단계는 이후에 진행되기 때문에 TDZ에 있는 변수를 찾을 경우, 에러가 발생한다.

** 스코프 (Scope)
-var : 함수 스코프(function-scoped)
-let, const : 블록 스코프(block-scoped) // 함수, if문, for문, while문, try/catch문 등..

  1. 변수의 생성과정

  • var
    1) 선언 및 초기화 단계 : 초기화, undifined를 할당하는 단계
    2) 할당 단계

  • let
    1) 선언 단계 (-> 호이스팅됨)
    2) 초기화 단계 (-> 실제 코드에 도달했을 때)
    3) 할당 단계

  • const
    1) 선언 + 초기화 + 할당

2. 생성자 함수 (Intermediate Class)

비슷한 객체를 여러개 만들어야 하는 상황일 때 사용한다.

  • 객체 리터럴
let user = {
	name : ‘Mike’
    age. : 30
 }
  • 생성자 함수
    주로 첫글자는 대문자를 사용, new연산자를 사용하여 호출한다. new를 사용하지 않고 호출하게 되면 함수 그자체가 호출된다.
function User(name, age) {
		this.name = name;
        this.age = age;
}

	let user1 = new User(‘Mike’, 30);
	let user2 = new User(‘Janne’, 22);
    let user3 = new User(’Tom’, 17);
  • 동작과정
function User(name, age) {
	// b. 객체를 만들고 this에 할당한다. — 실제코드에 없는 부분
	// this = {}

	// c. 함수 본문을 실행하면서 this에 프로퍼티들을 추가한다.
    this.name = name;
    this.age = age;
    
	// d. this를 반환한다. — 실제코드에 없는 부분
	// return this;
}
	new 함수명() ; 	// a. 실행

3. 객체에서 사용할 수 있는 메서드

  • Object.assign() : 객체 복제
    -const newUser = Object.assign({}, user); // {} 는 초기값
    -초기값에 추가하게 되면, 기존 프로퍼티에 추가한 초기값이 프로퍼티로 추가된다.
Object.assign({ color : ‘blue’ }, user):

-초기값에 기존에 있는 프로퍼티를 넣게되면 덮어 쓰게된다.
-병합이 가능하다.

const user = {
	name : ‘Mike
}

const info1 = {
	age = 30
}

const info2 = {
	color : ‘blue’
}

object.assign(user, info1, info2);
  • Object.keys() : 키 배열 반환
const  user = {
	name : ‘Mike’
    age. : 30
}

object.keys(user);  // 	[“name”, “age”]
  • Object.values() : 값 배열 반환
const  user = {
	name : ‘Mike’
    age. : 30
}

Object.values(user);  // 	[“Mike”, “30”]
  • Object.entries() : 키/값 모두 배열로 반환
const  user = {
	name : ‘Mike’
    age. : 30
}

Object.entries(user);  // [“name”, “Mike”] , [“age”, “30”]

  • Object.fromEntries() : 키/값 배열을 객체로 반환
const arr =
[
	[“name”, “Mike”],
    [“age”,  30]
];
    Object.fromEntries(arr);
    
    // ** 결과 **
  
	// {
    //       name : ‘Mike’,
    //       age :  30
	// }


4. 계산된 프로퍼티 (computed property)

let a = ‘age’;
const user = {
	name : ‘Mike’,
	[a] : 30     // 변수 a에 할당된 값이 들어옴
    
const test = {
	[1 +4] : 5,
    [“안녕”+”하세요”] : “Hello”
}

// 식 자체를 넣는것도 가능하다.

5. 심볼(Symbol)

property key : 객체 프로퍼티는 문자열도 가능하지만 Symbol도 가능하다.
Symbol은 유일한 식별자 이다. new를 사용하지 않는다.

  • 심볼은 유일한 식별자를 만들 때 사용한다. 유일성이 보장된다.
const a = Symbol();
const b = Symbol();

console.log(a)
Symbol()
console.log(b)
Symbol()

a === b; (false)
a == b; (false)
  • 객체의 키로 사용할 수 있다.
	const id = Symbol(‘id’);
    const user = {
    	name : ‘Mike’,
        age : 30,
        [id] : ‘myid’
}

user 		//  { name : “Mike”, age : 30, Symbol(id) : “maid”}
user[id]  	// “mid”
  • 심볼형을 건너뛰는 것들
    -Object.keys, Object.values, Object.entries 같은 메서드
    -for .. in 도 심볼을 건너뛴다.
    -특정 개체의 원본데이터를 건드리지 않으면서 속성을 추가할 수 있다.
Object.keys(user);    // [“name, “age”]
Object.values(user);  //[“Mike”, 30]
  • Symbol.for() : 전역심볼
    -없으면 만들고, 있으면 가져오기 때문에 하나의 심볼만 보장받을 수 있다.
    -심볼 함수는 매번 다른 심볼값을 생성하지만, Symbol.for 메서드는 하나를 생성한 뒤 키를 통해 같은 심볼을 공유한다. 코드 어디에서든 사용할 수 있다.
	const id1 = Symbol.for(‘id’);
	const id2 = Symbol.for(‘id’);

	id1 === id2;   // true

-이름을 얻을 때에는 keyFor를 사용한다.

Symbol.keyFor(id1) 	// 생성할 때 적었던 id1의 이름을 알려준다 “id”

-전역심볼이 아닐 경우에는 description으로 알 수 있다.

const id = Symbol(‘id 입니다’);
id.description; 	// “id 입니다.”

-Object.getOwnPropertySymbols(); : 심볼들만 볼 수 있다.

Object.getOwnPropertySymbols(user); 		//  [Symbol(id)]

-Reflect.ownKeys(); : 심볼을 포함한 모든 키를 보여준다.

Reflect.ownKeys(user);		// [“name”, “age”, Symbol(id)]

6. Number, Math 메서드

  • toString() :문자로 바꿔줌. 괄호 안에 2, 16 을 쓰면 해당 진법의 숫자로 변환해줌
  • Math.ceil() : 올림
  • Math.floor() : 내림
  • Math.round() : 반올림
  • toFixed() : 숫자를 인수로 받아 그 숫자만큼 소수점 이하 개수를 반환한다, 소수 부분 개수보다 큰 숫자를 입력했을 때는 0으로 채운다. 문자열로 반환되는 것을 유의해야한다.
  • isNaN() : NaN은 자기자신을 비교(==, ===)해도 false를 반환하다. isNaN을 사용해야 판단이 가능하다.
  • parseInt() : 문자열은 숫자로 바꿔준다.
    a. 숫자와 문자가 섞여있어도 작동한다. 읽을 수 있는 부분 까지는 읽고 문자를 만나면 숫자를 반환한다.
그렇기때문에 숫자로 시작하지 않으면 NaN을 반환한다.
    b. 두번째 인수에 16, 2 를 전달하면 진수변환을 할 수 있다.
  • parseFloat() : 부동소수점을 반환한다.
  • Math.random() : 0 ~ 1 사이 무작위 숫자 생성
  • Math.max() / Math.min() : 최대값/최소값
  • Math.abs() : 절대값
  • Math.pow(n,m) : 제곱
Math.pow(2, 10);        // 1024
  • Math.sqrt() : 제곱근
Math.sqrt(16);            // 4

7. String

  1. String
  • 백틱의 유용한 기능
    (맥북에서는 영문으로 ₩을 입력하면 백틱이 된다)
let desc = `맑고
화창한 날씨 입니다.`;
// 백틱은 개행을 별도로 표기하지 않아도됨.
let desc = ‘맑고\n화창한 날씨 입니다.’;
// 홑따옴표는 한 행에 몰아써야함. 개행 또한 불가능
  • length : 문자열길이
  • 특정 위치에 접근하기
let desc = ‘안녕하세요.’;
desc[2]      // ‘하’
  • toUpperCase() / t oLowerCase() : 대문자변환, 소문자변환
  • str.indexOf(text) : 몇 번째에 문자열이 있는지 반환. 없으면 -1. 문자열이 여러번 나와도 첫 번째 문자열의 위치만 반환한다.
  • str.slice(n,m) : 특정 범위의 문자열 잘라내기. n부터 m까지 반환한다.
    a) m을 안적으면 끝까지.
    b) m은 포함하지 않는다.
    c) 음수면 끝에서부터 센다.
let desc = “abcdefg”

desc.slice(2);		// “cdefg”
desc.slice(0,5);    // “abcde”
desc.slice(2,-2).  //. “cde”

  • str.substr(n, m) : n부터 시작해서 m개를 가져온다.

let desc = “abcdefg”

desc.substr(2,4);     // “cdef”
desc.substr(-4,2).   // “de”
  • str.trim() : 앞, 뒤 공백 제거
  • str.repeat(n) : 문자열 n번 반복
  • 문자열 비교 : 아스키코드 이용
    a) codePointAt(); : 문자를 이용하여 아스키코드값을 얻을 수 있음
    b) fromCodePoint : 아스키코드값을 알면 문자를 얻을 수 있음

끝으로..

정리는 했지만 까먹거나 안쓰면 안한거나 다름이 없다. 유용한 메서드는 기억했다가 제때제때 잘 활용하자..!

공부자료 : 자바스크립트 중급 강좌: 140분 완성 / TDZ 개념 참고 블로그

profile
흰콩
운이 좋아서 개발자가 된 사람
이전 포스트

JavaScript #1

0개의 댓글