Javascript
작성중…
자바스크립트 특징에 대해 정리해보자
배열 vs 객체
배열
-
순서가 있는 값, 순서는 인덱스로 구성
-
값들은 요소(element)라고 부르며, 각각의 요소들은 쉼표(comma)로 구분
-
[ ] 을 통해 배열 생성
객체
-
키와 값(key-value pair) 형태
-
속성(Property)을 가지고, 한 쌍당 구분은 쉼표(comma)
-
{ }로 객체 생성
Prototype
부모 역할을 담당하는 객체 - 자바스크립트의 모든 객체는 부모 역할을 담당하는 객체와 연결되어 있다.
- 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어
- 객체 생성 시
scope
블록 레벨 스코프(Block-level scope)
모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.
함수 레벨 스코프(Function-level scope)
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.
- 전역 변수, 지역 변수 중복되는 경우 지역 변수 우선
- 선언하지 않고 변수 사용시 전역변수 처럼 동작 -> 암묵적 연역이라 함
- 전역 변수 사용을 억제하기 위해서 즉시 실행 함수로 만들어 사용
Hoisting
var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성
변수 할당은
선언(실행 컨텍스트에 변수 객체 등록) -> 초기화(공간을 메모리에 확보)
-> 할당(undefined로 초기화 된 변수에 실제 값 할당) 순으로 이뤄지는데
var 선언문은 이 과정이 한번에 일어난다
let키워드는 선언 단계와 초기화 단계가 분리되어 진행 -> 블록 레벨 스코프 지원
Lexical Scope(Enviroment)
렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다.
var a = 1
function afn() {
var a = 10
bfn()
}
function bfn() {
console.log(a)
}
afn() // 10
bfn() // 10Closure
함수 + 함수를 둘러싼 환경(Lexical environment)
Exports & Imports
-
default 키워드 사용
-
named export - {}로 작은 단위로 불러오는게 가능하다.
import * as Canvas from './modules/canvas.js';\전체를 불러올 땐
- * 키워드 사용
- as 키워드를 통해 별칭 지정을 해 import할 수 있다.
Class
class Person {
construct() {
gender = 'female'; // Property
}
printGender () { // Method
console.log(this.gender);
}
}
class SangHyeok extends Person {
constructor() {
super();
this.name = 'SangHyeok';
this.gender = 'male'
}
printName() { // Method
console.log(this.name);
}
}
const person = new Person();
person.printMyName();
person.printGender();
// output:
// "SangHyeok"
// "male"
// es6 style
class Person {
gender = 'female'; // Property
printGender = () => { // Method
console.log(this.gender);
}
}
class SangHyeok extends Person {
name = 'SangHyeok';
gender = 'male'
printName = () => { // Method
console.log(this.name);
}
}
const person = new Person();
person.printMyName();
person.printGender();
// output:
// "SangHyeok"
// "male"Rest/Spread Operators
객체 리터럴을 분해하고 병합하는데 편리한 기능 제공
Rest Parameter : 매개변수 내 사용 시 나머지 배열 값들을 받을 수 있음 Spread Parameter : 대상을 개별 요소로 분리 (대상이 이터러블 해야 함)
구조분해할당(Destructuring)
구조화된 배열 또는 객체를 비구조화하여 개별적인 변수에 할당 (값을 추출하여 변수에 할당하거나 반환할 때 유용)
배열
const today = new Date()
const formattedDate = today.toISOString().substring(0, 10)
const [year, month, day] = formattedDate.split('-')
console.log([year, month, day])
// output
// ["2022", "07", "25"]객체
const users = [
{
name: 'Han',
address: {
city: 'Seoul',
},
phone: '010-1111-1111',
},
{
name: 'Sang',
address: {
city: 'Ansan',
},
phone: '010-2222-2222',
},
]
const {
address: { city },
} = users[0]
const { phone } = users[0]
console.log(phone)
console.log(city)
const admin = users.filter(({ name }) => name == 'Han')
console.log(admin)
// output
/**
"010-1111-1111"
"Seoul"
[[object Object] {
address: [object Object] {
city: "Seoul"
},
name: "Han",
phone: "010-1111-1111"
}]
*/이런식으로 원하는 값들을 뽑아와 변수에 할당해 읽기 편한 코드를 작성할 수 있다.
원시 자료형와 자료 참조형
원시 자료형 할당 시 값이 담기고 (6가지 자료형) 참조 자료형 할당 시 주소가 담긴다 (배열, 객체, 함수)
const getUser = {
name: 'Han',
}
const user1 = getUser
const user2 = {
...getUser,
}
getUser.name = 'hahahaha'
console.log(user1.name)
console.log(user2.name)리액트에서 객체의 값을 사용 시, spread연산자로 값을 복사해 사용해야 한다.
strict mode
자바스크립트 문법을 엄격히 적용하여 기존에는 무시되던 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생 시킴
전역, 함수단위 strict mode 적용은 피하는게 좋다
->strict mode는 즉시실행함수로 감싼 스크립트 단위로 적용할 때 활용
eslint같은 자바스크립트 문법에서 에러를 표시해주는 도구를 사용하는게 좋다
Arrow Function
함수를 선언하는 방법
const func = () => {
}this로 인해 생긴 문제 해결
화살표 함수의 this는 언제나 상위 스코프의 this를 가르킨다. -> Lexical this
자바스크립트는 함수를 선언할 때 this에 바인딩 할 객체가 정적으로 결정 x 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.
Iterator protocol이란?
value들의 sequence를 만드는 표준 방법
done (boolean) : iterator에 return값이 있으면 value값으로 지정
value : iterator으로 반환되는 모든 자바스크립트 값 (done이 true일 경우 생략 가능)
function makeIterator(array) {
var nextIndex = 0
return {
next: function () {
return nextIndex < array.length
? { value: array[nextIndex++], done: false }
: { done: true }
},
}
}
var it = makeIterator(['yo', 'ya'])
console.log(it.next().value) // 'yo'
console.log(it.next().value) // 'ya'
console.log(it.next().done) // true비동기 처리
자바스크립트는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행 -> 일정 시간이 지난 후 순차적으로 실행해야 하는 부분에서 문제가 발생할 수 있다
이러한 문제는 콜백함수로 해결할 수 있으나 코드의 가독성 면에서 좋지 않다
Promise
const promise = new Promise((resolve, reject) => {
if (true)) { // 성공
resolve('result');
}
else { // 실패
reject('failure reason');
}
}).then(() => {
// 다음 동작
}).catch(() => {
// 에러처리
});이런 형식으로 콜백 함수를 사용하는 방법보다는 가독성이 좋지만 then… 지옥에 빠질 수 있다.
async, await
let play = async () => {
// try - catch 에러 처리
try {
var user = await ajaxUser();
if (user.id === 1) {
...
}
} catch (error) {
console.log(error);
}
};유사 배열 객체 vs 배열
- 유사 배열 객체 : key가 숫자, length값을 가지고 있는 객체
- 배열 함수, for-of, 비구조화 할당, 전개 연산자(…) 사용 불가 -> 객체가 이터러블 하지 않기 때문
- ex) 문자열(String), 함수의 매개변수 객체(arguments), 각종 DOM객체(HTML Collection, NodeList)
- 유사 배열 객체는 Array.prototype.slice.call()로 배열로 만들 수 있다.
- The iterator protocol로 구현 가능 (iterable한 객체로 만들기)
Javascript Inner Function
bind()
호출될 때 this 키워드가 제공된 값으로 설정되는 새로운 함수를 반환한다.
bind(thisArg, arg1, ... , argN)- thisArg : this가 가리킬 객체를 지정
- arg1, … , argN : 함수에 전달할 인자 값 thisArg는 전달하지 않고 null을 사용할 수도 있다.
Tip!!
빈값, null 체크
null, undefined, NaN, "", 0, false 체크 시 not 연산자로 체크
let result = "";
if(!result){
console.log('error');
}indexOf, include
indexOf는 index를 활용할 때 사용 includes는 return해 true/false 처리할 때 사용
유용한 라이브러리 사용법과 개발하면서 자주 활용되는 javascript inner 함수는… 추후에 추가로 정리 해보자… 하핳ㅎ…