JavaScript
-
[JavaScript] 전역 변수의 문제점JavaScript 2022. 7. 8. 00:01
전역 변수의 무분별한 사용은 상당히 위험합니다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용하는 것이 좋습니다. 전역 변수의 문제점과 전역 변수의 사용을 억제할 수 있는 방법을 살펴보겠습니다. 변수의 생명 주기 지역 변수의 생명 주기 생명 주기 : 변수는 생물처럼 생성되고 소멸된다. 그것을 생명 주기라 한다. 함수 내부에 선언된 지역 변수는 함수가 호출되면 생성하고 함수가 종료하면 소멸한다. function foo() { var x = 'local'; console.log(x); // local return x; } foo(); console.log(x); // ReferenceError: x is not defined 여기서 우리는 변수 호이스팅에 의해서 var x가 런타임 ..
-
[JavaScript] 스코프JavaScript 2022. 7. 7. 00:51
스코프란? 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위를 결정하는 것(식별자가 유효한 범위) 식별자를 검색할 때 사용하는 규칙 스코프(유효범위)는 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 더욱이 자바스크립트는 var 키워드로 선언한 변수와 let, const로 선언한 변수가 다르게 동작하는 등 다른 언어와 구별되는 특징이 있으므로 주의가 필요하다. 스코프를 간단한 코드를 통해 확인해보자. function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x, y); // 2 5 return x ..
-
[JavaScript] OOP & FPJavaScript 2022. 7. 5. 00:01
OOP OOP는 Object Oriented Programming의 약자로 객체지향 프로그래밍을 뜻합니다. OOP는 관련된 데이터끼리 묶어 class를 형성하고 그 안에서 object instance를 만듬으로써 프로그램을 디자인 해줍니다. OOP의 장점 OOP는 코드의 재사용률을 높이고 코드를 간결하게 함으로써 유지 보수가 쉽다는 장점이 있습니다. 데이터를 안전하게 보존시킬 수 있습니다.(캡슐화와 추상화 등) 대표적인 언어 C++, Java, Python, Javascript OOP의 특징 1) Encapsulation(캡슐화) 객체의 내부 로직을 감추고 외부에는 상대적으로 안정적인 부분만을 공개함으로써 데이터를 안전하게 보존하는 기법이다. 캡슐화는 외부에 영향을 주지 않고 객체 내부의 구현을 변경할 ..
-
[JavaScript] Jest로 기본적인 테스트 작성JavaScript 2022. 7. 4. 18:09
Jest는 페이스북에서 만든 React와 더불어 자바스크립트 개발자로부터 가장 좋은 반응을 보이는 테스팅 라이브러리이다. 출시 초기에는 FE에서 주로 쓰였지만 최근에는 BE에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있다. 테스트 코드란 무엇일까? 테스트 코드란 코드가 안정적이고 제대로 동작하는지 확인하기 위해 작성하는 코드이다. 이를 통해 특정 동작을 하는 코드가 예상과 동일하게 결과를 잘 내는지 품질 검사하는데 사용한다. 테스트 코드를 작성하면 뭐가 좋을까? 프로그램의 안정성을 보장할 수 있다. 프로그램이 변경(기능 확장 또는 리팩터링 등)이 되더라도 올바르게 작동하는지 확인할 수 있다. 개발 테스트 자동화 / 수동 테스트를 최소화 할 수 있다. 그럼 Jest를 통해 간단한 테스트를 실행해..
-
[JavaScript] 함수JavaScript 2022. 7. 1. 20:02
함수 수학의 함수는 다음과 같습니다. 프로그래밍 언어의 함수도 수학의 함수와 같은 개념입니다. 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..
-
[JavaScript] 원시 값과 객체의 비교JavaScript 2022. 6. 29. 16:47
원시 타입 vs 객체 타입 원사 타입의 값은 변경 불가능한 값이다. 이에 비해 객체(참조) 타입의 값은 변경 가능한 값 이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 값에 의한 전달 : 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값이 복사되어 전달된다. 참조에 의한 전달 : 객체를 가리키는 변수를 다른 변수에 할당하면 참조 값이 복사되어 전달된다. 원시 값 1) 변경 불가능한 값 원시 타입의 값, 즉 원시 값은 변경 불가능한 값 이다.(원시 값은 읽기 전용이다.) 하지만 변경 불가능하다는 것은 변수가 아니라 값에 대한 진술이다. 즉, 아래의 예제로 o라는 변수 자체를 바꿀 순 없지만, o라는 변수 내에 할당하는 프로퍼티들은 바꿀 수 있다. // const 키..
-
[JavaScript] 객체 리터럴(모던 자바스크립트)JavaScript 2022. 6. 28. 16:14
객체란? 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 “모든 것”이 객체다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조다. 원시 값은 변경 불가능한 값 객체는 변경이 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다. 프로퍼티 : 객체의 상태를 나타내는 값(data) 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작 객체 리터럴에 의한 객체 생성 자바스크립트는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성 방법을 지원한다. 객체 리..
-
연산자(JavaScript)JavaScript 2022. 6. 27. 15:22
연산자 다음과 같은 연산자가 존재한다. // 산술 연산자 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 = ..