동등 비교(equality)와 일치 비교(identity)JavaScript는 두 값끼리 비교할 때 "동등 비교(==)"와 "일치 비교(===)"의 개념이 있다. 동등연산자(equality operator)동등연산자(`'=='`) 를 사용하면 두 값이 같은 값으로 변환 될 수 있는지를 검사한다. ex) `"3"` == `3` = `true``null`과 `undefined` 는 둘 다 "값이 없음" 을 나타내는 것으로 취급한다.고로 동등연산자를 사용하면 `true`가 나온다. 일치연산자(identity operator)일치연산자(`'==='`) 는 타입과 값을 모두 비교한다. ex) `"3"` === `3` = `false``null`과 `undefined` 는 타입은 다르기 때문에 `false` ..
PromisePromise는 비동기 작업을 보다 효율적으로 처리하기 위한 객체로 네트워크 요청을 보내거나 파일을 읽는 등의 비동기 작업을 처리할 때 사용된다. 이름이 Promise인 이유는 작업이 성공/실패 했을때 특정한 동작을 약속했기 때문에..? 사실 잘 모르겠다. Promise의 세 가지 상태`pending`(진행중): 작업이 진행중인 상태 `fulfilled`(완료): 작업이 완료된 상태 (성공)`rejected`(실패): 작업이 실패한 상태 Promise 객체 생성const promise = new Promise((resolve, reject) => { // 비동기 작업을 수행 const data = fetch('url 대충'); if (/* 작업 성공 조건 */) { reso..
객체끼리의 비교`변수`끼리는 데이터를 비교하여 값이 같거나 다르면 `true/false`를 리턴해준다. 하지만 `객체`끼리 비교하게 되면 값이 같아도 `false`를 리턴하는데 이유는 메모리에 `값` 자체를 저장하는게 아니고 객체가 저장된 `주소값`을 저장하기 때문이다. 따라서 같은 데이터를 가지고 있더라도 다른 주소를 참조 하기 때문에 `false`가 나오게 된다. 그럼 어떻게 비교하는데?`JSON.stringify()`를 사용해서 객체를 ` 문자열로 변환 `하고 비교하면 된다. 객체를 문자열로 변환 | JSON.stringify()let person = { name: "홍길동", age: 30, gender: "남자",}console.log(JSON.stringify(person)..
Object (객체)여러가지 {`Key`:`Value`} 를 하나의 변수에 저장할 수 있는 데이터 타입을 `객체(Object)` 라고 한다. 간단한 객체 예시let person = { name: "홍길동", age: 30, gender: "남자",} 각각의 `Key`로 데이터에 접근할 수 있고, `Key`자체를 구할수도 있다. Key를 구하는법 | Object.Keys()let keys = Object.keys(person);console.log("keys => ", keys);// 출력: keys => [ 'name', 'age', 'gender' ] `Object.keys()` : 인자로 객체를 넣어주면 해당 객체의 `Key`들을 배열 형태로 반환한다. Value를 구하는법..
filter() 함수자바스크립트에서 `filter()` 함수는 배열의 각 요소를 조건에 맞춰 걸러 새로운 배열을 만드는 함수이다. 주어진 조건을 만족하는 요소만 담은 배열을 리턴한다. 예시const array = [1, 2, 3, 4, 5];const filteredArray = array.filter(function(element) { return element > 2;});console.log(filteredArray); // [3, 4, 5]배열 `array`에서 요소를 순회조건 `element > 2` 을 만족하는 요소만 필터링필터링된 요소를 `filteredArray`에 반환 매개변수`filter()`는 3개의 매개변수를 가진다. `element`: 배열의 현재 처리중인 요소`index`..
Emmet에밋은 HTML과 CSS 작성을 빠르게 할 수 있도록 도와주는 도구이다. 현재는 기본적으로 VS Code등 다양한 편집기에서 에밋을 지원하고있다. HTML 자동 완성우선 `` 태그를 에밋으로 생성해보자. 2가지 방법으로 생성이 가능한데 ! 혹은 html:5 를 입력하고 `tab` 키나 `enter`를 눌러주면 된다. HTML 기본 태그 생성하기 자식 태그 > > 기호로 자식이라는 것을 명시해주기만 하면 하위 태그가 생긴다. (div 하위에 ul 하위에 ui를 만들어라) 형제 태그 +div>h1+p 다시 올라가기 ^div>ul>li^ol 반복 *ul>li*5 그룹화div>(header>ul>li)..
화살표 함수함수의 정의 방식으로, 함수를 간결하게 표현 할 수 있다. 왜 이런걸 만들어서 사람 피곤하게 하니 라고 생각했었지만 자주 보고 쓰다 보면 어느 새 손에 익더라.. (아마도) 예시const add = (a, b) => a + b;console.log(add(1, 2)); // 3아주 아주 기초적인 `(a+b)`의 결과를 리턴해주는 함수다. 이런 기초적인 코드 구조가 이해 안된다면 코딩은 일찌감치 포기하지 말고 열심히 하십쇼. 정상입니다. 화살표 함수의 특징매개변수가 하나일 경우 소괄호`()` 생략 가능단일 표현식인 경우 중괄호 `{}`와 `return` 키워드 생략 가능 이번에는 함수가 어째서 저렇게 변신했는지 차례대로 살펴보자 #1 가장 익숙한 함수 모양// 가장 익숙한 함수 모양 #1fu..
reduce 함수자바스크립트에서 제공되는 함수 중 하나로, 배열의 각 요소끼리 합한 결과를 제공한다. 이제 배열의 합을 구할때 for문은 갖다 버리도록 하자. 기본구조array.reduce(callback(accmulator, currentValue, currentIndex, array), 0)매개변수 설명`callback`: 쓰는데 중요하지 않으니 패스하기로 함 (사실 설명 못하겠음)`accmulator(acc)`: (필수) 값을 누적하는 변수. 초기값으로 초기화 된다. (코드에서 맨 뒤에 보이는 0이 초기값이다.)`currentValue(cur)`: (필수) 현재 처리중인 요소`currentIndex(idx)`: 현재 요소의 인덱스`array`: 호출한 원본 배열`initialValue`: 초기값..