일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- gitops
- Bastion Server
- Infra
- 배포 프로세스
- go
- golang
- body size
- GoF
- UnBuffered channel
- http 413
- notification system
- GoF 디자인패턴
- Golines
- Kubernetes
- Helm V3
- intellij ide
- goland
- Buffered channel
- tenneling
- Logrus
- AWS Infra
- 윈도우키보드
- Intellij
- 대규모 시스템 설계
- 컴포지트패턴
- AWS
- apollo router
- System Design
- 배포 파이프라인
- 디자인패턴
- Today
- Total
Fall in IT.
기본적으로 알아야할 javascript 개념 본문
최근에 자바스크립트를 공부하고 있습니다.
생활코딩의 https://opentutorials.org/course/743 자바스크립트 강좌를 보며, 몇 가지 기본적인 내용들을 정리하였습니다.
간단한 예제소스와 함께 자바스크립트 기본 개념을 살펴보도록 하겠습니다.
==와 ===의 차이
==는 데이터 형과 관계없이 값이 같다면 true를 return 합니다.
===는 데이터 형도 같아야 true를 return 합니다.
조금 더 명확한 ===를 사용하는 것을 추천합니다.
ex)
1 == '1' (true) / 1 === '1' (false)
null == undefined (true) / null === undefined (false)
참조, https://dorey.github.io/JavaScript-Equality-Table/
변수의 유효범위
function의 중괄호 안에서 변수를 선언할때, 지역변수로 설정이 된다.
if나 for문의 중괄호 안에서 변수를 선언할때, 지역변수로 설정이 안된다. (전역변수로 설정)
전역변수를 잘 사용하는 방법
전역변수를 사용함으로써 변수의 이름이 충돌하는 상황이 발생할 수 있습니다.
따라서, 전역변수를 잘 사용해야 합니다.
ex) 하나의 객체에 묶어서 전역변수를 최소화 합니다.
var myApp = {};
myApp.calculator = { left: null, right: null };
myApp.coordinate = { left: null, right: null };
ex2) 익명함수를 사용하여 지역변수로 만들어서 사용합니다.
(function() {
var myApp = {};
myApp.calculator = { left: null, right: null };
myApp.coordinate = { left: null, right: null };
})();
정적 유효범위
정의되는 시점의 전역변수의 값을 바로보는 것을 정적 유효범위라고 합니다.
사용되는 대상에 따라서 가지고 있는 변수에 맞게 값이 달라지는 것을 동적유효범위라고 합니다.
ex) 정적유효범위 예제
var i = 5;
function a() {
var i = 10;
b();
}
function b() {
console.log(i);
}
a(); // 5 출력
내장 메소드
객체가 기본적으로 가지고 있는 메소드를 의미합니다.
Array 객체에 내장되어있는 sort() 메소드 사용 예제.
ex) 배열 객체에 내장되어있는 메소드인 sort()의 인자값으로 함수를 전달하여, 정렬 방식을 조작할 수 있습니다.
function sortFunction() {
return a-b; //오름차순 정렬 (내림차순은 b-a)
}
var numbers = [1, 3, 20, 13, 34];
console.log(number.sort(sortFunction));
클로저
- 외부함수가 종료된 이후에도 내부함수를 통해서 지역변수에 접근이 가능한 기술을 말합니다.
ex)
var temp = "global hello";
function outer() {var temp = "outer hello";
function inner() {console.log(temp);}return inner;}
var k = outer();k(); // outer helloex2) 함수(객체)의 선언 위치에 따라서 동적/정적 유효범위가 달라집니다.
var temp = "global hello";function outer() {var temp = "outer hello";return inner;}function inner() {console.log(temp);}var k = outer();k(); // global hello
private variable 사용 방법과 이유
작업이 매우 길어지고 많은 사람들이 함께 작업할때 변경되지 않아야할 값이 변경이 일어나는 것을 막을 수 있습니다.
또한, 값의 변경이 조심스럽게 일어나야하는 경우 안정적으로 값을 변경 시킬 수 있습니다.
ex)
function factory_movie(title) {
return {
get_title: function() {
return title;
},
set_title: function(_title) {
// TODO: type check
title = _title;
}
}
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');
alert(ghost.get_title());
alert(matrix.get_title());
ghost.set_title('공각기동대');
alert(ghost.get_title());
alert(matrix.get_title());
클로저 응용과 예제
동일한 context를 참조하기 때문에 i 값은 모두 5로 출력
각각 다른 context를 만들어주기 위해서 클로저를 사용합니다.
ex) 클로저 사용 전
var arr = [];
for (var i = 0; i < 5; i ++) {
arr[i] = function() {
return i;
}
}
for(var index in arr) {
console.log(arr[index]()); // 5 5 5 5 5
}
ex) 클로저 사용 후
var arr = [];
for (var i = 0; i < 5; i++) {
arr[i] = (function(id) {
return function() {
return id;
}
})(i);
}
for ( var index in arr) {
console.log(arr[index]()); // 0 1 2 3 4
}
ex) for문 안에서 var 대신 let을 사용하게 된다면?
- 클로저를 사용하지 않아도 됩니다. let은 기본적으로 블록스코프 변수(지역변수)이기 때문입니다.
var arr = [];
for (let i = 0; i < 5; i ++) {
arr[i] = function() {
return i;
}
}
for(var index in arr) {
console.log(arr[index]()); // 0 1 2 3 4
}
자바스크립트에서 매개변수(parameter) 개수 체크 방법
자바스크립트는 굉장히 유연해서 함수에서 정의한 매개변수 개수와 실제로 함수를 call할때 전달한 매개변수의 개수가 달라도 오류를 발생시키지 않는다.
하지만, 반드시 입력 매개변수 개수와 함수가 정의한 매개변수의 개수가 같아야할 경우가 있습니다. 이때 함수의 length와 arguments의 length를 사용하여 체크할 수 있습니다.
ex)
function one(arg1) {
console.log('one.length: ', one.length); // 1
console.log('arguments.length: ', arguments.length); //2
}
one('val1', 'val2');
function에 내장 메소드인 apply()란?
ex)
o1 = { var1: 1, var2: 2, var3: 3 };
o2 = { var1: 10, var2: 50, var3: 100, var4: 25 };
function sum() { //object의 속성 값을 더하는 함수
var _sum = 0;
for(name in this) {
_sum += this[name];
}
return _sum;
}
alert(sum.apply(o1));
alert(sum.apply(o2));
객체 생성 방법
객체는 다양한 방법으로 생성할 수 있습니다.
또한, 자바스크립트에서 함수는 객체이다.
ex) 객체 리터럴
var obj = {
name: '리두',
age: '29'
introduce: function() {
console.log('my name is '+this.name);
}
}
ex) new 키워드 사용
function Person() {
//person
}
var obj = new Person();
new 키워드를 사용하여 객체를 생성하면 재사용성을 높일 수 있다.
ex)
function Person(name) {
this.name = name,
this.introduce = function() {
console.log('my name is ' + this.name);
}
}
var person1 = new Person('리두');
var person2 = new Person('홍길동');
window란?
모든 변수와 함수는 window라는 전역객체의 프로퍼티이다.
nodejs의 경우는 window가 아니라 global이 존재합니다.
ex)
function test() {
console.log('test');
}
test(); // test
window.test(); // test
this의 사용
this는 현재 context(맥락)를 말한다. 즉, this가 불린 영역의 전역객체를 의미합니다.
ex)
function test() {
console.log(this); //window
}
ex)
var obj = {
func: function() {
if( o === this ) {
console.log("o === this"); // o === this
}
}
}
Prototype
객체 안에 프로퍼티를 의미합니다.
상속을 할때 사용합니다.
ex)
function test() { }
console.log(test.prototype); // {}
test.prototype.name="dylee";
console.log(test.prototype); // {name: "dylee"};
상속을 어떻게 사용하는가?
ex)
function Person(name) {
this.name = name;
}
Person.prototype.name = null;
Person.prototype.introduce = function() {
return 'My name is ' + this.name;
}
function Programmer(name) {
this.name = name;
}
Programmer.prototype = new Person(); // Person 객체 상속
var p1 = new Programmer('egoing');
console.log(p1.introduce());
표준 내장 객체
Standard Built-in Object, 자바스크립트가 우리에게 기본적으로 제공하는 내장 객체를 의미합니다.
Object, Function, Array, String, Boolean, Number, Math, Date, RegExp가 있습니다.
프로토타입을 활용한 배열의 확장
배열에서 랜덤하게 하나의 아이템을 뽑는 메소드 만들기
ex) 기존
var arr = new Array('1','2','3','4','5');
function getRandomValueFromArray(array) {
var index = Math.floor(array.length * Math.random());
return array[index];
}
console.log( getRandomValueFromArray(arr) );
ex) 확장
Array.prototype.random = function() {
var index = Math.floor(this.length * Math.random());
return this[index];
}
console.log( arr.random() );
'프로그래밍언어 > Javascript & Typescript' 카테고리의 다른 글
자바스크립트 프로토타입, 클로저, 디바운싱 알아보기 (0) | 2018.05.26 |
---|---|
알고리즘 문제 풀때 유용한 javascript 함수들 (0) | 2018.05.20 |
javascript 익명함수 간단정리 (1) | 2018.04.14 |
javascript for문의 종류별 특징 알아보기 (0) | 2018.03.27 |
자바스크립트 Moment.js를 사용하여 시간 차이 구하기 (0) | 2018.03.06 |