개발 일기

Closure 함수와 함수가 선언된 어휘적 환경의 조합이다. 즉, 함수 안에 함수를 선언한 환경에서의 관계를 의미하며 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 의미한다. 정보 은닉: 외부에서 접근할 수 없도록 변수를 보호하고, 내부 함수를 통해서만 접근하도록 할 수 있다. 데이터 보존: 함수가 생성될 당시의 환경을 유지하면서, 데이터를 영구적으로 보존할 수 있다. 비동기 처리: 비동기적인 작업에서 결과를 유지하고, 필요할 때 접근할 수 있다. 1. 정보의 은닉화 함수 `outerFunc()`은 상태 변수 `state`를 가지고 내부 함수 `addStateOne`의 위치 정보를 return하는 함수이다. 변수 `a`에 `outerFunc()`을 사용하여 내부 함수의 위치값을 리턴받아 내부 함수..

Hoisting 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻한다. 기본적으로 객체지향 프로그래밍의 원칙을 위배하기때문에 Hoisting을 사용하지 않는 환경도 많다. 1. Hoisting이 동작하는 경우 1) var 변수 선언 해당 스크립트로 console에는 undefined가 출력된다. var 예약어로 변수를 선언하는 것 까지만 hoisting이 되고 초기화는 hoisting이 되지 않는다. 변수가 초기화 되지않은 채 hoisting이 되므로 나중에 문제가 될 가능성이 많아 사용하지 않는걸 권장한다. 2) function 선언 인자의 합인 3이 console에 출력되었다. 2. Hoisting이 ..

함수 수를 받아 처리하는 논리적 공간이다. 재사용성, 유지보수의 장점이 있다. 1. 함수의 4가지 형태 (ECMA6 이전, 기본 Hoisting이 적용된다) 함수 매개변수 반환 function f1(n1, n2) { ... return ... } O O function f2(n1, n2) { ... } O X function f3() { ... return ... } X O function f4() { ... } X X 1) 반환이 없는 함수도 반환을 한다 단, 반환 값은 없기에 undefined를 리턴한다. 2) 매개변수가 없는 함수도 인자를 줄 수 있다. (의미가 없다) 오버로딩이 되고있다. 2. 함수의 호출 방법 밑의 방법으로 함수를 호출하고 함수의 실행이 끝나면 호출했던 위치로 다시 돌아간다 f1..

반복문 하나의 제어문으로써 같은 명령을 일정 횟수만큼 계속 반복할 수있게 만드는 실행문이다. 1. while while(조건문) { ... 조건문에서 사용하는 변수 증감 연산... ... } 조건문을 잘못 설정하면 무한 루프가 발생한다. 반복 조건문이 계속해서 true이므로 무한 루프가 발생한다. 해결법 조건문에 추가할 탈출용 변수 i를 선언 및 초기화하고, i++ 처럼 매 조건문 실행시마다 증감을 수행 해준다. 단, 변수를 초기화 하지않으면 undefined가 되어 논리적 오류가 발생할 수 있다. 2. for for (변수; 조건식; 연산) { ... } 변수는 for문 내에서 선언 및 초기화 하여 사용해도 되고 기존에 선언되어 있는 변수를 사용해도 된다. 연산은 탈출용 변수에 대한 증감 연산을 한다...

SWITCH 복수의 if 조건문은 switch문으로 바꿀 수 있다. switch문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해준다. 1. switch switch (조건문 | 변수) { case '상수': ... break; case '상수': ... break; case '상수': ... break; default: break; } case '상수': case에서는 switch의 변수 혹은 조건문에 따른 '상수' 값만 작성할 수 있다. (조건식 삽입 X) break: break를 넣지 않으면 해당 case를 수행하고 다음 case도 실행하게 된다. default: 위 case에 해당하지 않는다면 default문을 실행한다. 학점을 구분하는 switch문 case에는 조건문을 작성할..

IF 조건문 특정 조건 만족 시 (참인 경우) 실행하는 명령의 집합 이며, 어떤 작업을 수행하고 싶을 때 사용하는 것이 조건문이다. 0. 사용자로부터 입력을 받아 데이터 타입 변경하기 prompt: 사용자로부터 문자열을 입력받는다. parseInt: 문자열을 입력받아 number로 변환 후 반환 (Number도 가능하다) 1. if (조건문) ... else ... 변수 num이 짝수인지 홀수인지 판별하는 구문이다. 현재 변수 num은 형변환을 진행하지 않아, 데이터 타입이 String인 상태이다. 그러나, == 비교 연산자는 데이터 타입까지 확인하여 조건문을 수행하지 않기 때문에 위 스크립트로는 제대로 된 판별을 수행할 수 없다. === 연산자는 데이터타입까지 확인이 되는 비교 연산자이지만, num %..

연산자 자바스크립트는 다양한 연산자 기능을 제공한다. 1. 산술 연산자 (+, -, *, /, %) 자바스크립트에서의 일부 산술 연산은 과정이 특이하다. 변수값을 다른 데이터 타입으로 캐스팅 해주는 경우도 있고 정수값으로 치환해주는 경우도 있다. 기본적으로 연산자 우선순위에 맞게 연산을 진행하므로 주의해야한다. [연산자 우선순위] https://www.tcpschool.com/javascript/js_operator_arithmetic 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 4) / 4-n) divide by zero 대부분의 프로그래밍 언어에서는 divide by zero는 오류가 발생하지만 자바스크립트에서..

Prototype - 상속 자바스크립트는 Prototype을 기반으로 상속을 구현하였다. 상속은 객체지향 프로그래밍의 핵심 개념으로 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다. 상속을 구현하여 불필요한 중복을 제거하여 기존의 코드를 적극적으로 재사용하는 것이 목적이다. 1. 상위 클래스를 만든다 2. 하위 클래스에 물려줄 함수를 만든다. 함수는 상위 클래스 prototype에 선언 및 정의한다. 3. 하위 클래스를 만든다 하위 클래스에서는 처음에 상위 클래스의 생성자를 호출한다 상위 클래스 생성자 호출은 (상위클래스).call()로 호출한다 call의 인자에는 해당 객체의 정보가 담긴 this와 줘야 할 인자를 넘겨준다 4. 하위 클래스의 prototyp..

ProtoType Object 객체: 객체를 다루는 기본함수(메서드)를 제공 - 모든 객체중 최상위 객체 Object.prototype: 상속 구현에 사용되는 메커니즘, Object 객체 내에 구성 1. Object - Prototype 구조 Prototype은 Object로부터 상속을 받은 구조이다. 2. Prototype의 확장 Prototype은 일반적인 상속개념과 같이 속성과 메서드의 추가 등 확장이 가능하다. 3. Object - keys(), values(), entires() Object.keys() : 객체의 key 값들을 배열로 리턴 Object.values() : 객체의 value 값들을 배열로 리턴 Object.entries() : 객체의 key 값들, value 값들을 배열로 리턴 ..

실습 앞의 ObjetArray 실습1 에서 수행한 필터링된 데이터를 사용하여 실습을 진행한다. 1. 사용할 데이터 중구한식식당_new 는 앞의 ObjectArray 실습1 에서 원하는 데이터로 추출 및 가공했던 result 데이터이다. 춘천옥 변수에 해당 배열의 첫 번째 데이터를 가져온다. 위의 추출 및 가공 했던 데이터에서 키(Key) 값이 BZ_NM인 데이터를 추출하여 객체 데이터에 저장하여 배열 order1을 만들어 준다. 2. 문제 reduce 메서드를 사용하여 price * amount의 누적합을 계산한다. {pid: "1111-2222", 총액: 10000, 결제일시: new Date()} 형식의 Map으로 출력하라. 2-1) 누적합 계산 알고리즘 price * amount를 하면 total이..