본문 바로가기

JavaScript50

[자바스크립트] 콜백(Callback) 정리 콜백이란? 함수의 인수(argument)로 사용되는 함수 예시 timeout은 인수가 없고 3초 뒤에 콘솔창에 maple을 출력하는 함수다 function timeout() { setTimeout(() => { console.log(‘maple’) }, 3000) } timeout(); timeout 함수의 인수로 함수를 전달할 수도 있는데 이렇게 어떤 함수의 인수로 사용되는 함수를 콜백함수라고 한다. timeout(() => { console.log(‘Done’) }); timeout 함수에 콜백함수를 전달해주고 싶기 때문에 이를 받아줄 매개변수도 등록해준다. 이때 매개변수로 받아준 함수를 timeout 함수 안에서 실행하기 위해 cb() 호출해준다 function timeout(cb) { setTim.. 2022. 5. 27.
[자바스크립트] DOM 요소에 접근하기 (DOM이란? DOM API 정리) 문서객체모델(DOM) DOM(Document Object Model) Document Object Model의 줄임말로 일반적으로 DOM이라고 부른다 DOM이란 HTML 문서(document)를 객체 기반 모델로 표현한것을 말한다 HTML 문서의 모든 요소를 자바스크립트로 조작하기 위해 객체로 해석한다 DOM을 사용하면 웹 문서의 모든 요소를 객체로 해석이 가능해 웹 문서의 텍스트, 이미지, 표 등 모든 요소를 객체로 생성, 접근, 수정, 삭제가 가능하다 Document HTML 문서가 웹 브라우저에 로드되면 document 오브젝트가 된다 document 오브젝트는 HTML 문서의 최상단 노드다 document 오브젝트는 window 오브젝트의 프로퍼티다 즉 window.document로 접근할 수 있.. 2022. 5. 26.
[자바스크립트/한줄정리] Getter와 Setter의 개념 Getter 값을 얻는 용도 const boxEl = document.querySelector(‘.box’); console.log(boxEl.textContent) Setter 값을 지정하는 용도 const boxEl = document.querySelector(‘.box’); box.textContent = ‘maple’; 2022. 5. 26.
[자바스크립트/한줄정리] 메서드 체이닝(Method Chaining)이란? 자바스크립트에서 메서드를 체인처럼 연결해서 사용하는 기법 const a = ‘Hello’; // 메서드 체이닝 기법 사용 const b = a.split(‘’).reverse().join(‘’); console.log(a); // ‘Hello’ console.log(b); // ‘~olleH’ 예제에서 사용한 배열의 메서드 정리: split: 문자를 인수 기준으로 쪼개서 배열로 반환 reverse: 배열 뒤집기 join: 배열을 인수 기준으로 문자로 병합해 반환 2022. 5. 26.
[자바스크립트/한줄정리] 인자(parameter)와 인수(argument)의 차이 함수를 선언할때 사용하는 값 parameter는 한국어로 매개변수, 인자라고 불리며 함수를 호출할때 사용하는 값 argument는 한국어로 인수라고 한다. function add(a, b) { // a, b는 매개변수, 인자, parameter return a + b; } add(1, 2); // 1, 2는 인수, argument 2022. 5. 26.
[자바스크립트] 조건문 if문, switch문 정리 ⚠️ 이 포스팅은 드림코딩을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 조건문(Conditional Operator) 조건문이란 특정한 조건 아래서만 코드가 실행되게 하는 구문 if문 조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문 if (name === "maple") { console.log(`welcome, ${name}!`); } else if (name === "guest") { console.log(`welcome, ${name}!`); } else { console.log("unknown"); } switch문 해당 조건에 맞는 값을 case.. 2022. 5. 25.
[자바스크립트] 함수(function) 정리 (함수 선언과 호출, 매개변수와 인수, 기본값 매개변수, 나머지 매개변수, 함수의 선언식과 표현식, 함수의 종류 6가지) ⚠️ 이 포스팅은 드림코딩을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론트엔드 개발자 입문편(JavaScript ES6) 자바스크립트 기초 2. 함수 | 함수 정의, 호출, 그리고 콜백함수 1. 함수(function) 반복되는 명령어를 묶어 뒀다가 필요할 때마다 부르는 것 특정 일을 하는 명령어의 묶음 한가지의 일을 하거나 값을 연산하기 위해 사용된다 하나의 함수는 한가지의 일만 해야한다 input(ingredient: parameter) and output(result: return or operation)의 묶음 2. 함수를 사용하는 이유 반복되는 코드를 재사용할 수 있다 3.. 2022. 5. 24.
[자바스크립트] 변수 선언과 할당 (var, let, const의 차이, 변수명 규칙) 1. 변수(variable) 변수키워드 변수명 = 데이터; const myName = 'maple'; 데이터를 저장하고 참조(사용)하는 데이터의 이름 컴퓨터가 데이터를 담아 두기 위해서 사용하는 공간 계속 변하는 값이면서, 그 값을 저장하는 공간 변수에 데이터를 할당할 때는 '='이라는 기호를 사용 수학의 '같다'의 의미와는 다르게 기호 왼쪽(변수이름)에 오른쪽의 정보(내용)을 넣는다는 의미 2. 변수 선언과 할당 변수선언 변수키워드 변수명; var age; 변수할당 변수 선언이 미리 되어있어야 한다. 변수명 = 값; age = 10; 변수 선언과 할당 동시에 하기 변수키워드 변수명 = 값; var age = 10; 3. 변수명 규칙 1. 변수명 첫글자로 숫자가 올 수 없다 2. 변수명 첫글자로 언더바(.. 2022. 5. 24.
[자바스크립트] 자바스크립트의 데이터 종류 6가지 (원시타입과 참조타입) 자바스크립트에서 데이터가 저장되는 2가지 방식 1. 원시타입 (Primitive Type) 더 이상 작은 단위로 나눠질 수 없는 싱글 타입 값(value) 자체가 메모리에 저장 종류: string, number, boolean, null, undefined, symbol 원시타입이 메모리에 저장되는 방식 1. 변수 a에 숫자형 데이터 1이 할당되었다 메모리 주소 M1에 숫자형 데이터 1이 저장되고 변수 a는 메모리 주소 M1을 가리킨다 2. 변수 b에 변수 a를 할당하였다 변수 a가 가리키는 메모리 주소를 변수 b도 가리키게된다 결과적으로 변수 b에는 숫자형 데이터 1이 할당된다 3. 변수 b에 새로운 값 7을 다시할당하였다 메모리 주소 M2에 숫자형 데이터 7이 저장되고 변수 b는 메모리 주소 M2을 .. 2022. 5. 24.
[자바스크립트/한줄정리] 제로베이스 넘버링(Zero-based Numbering)이란? 자바스크립트에서 0을 기반으로 번호를 시작하는 것 예시 배열의 첫번째 데이터에 접근하기 위해 중괄호 안에 인덱스값 0을 입력한다 let fruits = ['Apple', 'Banana', 'Cherry']; console.log(fruits[0]) // 'Apple' 2022. 5. 24.
[자바스크립트] 객체에서 key, value가 같을때 생략해주기 (단축 속성명) 일반적인 객체의 모습 오브젝트는 key와 value로 이루어져 있다 { key: value, key: value... } ES6 property shorthand(단축 속성명) 오브젝트의 key와 value가 같으면 생략할 수 있다 { key, key, key... } 예제 let a = "maple"; let b = 20; let c = ["alpha", "beta", "gamma"]; let obj = { a, b, c }; /* 위의 객체는 아래의 객체와 같다 obj = { a: a, b: b, c: c } */ console.log(obj.a) // "maple" 2022. 4. 13.
[자바스크립트] 함수 파라미터 기본값 설정 (디폴트 파라미터) 함수 파라미터에 기본값을 주지 않았을 경우 함수 호출시 파라미터를 넣어주지 않았다면 해당 파라미터는 undefined다. function sayHello(name) { console.log(`Hello ${name}!`); } sayHello(); // "Hello undefined!" sayHello("maple") // "Hello maple!" 함수 파라미터에 기본값을 주었을 경우 함수 호출시 파라미터를 넣어주지 않았다면 해당 파라미터에 기본값으로 설정된 값이 들어간다. function sayHello(name = "user") { console.log(`Hello, ${name}!`); } sayHello(); // "Hello, user!" sayHello("maple") // "Hello, m.. 2022. 4. 13.
[자바스크립트] 배열을 만들어주는 Array.from() 사용법 Array.from() Array 오브젝트의 메서드 from()은 유사배열(array-like) 또는 반복 가능 객체(iterable object)를 배열로 만들어준다. 문법 Array.from(arrayLike, (element, index) => { ... } ) 첫번째 인자: 유사배열 두번째 인자: 콜백함수 (element, index) => { ... } 유사배열안에 있는 각각의 요소가 element이고 순차적으로 각 element의 index값을 0부터 가지게된다. arrayLike가 문자열 "maple"이라면 element는 "m", "a", "p", "l", "e" 그리고 index는 0, 1, 2, 3, 4다. 예제 문자열을 배열로 방법 1: 간단하게 쓰기 const my_name = 'm.. 2022. 3. 31.
[자바스크립트] 중복 요소를 제외하고 배열 합쳐주기 (Set() 사용법) Set() 자바스크립트의 자료형 중 하나로 중복되지 않는 값을 가지는 리스트 Set 선언하기 new Set(중복되지 않는 데이터) set을 사용해서 중복 요소를 제외하고 배열 합쳐주기 배열 앞에 있는 ...은 스프레드 오퍼레이터로 배열 안에 있는 요소들을 모두 꺼내주는 연산자 전개연산자(spread operator)에 더 자세히 알고 싶다면 👉 [자바스크립트] 스프레드 오퍼레이터(spread operator) 사용법 const array1 = [0, 1, 2, 3]; const array2 = [3, 4, 5]; const merge = [...new Set([...array1, ...array2])]; console.log(merge); // [0, 1, 2, 3, 4, 5] 코드해석 merge라는 변.. 2022. 3. 31.
[자바스크립트] 스프레드 오퍼레이터(spread operator) 사용법 1. 전개 연산자(spread operator) 1.1 전개 연산자(spread operator)란? 전개 연산자(..)는 배열안에 있는 데이터 또는 문자열안에 있는 단어 하나하나를 넘기는 용도로 사용한다. 1.2 전개 연산자 사용법 전개 연산자를 사용하는 방법은 배열 또는 문자열 앞에 점 세개를 붙이면 된다. 1) 배열일때 const arr = [1, 2, 3]; const newArr = [...arr]; console.log(newArr); // [1, 2, 3] 코드해석 배열 arr의 요소에 처음부터 하나씩 접근하기 위해 ...이라는 전개 연산자 기호를 붙였다 ...arr은 arr의 요소 1, 2, 3이므로 ...arr을 배열의 기호[ ]로 감싸줘서 배열로 만든 후 newArr에 할당해준다 new.. 2022. 3. 31.
[자바스크립트] 삼항연산자(ternary operator) 사용법 삼항연산자(ternary operator)란? if문의 단축형태로 항목이 세개라 삼항연산자라고 한다 간단한 연산은 삼항연산자를 사용하고 복잡한 연산은 if, switch문을 사용한다 return문 안에는 if문을 사용할 수 없기 때문에 return 안에 조건문이 필요할때는 삼항연산자를 사용한다 조건 ? 조건이 true일때 실행할 실행문 : 조건이 false일때 실행할 실행문 const name = "maple"; console.log(name === "maple" ? "yes" : "no"); // yes 코드해석 name이라는 변수에는 maple이라는 문자열 데이터가 할당되어있다 name이라는 변수에 "maple"이 할당되어있다면(true) yes를 콘솔창에 출력하고 아니라면(false) no를 콘솔창.. 2022. 3. 29.
[자바스크립트] 스프레드 오퍼레이터(spread operator, 전개 연산자)란? 스프레드 오퍼레이터(spread operator)란? 한글로 직역하면 펼치는 연산자로 객체나 배열 안에 있는 모든 데이터를 꺼내서 복사해준다. const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const newArr = [...arr1, ...arr2]; console.log(newArr); // [1, 2, 3, 4, 5, 6] 코드해석 ...arr1은 arr1 안에 있는 데이터 1, 2, 3을 의미한다 ...arr2은 arr2 안에 있는 데이터 4, 5, 6을 의미한다 즉 newArr에 들어 있는 값은 arr1과 arr2의 데이터 1, 2, 3, 4, 5, 6이다 2022. 3. 29.
[자바스크립트] =, ==, ===의 차이 (할당연산자, 동등연산자, 일치연산자) 1. = 변수값을 변수명에 할당할때 사용하는 할당 연산자(Assignment Operator) 변수키워드 변수명 = 값; const name = 'maple'; 2. == 왼쪽과 오른쪽의 값이 동등한지 확인하는 동등 연산자(Loose Equality Operator) 값만 같고 타입이 달라도 같다(==) const stringFive = "5"; const numberFive = 5; console.log(stringFive == numberFive); // true 3. === 왼쪽과 오른쪽의 값이 일치하는지 확인하는 일치 연산자(Strict Equality Operator) 값도 같고 타입도 같아야 같다(===) const stringFive = "5"; const numberFive = 5; con.. 2022. 3. 29.
[자바스크립트] 클래스의 상속과 instanceof 1. 클래스 상속 1.1 클래스 상속이란? 클래스 상속이란 다른 클래스의 속성과 메서드를 그대로 가져오는 것 즉 상속받는 것을 말한다. // 클래스 Animal class Animal { constructor(name, age) { this.name = name; this.age = age; } showName(){ console.log(`My name is ${this.name}`); } showAge(){ console.log(`I am ${this.age} years old`); } } // 클래스 Animal로 새로운 인스턴스인 pubao를 생성 let pubao = new Animal('pubao', 1, 'bamboo') // 클래스 Animal을 상속받은 클래스 Cat class Cat ex.. 2022. 3. 29.
[자바스크립트] 클래스 선언하는 방법 (클래스, 오브젝트, 인스턴스의 차이) 1. 클래스(class), 오브젝트(object), 인스턴스(instance) 1.1 클래스란? 클래스는 객체 지향 프로그래밍에서 객체를 생성하기 위한 틀 또는 템플릿이다 클래스의 내부에는 객체를 정의하기 위한 속성(객체에 소속된 변수)와 메서드(객체에 소속된 함수)로 구성된다 클래스에 데이터를 넣어서 만든것이 오브젝트이다 클래스 안에는 데이터가 들어 있지 않기 때문에 메모리에 올라가지 않는다 자바스크립트의 클래스는 ES6부터 사용이 가능하다 클래스가 없었던 ES5에서는 함수를 사용해서 오브젝트를 생성하는 템플릿을 만들었다 1.2 오브젝트란? 프로그램을 짤 때 동일한 목적이나 기능을 하는 변수와 함수들을 각각 하나로 묶는것 여러 속성이나 메소드를 하나의 변수에 저장할 수 있도록 해주는 데이터 타입 오브젝.. 2022. 3. 29.

티스토리툴바