티스토리

코딩하는너구리

검색하기

블로그 홈

코딩하는너구리

koguri.tistory.com/m

고수가 되고싶어요

구독자: 6

방명록 방문하기

728x90

주요 글 목록

[JavaScript]프로토타입-3 직접 상속 Object.create에 의한 직접 상속 Object.create(~~)는 ~~를 프로토타입으로 하는 객체를 만들라는 명령어 입니다. // 프로토타입이 null인 객체를 생성한다. 생성된 객체는 프로토타입 체인의 종점에 위치한다. // obj → null let obj = Object.create(null); console.log(Object.getPrototypeOf(obj) === null); // true // Object.prototype을 상속받지 못한다. console.log(obj.toString()); // TypeError: obj.toString is not a function // obj → Object.prototype → null // obj = {};와 동일하다. o.. 공감수 0 댓글수 0 2023. 1. 12.
[JavaScript]프로토타입-2 프로토타입의 생성 시점 프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성됩니다. 사용자 정의 생성자 함수와 프로토타입 생성 시점 // 함수 정의(constructor)가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다. console.log(Person.prototype); // {constructor: ƒ} // 생성자 함수 function Person(name) { this.name = name; } 위 예제와 같이 전역 컨텍스트가 실행될 때 함수 선언문이 먼저 실행되므로(이 때 프로토타입도 같이 생성된다.) console.log 에 프로토타입이 출력될 수 있다. 하지만 화살표함수와 같이 생성자함수가 없는 함수는 프로토타입도 미리 생성되지 않는다. // 화살표 함수는 non-c.. 공감수 0 댓글수 0 2023. 1. 5.
[JavaScrip] 프로토타입 - 1 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. 자바스크립트는 클래스 기반 객체지향 프로그래밍 언어보다 효율적이다. 자바스크립트는 원시 타입의 값을 제외한 ‘모든 것’이 객체라고 할 수 있다. 객체지향 프로그래밍 객체지향 프로그래밍은 독립적 단위인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말합니다. 객체지향 프로그래밍은 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작합니다. 따라서, 실제는 특징이나 성질을 나타내는 속성을 가지고 있고, 이를 통해 인식하거나 구별합니다. 예를 들어, 사람은 이름, 주소, 성별 등 다양한 속성을 갖습니다. 이름 xx 성별 xx 나이 xx 인 사람으로 구체적인 속성을 표현하.. 공감수 0 댓글수 0 2023. 1. 3.
[JavaScrip] 함수와 일급 객체 일급객체 일급객체는 다음 조건을 모두 만족하는 객체를 말한다. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 위 조건을 모두 만족하므로 일급 객체이다. // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저.. 공감수 0 댓글수 0 2022. 11. 24.
[JavaScript] 생성자 함수에 의한 객체 생성 Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성할 수 있습니다. 이후 빈 객체에 프로퍼티 및 메서드를 추가할 수 있습니다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'Lee'; person.sayHello = function () { console.log('Hi! My name is ' + this.name); }; console.log(person); // {name: "Lee", sayHello: ƒ} person.sayHello(); // Hi! My name is Lee JavaScript는 Object 생성자 이외에도 String, Numbe.. 공감수 0 댓글수 0 2022. 11. 23.
[백준]1132 : 합(javascript) https://www.acmicpc.net/problem/1132 1132번: 합 N개의 수가 주어진다. 이 숫자는 모두 자연수이고, 알파벳 A부터 J가 자리수를 대신해서 쓰여 있다. 이 알파벳은 모두 한 자리를 의미한다. 그리고, 각 자리수는 정확하게 알파벳 하나이다. 0으로 www.acmicpc.net 문제 N개의 수가 주어진다. 이 숫자는 모두 자연수이고, 알파벳 A부터 J가 자리수를 대신해서 쓰여 있다. 이 알파벳은 모두 한 자리를 의미한다. 그리고, 각 자리수는 정확하게 알파벳 하나이다. 0으로 시작하는 수는 없다. 이때, 가능한 수의 합 중 최댓값을 구해보자. 입력 첫째 줄에 N이 주어진다. N은 50보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에는 각 수가 주어진다. 수의 길이는 최대.. 공감수 0 댓글수 0 2022. 7. 25.
[JavaScript] 프로퍼티 어트리뷰트 내부 슬롯과 내부 메서드 내부 슬롯 : ECMAScript 사양에서 이용하는 의사 프로퍼티이다. 내부 메서드 : ECMAScript 사양에서 이용하는 의사 메서드이다. 이중 대괄호([[..]])로 감싼 이름이 내부 슬록과 내부 메서드이다. 내부 슬롯과, 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원칙적으로는 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 예를 들어, 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. [[Prototype]]의 내부 슬롯은 proto를 통해 간접적으로 접근할 수 있다. const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다. o.[[Prototype]] // -> Uncaught SyntaxE.. 공감수 0 댓글수 0 2022. 7. 10.
[JavaScript] let, const 키워드와 블록 레벨 스코프 var 키워드로 선언한 변수의 문제점 ES5까지는 변수를 선언할 수 있는 유일한 방법이 var였습니다. var 키워드는 다음과 같은 문제점이 존재합니다. 변수 중복 선언 사용 var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y; console.log(x); // 100 console.log(y); // 1 함수 레벨 스코프 var x = 1; if (true) { // x는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다. // 이는.. 공감수 0 댓글수 0 2022. 7. 9.
[JavaScript] 전역 변수의 문제점 전역 변수의 무분별한 사용은 상당히 위험합니다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용하는 것이 좋습니다. 전역 변수의 문제점과 전역 변수의 사용을 억제할 수 있는 방법을 살펴보겠습니다. 변수의 생명 주기 지역 변수의 생명 주기 생명 주기 : 변수는 생물처럼 생성되고 소멸된다. 그것을 생명 주기라 한다. 함수 내부에 선언된 지역 변수는 함수가 호출되면 생성하고 함수가 종료하면 소멸한다. function foo() { var x = 'local'; console.log(x); // local return x; } foo(); console.log(x); // ReferenceError: x is not defined 여기서 우리는 변수 호이스팅에 의해서 var x가 런타임 .. 공감수 2 댓글수 0 2022. 7. 8.
[JavaScript] 스코프 스코프란? 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위를 결정하는 것(식별자가 유효한 범위) 식별자를 검색할 때 사용하는 규칙 스코프(유효범위)는 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 더욱이 자바스크립트는 var 키워드로 선언한 변수와 let, const로 선언한 변수가 다르게 동작하는 등 다른 언어와 구별되는 특징이 있으므로 주의가 필요하다. 스코프를 간단한 코드를 통해 확인해보자. function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x, y); // 2 5 return x .. 공감수 0 댓글수 0 2022. 7. 7.
[JavaScript] OOP & FP OOP OOP는 Object Oriented Programming의 약자로 객체지향 프로그래밍을 뜻합니다. OOP는 관련된 데이터끼리 묶어 class를 형성하고 그 안에서 object instance를 만듬으로써 프로그램을 디자인 해줍니다. OOP의 장점 OOP는 코드의 재사용률을 높이고 코드를 간결하게 함으로써 유지 보수가 쉽다는 장점이 있습니다. 데이터를 안전하게 보존시킬 수 있습니다.(캡슐화와 추상화 등) 대표적인 언어 C++, Java, Python, Javascript OOP의 특징 1) Encapsulation(캡슐화) 객체의 내부 로직을 감추고 외부에는 상대적으로 안정적인 부분만을 공개함으로써 데이터를 안전하게 보존하는 기법이다. 캡슐화는 외부에 영향을 주지 않고 객체 내부의 구현을 변경할 .. 공감수 0 댓글수 0 2022. 7. 5.
[JavaScript] Jest로 기본적인 테스트 작성 Jest는 페이스북에서 만든 React와 더불어 자바스크립트 개발자로부터 가장 좋은 반응을 보이는 테스팅 라이브러리이다. 출시 초기에는 FE에서 주로 쓰였지만 최근에는 BE에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있다. 테스트 코드란 무엇일까? 테스트 코드란 코드가 안정적이고 제대로 동작하는지 확인하기 위해 작성하는 코드이다. 이를 통해 특정 동작을 하는 코드가 예상과 동일하게 결과를 잘 내는지 품질 검사하는데 사용한다. 테스트 코드를 작성하면 뭐가 좋을까? 프로그램의 안정성을 보장할 수 있다. 프로그램이 변경(기능 확장 또는 리팩터링 등)이 되더라도 올바르게 작동하는지 확인할 수 있다. 개발 테스트 자동화 / 수동 테스트를 최소화 할 수 있다. 그럼 Jest를 통해 간단한 테스트를 실행해.. 공감수 0 댓글수 0 2022. 7. 4.
[JavaScript] 함수 함수 수학의 함수는 다음과 같습니다. 프로그래밍 언어의 함수도 수학의 함수와 같은 개념입니다. f(x, y) = x+y를 자바스크립트의 함수로 표현하면 다음과 같습니다. // f(x, y) = x + y function add(x, y) { return x + y; } // f(2, 5) = 7 add(2, 5); // 7 프로그래밍에서 함수란? 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 매개변수 : 내부로 입력을 전달받는 변수 인수 : 입력 반환값 : 출력 함수는 함수 정의를 통해 생성합니다. // 함수 정의 function add(x, y) { return x + y; } 함수 실행은 함수 호출을 통해서 실행한다. // 함수 호출 var result = a.. 공감수 0 댓글수 0 2022. 7. 1.
[JavaScript] 원시 값과 객체의 비교 원시 타입 vs 객체 타입 원사 타입의 값은 변경 불가능한 값이다. 이에 비해 객체(참조) 타입의 값은 변경 가능한 값 이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 값에 의한 전달 : 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값이 복사되어 전달된다. 참조에 의한 전달 : 객체를 가리키는 변수를 다른 변수에 할당하면 참조 값이 복사되어 전달된다. 원시 값 1) 변경 불가능한 값 원시 타입의 값, 즉 원시 값은 변경 불가능한 값 이다.(원시 값은 읽기 전용이다.) 하지만 변경 불가능하다는 것은 변수가 아니라 값에 대한 진술이다. 즉, 아래의 예제로 o라는 변수 자체를 바꿀 순 없지만, o라는 변수 내에 할당하는 프로퍼티들은 바꿀 수 있다. // const 키.. 공감수 0 댓글수 0 2022. 6. 29.
[JavaScript] 객체 리터럴(모던 자바스크립트) 객체란? 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 “모든 것”이 객체다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조다. 원시 값은 변경 불가능한 값 객체는 변경이 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다. 프로퍼티 : 객체의 상태를 나타내는 값(data) 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작 객체 리터럴에 의한 객체 생성 자바스크립트는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성 방법을 지원한다. 객체 리.. 공감수 0 댓글수 0 2022. 6. 28.
연산자(JavaScript) 연산자 다음과 같은 연산자가 존재한다. // 산술 연산자 5 * 4 // -> 20 // 문자열 연결 연산자 'My name is ' + 'Lee' // -> 'My name is Lee' // 할당 연산자 color = 'red' // -> 'red' // 비교 연산자 3 > 5 // -> false // 논리 연산자 true && false // -> false // 타입 연산자 typeof 'Hi' // -> string 산술 연산자 1) 이항 산술 연산자 2개의 피연산자를 산술 연산 함. 5 + 2; // -> 7 5 - 2; // -> 3 5 * 2; // -> 10 5 / 2; // -> 2.5 5 % 2; // -> 1 2) 단항 산술 연산자 1개의 피연산자를 산술 연살 함. var x = .. 공감수 0 댓글수 0 2022. 6. 27.
데이터 타입(js) 데이터 타입 숫자 타입 javascript는 하나의 숫자 타입만 존재한다. (정수, 실수 등 모두 하나로 통합) Infinity : 양의 무한대 -Infinity : 음의 무한대 NaN : 산술 연산 불가 // 모두 숫자 타입이다. var integer = 10; // 정수 var double = 10.12; // 실수 var negative = -20; // 음의 정수 var binary = 0b01000001; // 2진수 var octal = 0o101; // 8진수 var hex = 0x41; // 16진수 // 표기법만 다를 뿐 모두 같은 값이다. console.log(binary); // 65 console.log(octal); // 65 console.log(hex); // 65 consol.. 공감수 0 댓글수 0 2022. 6. 22.
[JavaScript] 메모리 관리, GC(가비지 컬렉션) 메모리 생존주기 필요할 때 할당합니다. 할당된 메모리를 사용합니다. (읽기, 쓰기) 더 이상 필요하지 않으면 해제합니다. 2번은 모든 언어에서 명시적으로 사용합니다. 그러나 1번과 3번은 저수준 언어에서는 명시적이며, JavaScript와 같은 대부분의 고수준 언어에서는 암묵적으로 작동합니다. JavaScript에서 메모리 할당 프로그래머를 할당 문제로 괴롭히지 않기 위해서, 자바스크립트는 값을 선언할 때 자동으로 메모리를 할당합니다. var n = 123; // 정수를 담기 위한 메모리 할당 var s = 'azerty'; // 문자열을 담기 위한 메모리 할당 var o = { a: 1, b: null }; // 오브젝트와 그 오브젝트에 포함된 값들을 담기 위한 메모리 할당 // (오브젝트처럼) 배열과.. 공감수 0 댓글수 0 2022. 6. 20.
[JavaScript]비동기 프로그래밍 비동기(Asynchronous) vs 동기(Synchronous) 예시로 쉽게 이해해보고 넘어가겠습니다. A와 B는 집안일을 해야합니다. 1) 빨래 돌리기 1-1) 빨래 널기 2) 이불, 배게 털기 3) 욕실 청소 4) 피규어 정리 A의 작업 현황 1) 빨래 돌리기(진행 중) 1-1) 빨래 널기 2) 이불, 배게 털기 3) 욕실 청소 4) 피규어 정리 B의 작업 현황 1) 빨래 돌리기(진행 중) 1-1) 빨래 널기 2) 이불, 배게 털기(완료) 3) 욕실 청소(완료) 4) 피규어 정리(진행 중) A는 빨래를 돌려놓고 쉬고 있고 B는 빨래를 돌려놓고 2, 3을 완료 후 4를 하고 있습니다. 이때 B는 A에게 넌 왜 쉬어?라고 묻자 A는 아.. 1-1) 빨래 널기를 해야 하는데 1) 빨래 돌리기가 아직 진행.. 공감수 0 댓글수 0 2022. 6. 17.
표현식과 문(javascript) 표현식과 문 값 값은 식이 평가되어 생성된 결과를 말한다. // 10 + 20은 평가되어 숫자 값 30을 생성한다. 10 + 20; // 30 따라서 변수에 할당 되는 것은 값이다. // 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다. var sum = 10 + 20; 리터럴(literal) 번역하면 문자 생긴 그대로를 말한다. 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다. 표현식 값으로 평가될 수 있는 문(statement)이다. var score = 50 + 50; // 50+50 = 표현식 표현식과 표현식이 평가된 값은 동치다 50+50 = 100 // (표현식 = 표현식이 평가된 값) 문 문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위.. 공감수 0 댓글수 0 2022. 6. 16.
변수(js) 04장 변수 변수란? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 그 메모리 공간을 식별하기 위해 붙인 이름 값의 위치를 가리키는 상징적인 이름 // 변수는 하나의 값을 저장하기 위한 수단이다. var userId = 1; var userName = 'Lee'; // 객체나 배열 같은 자료구조를 사용하면 여러 개의 값을 하나로 그룹화해서 하나의 값처럼 사용할 수 있다. var user = { id: 1, name: 'Lee' }; var users = [ { id: 1, name: 'Lee' }, { id: 2, name: 'Kim' } ]; var result = 10 + 20; 로 예를 들어보겠다. 10, 20은 각각 어떠한 메모리를 가리키고있다. 여기서 10 + 20 의 결과값인 30도 메모.. 공감수 0 댓글수 0 2022. 6. 15.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.