[CodeIt] 05월 5주차 스터

ECMAScript : JS 의 표준. JS 를 사용할 때, 지켜야 할 규칙 등을 관리 → 문서화 되어 있는데, 이것이 ECMAScript

Modern JS : 현시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 Javascript

JS 특징 → 데이터 타입이 유연하다. 다른 언어의 경우 변수를 선언할 때, 변수 타입을 할당해야 하며, 할당된 타입은 변경될 수 없다. JS 의 경우, 변수의 타입까지 바꿀 수 있다.

• 데이터 타입 : 기본형
  • Number, String, Boolean, Null, Undefined, Symbol, BigInt
  • Symbol : 유일한 값을 만들 때 사용
  • BigInt : 엄청 큰 수를 다룰때 사
• 데이터 타입 : 참조형
  • Object
• 데이터 타입이 언제 변환이 되는지 명확하게 알고 사용해야 한다

Symbol 예시

const user = Symbol('this is a user'); // 코드 내에서 유일한 값을 가진 변수 생성
// 다른 어떤 값과 비교해도 true 가 될 수 없는 고유의 변수
// 똑같은 심볼 변수 두개들 만들어도 서로 비교 연산자의 결과는 false

 

BigInt

//아주 큰 정수를 표현하기 위해 사용한다
// JS 의 최소 정수 값은 -(2**53 - 1), 최대 값은 (2**53 - 1)
// 약 9000조
// BigInt는 일반 정수 마지막에 n 을 붙이거나 BigInt() 함수사용
console.log(9007199254740993n); // 9007199254740993n
console.log(BigInt('9007199254740993')); // 9007199254740993n

💡 BigInt는 소수 표현에는 사용이 불가능 하며, BigInt 의 연산은 BigInt 끼리만 가능하다!

 

---

Boolean

• 불린이 아닌 값도 형변환 되어 불린으로 취급 될 수 있다
• false, null, undefined, Nan, 0, ‘’ ← false 로 취급된다
• 나머지는 true 로 취급

AND/OR

• 다음 코드의 결과는?

console.log('Code' && 'JavaScript');

• AND 연산은 양쪽 모두 Truthy 하다면 true 를 반환하는 연산자이다.
• JS 는 AND 연산 도중 왼쪽값이 Falsy 하다면 그대로 왼쪽 값을 반환하고, 왼쪽값이 Truthy 하다면 오른쪽 값을 반환한다.
• 위 예시의 경우 왼쪽인 ‘Code’ 가 Truthy 하기 때문에 오른쪽 값인 ‘JavaScript’ 를 반환한다
• OR 연산자는 어느 한쪽이라도 true 라면 true 를 반환한다
• OR 연산자는 왼쪽값이 truthy 하다면 왼쪽값을 반환하고, 왼쪽값이 falsy 하다면 오른쪽값을 반환 한다.

?? 연산자

• ?? 연산자는 null 혹은 undefined 를 가려내는 연산자이다
• 연산자 왼편의 값이 null / undefined 라면 오른쪽 값이 리턴되고, 왼편이 null / undefined 가 아니라면 왼쪽 값이 리턴된다

const example1 = null ?? 'I'; // I
const example2 = undefined ?? 'love'; // love
const example3 = 'Codeit' ?? 'JavaScript'; // Codeit

console.log(example1, example2, example3); // I love Codeit

 

변수와 스코프

• ES2015 전에 JS 의 변수 선언은 var 키워드를 사용했다
• var 의 당양한 문제 때문에 let 과 const 키워드가 등장 했고, let 과 const 를 추천한다
• 그 이유
  • var 사용시 선언이 나중에 된 변수도 사용 할 수 있다 (Hoisting)
  • 변수 선언 이전에는 해당 값에 접근할 수 없어야 에러의 원인 파악이 수월하다
  • var → 중복선언이 가능하다 (값의 재할당이랑은 다르다)
  • var → 선언되는 모든 변수가 전역 변수 → 지역 변수를 생성할 수 없다

---

함수

• JS 에서는 변수에 함수를 할당할 수 있다

const printCodeit = function (){
	console.log('codeit');
}

myBtn.addEventListener('click', function(){
	console.log('button clicked!');
});

• 위와 같은 것을 함수 표현식 이라 한다
• 함수 표현식과 선언의 차이는 표현식의 경우 hoisting 이 불가능 하다
• 함수를 선언과 동시에 실행시킬 수 있다

(function () {
  console.log('Hi!');
})();

• 객체의 요소, 함수의 요소로 함수 선언도 가능하다
• 함수의 파라미터로 함수를 전달할 수 있는데, 이를 Callback 함수라 한다
• 함수를 return 하는 함수도 존재하는데, 고차 함수라 한다

Parameter / Argument

• 값을 전달 받기 위해 함수 선언시 작성 → parameter
• 함수를 호출할때 파라미터로 전달하는 값 → argument
• 함수 호출시 argument 를 선언하지 않으면 해당 값은 undefined 가 된다
• 만약 함수의 파라미터 수가 최대 3 일때, 4개의 argument 를 전달한다면, 함수 내에서 arguments 메서드의 인덱싱을 통해 접근할 수 있다
• Rest Parameter
  • arguments 는 유사 배열 → 배열의 메소드를 사용하지 못한다
  • 인덱싱으로 번거롭게 접근해야 하기 때문에 등장한 메소드

function printArguemnte(first,second,...args){
	console.log(first);
	console.log(second);
	for(const arg of args){
		console.log(arg);
	}
};

 

Arrow Function

• 이름이 없는 익명 함수이다

const getTwice = (number) =>{
	return number*2;
};

const getTwice = number => number*2;

• 함수를 더 간편하게 표현하기 위해 사용

THIS

• 객체의 메소드를 만들때 중요한 역할을 한다

function getFullName(){ // 
	return `${user.firstName} ${user.lastName}`;
}
//위 의 경우 admin 에서 호출하더라도 해당 함수가 user 의 firstName lastName
//을 참조하기 때문에, 결국 user 객체의 property를 사용하는것

function getFullName(){
	return `${this.firstName} ${this.lastName}`;
}

const user = {
	firstName: 'Tess',
	lastName: 'Jang',
	getFullName: getFullName,
};

const admin = {
	firstName: 'Alex',
	lastName: 'Kim',
	getFullName: getFullName,
};

//

• this 는 함수를 호출한 객체를 가리키는 키워드 이다.

<aside> 💡 Arrow function 에서의 this는 선언되기 직전에 그때 유효한 this 값을 사용한

</aside>

---

조건연산자

• 조건 ? truthy 할 때 표현식 : falsy 할 때 표현식
• 삼합연산자

const CUT_OFF= 80;

function passChecker(score){
	return score > CUT_OFF ? '합격':'불합격';
}

 

Spread

const nums = [1,2,3];

console.log(...nums); 

const nums2 = [...nums] // JS 의 배열은 참조형, spread 를 사용하면 복

• 배열에서 개별 값이 펼쳐지게 된다
• 객체도 펼칠 수 있다
• 배열 → 객체는 가능하지만 객체 → 배열은 불가능하다

const members = ['태호', '종훈', '우재'];
const newObject = { ...members };

console.log(newObject); // {0: "태호", 1: "종훈", 2: "우재"}

const topic = {
  name: '모던 자바스크립트',
  language: 'JavaScript', 
}
const newArray = [...topic]; // TypeError!

 

모던한 프로퍼티 표기법

const title = 'Codeit';
const birth = 2017;
const job = '강사';

const user = {
	title,
	birth,
	job,
};

//함수에도 위와 같은 표기를 사용할 수 있다 (이름이 같은 경우)

 

Optional Chaining

function printCatName(user) {
  console.log(user.cat.name);
}

const user1 = {
  name: 'Captain',
  cat: {
    name: 'Crew',
    breed: 'British Shorthair',
  }
}

printCatName(user1); // Crew

const user2 = {
  name: 'Young',
}

console.log(user2.cat); // undefined
printCatName(user2); // TypeError: Cannot read property 'name' of undefined

• 위와 같은 에러를 방지하기 위해 optional chaining 을 사용할 수 있다

function printCatName(user) {
  console.log(user.cat?.name);
}

• ?의 프로퍼티 값이 undefined 혹은 null 값이 아닌 경우 그 다음 프로퍼티를 반환, 그렇지 않은 경우 undefined 를 반환하는 문법이다.

Destructing (구조 분해)

• 배열이나 객체의 구조를 분해하는 방법
• 배열과 객체에 각각 적용 방식의 차이가 있다

const rank = ['효준','유나','민환','재하'];

const [macbook, ipad, airpods, coupon] = rank;
// macbook = 효준, ipad = 유나, .... 배열의 순서대로 하나씩 할당된

let a = 1; let b = 2; // 이 두 값을 서로 바꾸고 싶다면?

[a, b] = [b, a] 

const macbook = {
	title : "mac",
	price : 3500000,
	memory: '16',
};

const {title, price} = macbook;

• 객체는 프로퍼티 이름으로 할당된다

에러와 객체

• 에러가 발생한 순간 코드는 멈춘다
• 에러객체는 name, message 형식이다
  • 직접 에러객체를 만들 수 있다

const error = new TypeError('타입 에러.');
console.log(error.name); //TypeError
console.log(error.message); //타입 에러.

• throw 키워드로 에러를 발생시킬 수 있다

throw error;

• try catch finally문
  • 에러 발생시 코드 종료가 아닌 catch 문이 실행된다
  • try 문에서 선언한 변수는 try문 밖에서 사용할 수 없다
  • finally 문은 항상 실행되는 코드이다
  • 에러가 없다면 try 문 뒤 finally, 에러가 있다면 catch 후에 finally
• try{ } catch(error){ } try { // 실행할 코드 } catch (err) { // 에러가 발생했을 때 실행할 코드 } finally { // 항상 실행할 코드 }

---

foreach & map

const members = ['영훈' , '윤수' , '동욱'];
const firstName = ['김', '이', '박'];

members.forEach(function(member, index, arr) {
	console.log(`${index} ${member}`);
});

members.map((members, index) =>{
	return firstName[index] + members;
});

• for..of 문과 다르게 다룰 수 있는 파라미터가 있다 (index) (arr)
• arr → 반복중인 배열 자체
• map 의 경우 return 문 작성시 리턴값으로 구성된 새로운 배열이 반환된다.

filter & find

• 원하는 조건에 맞는 요소들만 뽑아낼 수 있다

const 변수 = 배열객체.filter((el) => el.프로퍼티 === '값');
//filter 를 find 로 바꾸어주면 하나의 값을 반환

 

some & every

• some : 조건을 만족하는 요소가 1개 이상 있는지
• every : 모든 요소가 조건을 만족하는지
• boolean type 값만 반환한다

reduce

const nums = [1,2,3,4];

nums.reduce((acc,el,i,arr) =>{
	return nextAccValue;
}, initialAccValue};

• 첫 파라미터인 acc 는 accumulator 를 뜻하며, 매번 콜백함수가 반복 동작할때, 직전 콜백함수의 결과를 받는 파라미터
• initialAccValue → 첫 콜백함수 전 초기 값

sort

• 배열의 정렬 메소드이다
• 만약 argument 로 어떠한 값도 전달하지 않았다면 유니코드에 정의된 문자열 순서에 따라 정렬한다
  • 그렇기 때문에 숫자 정렬시 우리의 상식선의 정렬이 아니다

const numbers = [1, 10, 4, 21, 36000];

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // (5) [1, 4, 10, 21, 36000]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]

 

map&set

• map.set(key, value) → map 에 추가
• map.get(key) → key 에 해당하는 value 를 가져오는 메소드
• map.has(key) → key 가 있는지 없는지 bool
• map.delete(key) → map 에서 key 에 해당하는 값 삭제
• map.clear() → 모든 map 요소 삭제
• map.size() → map 의 크기 반환
• set.add(value) → set에 값 추가
• set.has(value) → 있는지 확인
• set.delete(value) → 값 삭제
• set.clear()
• set.size()
• set 은 중복 값을 허용하지 않는다