[JavaScript] 스프레드와 디스트럭쳐링

1. 스프레드자바스크립트에서 스프레드란 일종의 객체 복사입니다.const class1 = { x: 1, y: 'A', z: true};const class2 = { ...class1 };console.log(class2); //{x: 1, y: 'A', z: true}위 코드를 보면 class1의 프로퍼티를 class2가 그대로 가져오는 것을 볼 수 있습니다.이러한 이유로 스프레드는 특정 프로퍼티나 많은 포로퍼티를 동일하게 사용하는 다른 객체를 생성하는데 사용됩니다. const class1 = { a: 1, b: 'A', c: true};const class2 = { d: { x: 10, y: 100 }, e: [1, 2, 3]};const class3 = { ...class1, z: 0}cons..

• format_list_bulleted Javascript
• · 2024. 8. 21.
• textsms

[JavaScript] 상속

상속이란 말 그대로 부모클래스의 내용을 자식클래스가 이어받아서 그대로 사용하거나 변형해서 사용하는 것을 의미합니다.상속이란 개념은 자바나 파이썬 등 타 프로그래밍 언어에도 존재합니다. 여기서는 자바스크립트의 상속 사용법에 대해 설명하겠습니다.1. 상속방법자바스크립트에서는 상속을 하는 방법은 아래와 같습니다.자식클래스 extends 부모 클래스 class Bird { wings = 2;}class Eagle extends Bird { claws = 2;}class Penguin extends Bird { swim () { console.log('수영중...'); }}class EmperorPenguin extends Penguin { size = 'XXXL';}const b = new Bird();..

• format_list_bulleted Javascript
• · 2024. 8. 15.
• textsms

[JavaScript] 접근자 프로퍼티

1. 접근자 프로퍼티접근자 프로퍼티란 다른 언어에서도 말하는 getter, setter 함수를 의미합니다.이 프로퍼티를 사용하면 함수를 사용한 것처럼 객체 내부의 프로퍼티를 제어가능합니다.const person1 = { age: 17, get koreanAge () { return this.age + 1; }, set koreanAge (krAge) { this.age = krAge - 1; }}//자동으로 get 실행됨console.log(person1, person1.koreanAge); //18 -> 17+1person1.koreanAge = 20; //set 실행됨 -> age = 20-1 = 19console.log(person1, person1.koreanAge); //20..

• format_list_bulleted Javascript
• · 2024. 8. 13.
• textsms

[JavaScript] 클래스

자바나 파이썬처럼 클래스를 사용하는 언어에 익숙한 사람들을 위해 자바스크립트에서도 클래스가 개발되었습니다. 자바스크립트의 클래스는 ES6부터 만들어졌기 때문에 이전의 만들어진 자바스크립트 문법에 비해 엄격합니다. 1. constructor 메서드자바스크립트에서 constructor 메서드는 파이썬의 __init__ 메서드처럼 초기화를 해주는 메서드라고 생각하면 됩니다.class Person { constructor (name, age, married = false) { this.name = name; this.age = age; this.married = married; }}const person1 = new Person('zero', 30, true);const person2 = n..

• format_list_bulleted Javascript
• · 2024. 8. 11.
• textsms

[JavaScript] 객체

자바스크립트에서 객체란 key와 value로 이루어진 값들의 모임을 의미합니다.예컨대 아래처럼 정의된 것을 객체라고 합니다.{key1:value1,key2:value2,...} 1. 객체 생성 및 프로퍼티 추가, 수정, 삭제자바스크립트에서 객체를 생성하기 위해서는 마침표 프로퍼티를 사용하는 방법과 대괄호 프로퍼티를 사용하는 방법이 있습니다.const food = { name:'샐러드' };console.log(food); //{name:'샐러드'}food.price = 5000; // 마침표 프로퍼티를 이용한 추가food['vegan'] = true; // 대괄호 프로퍼티를 이용한 추가food.weight = 50.5;console.log(food); //{name: '샐러드', price: 500..

• format_list_bulleted Javascript
• · 2024. 8. 6.
• textsms

[JavaScript] 일급 객체

일급객체는 함수를 변수와 같이 다루는 언어에 있는 개념입니다. 즉, 파이썬이나 자바스크립트가 일급객체에 대한 개념을 가지고 있습니다. 자바스크립트의 함수는 객체입니다.function add (a, b) { return a + b; }console.log(typeof add); //functionconsole.log(add instanceof Object); // true ->변수 instanceof Object는 변수가 객체인지 확인하는 메소드 일급객체의 특성으로는 3가지가 있습니다.첫번째로 상수 또는 변수에 할당될 수 있어야합니다.두번째로 다른 함수의 인자로 전달될 수 있어야합니다.세번째로 다른 함수의 결과값으로 반환될 수 있어야 합니다. 1. 할당function isOddNum (number) { ..

• format_list_bulleted Javascript
• · 2024. 7. 25.
• textsms

[JavaScript] 제어문

1. 조건문1) if-else문자바스크립트에서 if-else문은 true일때 if의 블록을 실행하고, false일때 else의 블록을 실행하는 조건문입니다.그래서 조건은 true인지 false인지만 확인합니다.예제를 통해 자세히 알아보겠습니다. let result = true;//result = false;//실행문이 한줄밖에 없을 경우 실행블록({})을 생략가능if (result) console.log('참입니다.'); //출력else console.log("거짓입니다.") //출력안됨위 코드를 실행해보면 참입니다. 가 출력되는 것을 볼 수 있습니다. result 변수를 false로 변경하면 거짓입니다가 출력됩니다. 실행문이 두줄이상일 경우에는 아래처럼 실행블록을 반드시 넣어야합니다.let result..

• format_list_bulleted Javascript
• · 2024. 7. 21.
• textsms

[JavaScript] 함수

1. 함수의 의미와 사용방법자바스크립트애서 함수는 반복작업을 줄이기 위해 사용합니다.사용방법은 아래와 같습니다.function 함수명(인자1, 인자2,...){ return 반환값; // 반환값이 없으면 생략 가능} 아래 예제는 함수를 사용하지 않고 연산을 하는 방법입니다.let a =3;let b = 4;let c = (a +b)*(b+a)*a*b;console.log(c); //588let d = 5;let e = 6;let f = (d+e)*(e+d)*d*e;console.log(f); //3630 함수를 사용하지 않고 연산을 한다면 이렇게 매번 복잡한 연산을 해야합니다. 이번에는 함수를 사용하여 동일한 연산을 해보겠습니다.function cal(a,b){ return (a+b)*(b+a)*a*b;..

• format_list_bulleted Javascript
• · 2024. 7. 21.
• textsms

[JavaScript] 블록과 스코프

자바나 자바스크립트 등의 언어에서는 블록안에서 프로그램이 실행됩니다. 즉, 아래 형식으로 동작합니다.{ //실행문}이 블록안의 범위를 스코프라고 합니다. 즉, 영향을 미치는 범위라고 할 수 있습니다. 이해를 돕기 위해 예제를 살펴보겠습니다{ const x = 'Hello'; let y = 'world!'; console.log(x, y); //Hello world!}console.log(x); //에러 발생console.log(y); //에러 발생위 코드는 스코프 안에서 변수가 선언된 것입니다.위 코드를 실행해보면 {}안에서의 console.log는 실행되는 반면 {} 바깥의 console.log는 에러가 발생하는 것을 확인할 수 있습니다. 왜냐하면 {}안과 {}바깥은 스코프가 다르기 때문입니다. ..

• format_list_bulleted Javascript
• · 2024. 7. 18.
• textsms

[JavaScript] 자료형과 연산자

1. typeoftypeof 메소드는 타입을 반환해주는 메소드입니다. 리턴 값으로는 문자열로 타입을 반환합니다.자바스크립트는 동적타입을 지닌 언어이기 때문에 즉각적으로 자료형을 확인하는것이 불가능합니다. 따라서 이 메소드를 사용하여 자료형의 타입을 확인합니다. 사용방법은 아래와 같습니다.typeof 변수2. boolean1) 선언과 표현boolean은 참과 거짓. 두가지 값만 존재하는 자료형입니다. 즉 반환값으로는 true, false밖에 없습니다. 이러한 boolean 자료형은 주로 제어문에 사용합니다. const x = true;console.log(x, typeof x); //true 'boolean'const y= 1 > 2;console.log(y, typeof y); //false 'boole..

• format_list_bulleted Javascript
• · 2024. 7. 16.
• textsms