eval 정의

• eval()은 전역 객체(window)의 함수 속성이다.
• eval()의 인자는 문자열이며 문자열 형태를 연산할 수 있다.

console.log('2 + 2');
// 2 + 2

console.log(eval('2 + 2'));
// 4

eval 문제점

• 굳이 eval() 함수를 쓰지 않아도 충분히 동일한 동작을 구현할 수 있는 경우가 많다.
• 보안상 위험한 javascript 코드를 실행할 수 있다는 위험때문에 eval() 함수는 권장되지 않는다.

References

eval()
eval() 사용과 문제점 : #eval() is evil
JavaScript eval 함수

반올림

Math.round();

var num = 3.5;
console.log(Math.round(num)); // 4

올림

Math.ceil();

var num = 3.5;
console.log(Math.ceil(num)); // 4

내림

Math.floor();

var num = 3.5;
console.log(Math.floor(num)); // 3

이전 포스팅에서도 언급했지만 참조타입으로는 객체(Object), 배열(Array), 함수(Function)가 있다. 원시타입과 참조타입을 비교하는것에 초점을 두어 간단히 알아본다.

객체(Object)

자바스크립트에서 객체는 단순하게 표현하면 속성명(Key), 값(value) 형태의 속성(property)을 저장하는 그릇이라고 생각하면 된다. 즉 여러 값을 표현하는 묶음을 만들때 사용된다. 간단한 객체를 만들어 보겠다.

var person = {
    name: '철수',
    age: '20'
}

속성명(name, age)과 값(‘철수’, ’20’)인 객체를 선언했다. 객체 선언 방식은 {}(중괄호)로 한다. 이 선언 방식은 객체 리터럴 방식이라고 하며, 리터럴이란 용어의 의미는 표기법이라고 생각하면 된다. 리터럴 방식은 간단한 표기법만으로도 객체룰 생성할 수 있는 자바스크립트의 강력한 문법이다. 객체의 프로퍼티에 접근하려면 마침표 표기법과 대괄호 표기법이 있다.

console.log(person.name); // 철수

배열(Array)

배열은 변수에 여러가지의 값을 한번에 담을 수 있는 그릇이라고 볼 수 있다. 위에 언급한 객체와 비슷해 보일 수 있지만 배열의 속성명은 각 프로퍼티의 인덱스 값이다. 선언방식은 [](대괄호)로 하고 객체와 마찬가지로 이는 배열 리터럴이다.

var person = ['철수', '20'];

객체와는 다르게 배열의 속성명은 인덱스 값이라고 했다. 그러므로 person의 첫번째 값인 ‘철수’의 속성명(Key)은 배열의 첫번째 인덱스인 0이고, 두번째 값(value)인 ’20’의 속성명은 1이 되는 것이다. 배열의 프로퍼티에 접근하려면 대괄포 표기법을 이용하면 된다.

console.log(person[0]); // 철수 
console.log(person[1]); // 20

함수(Function)

함수는 특정 기능을 하는 구문(알고리즘, 로직)을 독립된 부품으로 만들어 재사용하고자 할때 사용하는 문법이다. 함수를 선언할때는 function키워드를 사용하며 구조는 아래에서 확인할 수 있다.

function 함수이름(파라미터) {
    // 알고리즘
    return 값 // 리턴 값
}

객체(참조)타입이 무엇이 있나 간단히 봤다. 원시타입과 객체(참조)타입의 차이점을 알아보도록 하자.

원시 타입과 참조 타입의 차이

자바스크립트에서는 원시타입인 숫자, 문자열, 논리형, 널, 언디파인드 다섯가지를 제외한 모든 값은 객체(참조)타입 이다. 참조 타입이라고 불리는 이유는 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문이다. 아래 예제를 살펴 보자.

원시타입은 값 자체를 복사한다.

var num1 = 10,
    num2 = num1;
console.log(num2); // 10
    num1 = 20;
console.log(num2); // 10

변수 num1에다가 10을 대입하고 num1를 num2에 대입했다. 변수에 할당된 값 자체를 복사하였기 때문에 num2의 값은 10이다. num2에 20을 대입해도 num2의 값은 변하지 않는다. num2에 직접적으로 값을 대입하지 않았기 때문이다. 아래 참조타입을 보자.

참조타입은 참조(주소)값을 복사한다.

var obj1 = {
    val: 10
}
var obj2 = obj1;
console.log(obj2.val); // 10
obj1.val = 20;
console.log(obj2.val); // 20

우선 obj1에 객체 리터널을 선언하고, val 프로퍼티에 10을 담았다. 그리고 obj2에 obj1을 할당했다. obj2의 val프로퍼티의 값은 10이 출력된다. 여기서 obj1의 val에 20을 담았다. obj2의 val값을 건들지도 않았는데 obj1 처럼 val값이 20으로 봐뀌어있다. 어떻게 된 것일까?
값 자체가 복사되는 원시값과는 달리 참조타입은 참조(객체를 가르키는 참조값 혹은 메모리 주소)만 복사되고 실제 값은 복사되지 않는다. 즉 obj1과 obj2는 실제 데이터를 가지고 있는 객체의 참조(주소)값만 가지고 있는 것이다.

자료형이란?

자료형은 데이터 값의 유형이다.

원시타입과 객체(참조)타입으로 나눌 수 있다.

원시타입

• 문자열(String)
• 숫자(Number)
• 논리형(Boolean)
• 언디파인드(Undefined)
• 널(Null)

객체(참조)타입

• 객체(Object)
• 배열(Array)
• 함수(Function)

여기서 객체(참조)타입과 객체(Object)의 차이에 대해 혼동하기 쉽다. 객체(참조)타입은 기본타입을 제외한 모든 자바스크립트의 객체를 가르키며, 객체(Object), 배열(Array), 함수(Function)도 객체(참조)타입 에 포함된다. 객체(Object)는 자바스크립트에서 표현되는 자료형의 값이며 객체(참조)타입중에 하나인 객체(Object)이다.

원시타입

문자(string)

우리가 실생활에서 쓰고 있는 글자를 문자열이라고 생각하면 된다. 변수에 담는 방식은 큰따옴표나 작은 따옴표로 감싸서 저장하시면 된다. 문자열에 따옴표를 포함하고 싶으면 다른 따옴표로 감싸주면 된다.

var str = 'data'; // 문자열을 담을 때
var str = "'data'"; // 작은 따옴표를 문자열에 추가하고 싶을때

참고로 따옴표를 문자열로 인식하고 싶을때는 역슬래쉬를 따옴표 앞에 붙여 사용하면 된다. 이 작업을 이스케이핑이라고 부른다.

var str = "'data'"; // 작은 따옴표를 문자열로 인식하고 싶을때

숫자(number)

우리가 알고있는 숫자라고 생각하면 된다. 자바스크립트는 모든 숫자를 64비트 부동소숫점 형태로 저장하기 때문에 하나의 타입만 존재하며 형태는 크게 정수형(10진수, 16진수), 실수형으로 나뉜다.

• 정수형(10진수) : 평상시에 사용하는 10진수이며, 소숫점이 없다.
• 정수형(16진수) : Ox로 시작하며 숫자 09와 문자 AF를 사용해서 숫자를 표현한다. 보통 색상을 나타낼때 사용한다.(예 : 0xF00)
• 실수형 : 소숫점을 갖는 숫자

자바스크립트는 소숫점을 계산할때 한가지 오류가 있는데 확인하고 넘어가자.
하단의 코드를 보면

console.log(0.1 + 0.2);

결과는 0.3 이 나올겉 같지만 0.30000000000000004 가 출력이 된다. 이것이 부동소수점 오류며 아래와 같은 방법으로 해결을 할 수 있다. 주의하도록 하자.

console.log(((0.1 * 10) + (0.2 * 10)) / 10);

논리형(boolean)

쉽게 설명해서 참, 거짓이라고 생각하면 된다.

• 참 : true
• 거짓 : false

데이터 타입마다 true, false로 변환되는 값이 다르다.

데이터 타입	true로 변환되는 값	false로 변환되는 값
불리언	true	flase
문자열	비어 있지 않은 모든 문자열	“”(빈 문자열)
숫자	0이 아닌 모든 숫자(무한대 포함)	0, NaN
객체	모든 객체	null
Undefined	해당 없음	undefined

언디파인드(undefined)

언디파인드는 아무 값도 없는 상태이다.

var val; // undefined

널(null)

널은 아무것도 참조하고 있지 않다라는 의미이다. 여기서 언디파인드와 널이 조금 헷갈리는데, 언디파인드는 값 자체가 선언이 되지 않은거고 널은 임의로 빈 값으로 선언한 상태라고 보면 된다. 널은 객체를 담을 변수를 초기화할때 많이 사용한다.

각 자료형의 초기화

var num = 0; // 숫자 초기화
var str = ''; // 문자 초기화
var boolean = false; // 논리형 초기화
var obj = null; // 객체 초기화

정의

프로그래밍에서 데이터를 담는 공간이다.

var 변수이름 = 저장데이터;

선언 방법은 var 키워드를 사용하며(현재는 let, const 키워드 사용을 지향한다.), =는 대입 연산자로서 우측에 있는 값을 왼쪽에 있는 변수에 담는 연산자다. ;(세미콜론)은 문장의 끝을 알린다. 오류를 방지하기 위해 문장이 끝나면 꼭 선언해 주도록 하자.

참고로 함수 선언식에서는 마지막에 세미콜론을 붙이지 않는데 이건 하나의 관습이고, 코드 작성시 권장되는 방식이다. 그리고 자바스크립트에서는 세미콜론 사용을 강제하지는 않는다. 그 이유는 자바스크립트 인터프리터가 자동으로 세미콜론을 삽입시켜 주기 때문이다. 하지만 세미콜론을 꼭 선언해 주는 습관을 가지도록 해야한다. 신경을 안쓴다면 코드를 압축하거나 디버깅중에 심각한 오류를 가지게 될수 있기 때문이다.

종류

변수는 크게 네가지로 나뉠수 있으며 종류는 아래와 같다.

1. 전역변수(Global Variable): 전역에서 사용되는 변수로서 어디서든 접근이 가능하다.
2. 지역변수(Local Variable): 특정 지역에서 사용되는 변수로서 보통 함수 내부에 만들어 지는 변수
3. 인자 & 매개변수(Parameter): 함수 외부에서 데이터를 받을 때 사용되는 변수

인수(Arguments)와 인자 & 매개변수(Parameter)에 대해 다소 헷갈릴 수 있다. 인수는 함수를 호출할때 대입하는 값을 의미하고 인자 & 매개변수는 함수 외부에서 전달받은 값을 의미한다고 볼 수 있다.

function func(foo) {
  return foo; // foo = 인자 & 매개변수
}
func("value") // "value" = 인수

4. 속성(Property): 객체의 속성값으로 쓰이는 변수이다. 참고로 전역 객체는 window 객체이다. 전역변수를 선언한다면 자동으로 window 객체의 프로퍼티가 된다고 생각하면 된다.

var obj = {
  name: "foo"
};
// name = 속성(프로퍼티, 아니면 키)
// foo = 속성의 값(프로퍼티 값 아니면 키값)

명명 규칙

변수를 만들때는 주의사항이 네가지 있다.

• 변수명은 대소문자를 구분해야 한다.
• 변수명은 소문자로 시작하고, 관례상 카멜기법을 사용한다. 여기서 카멜기법이란 문자모양이 낙타와 비슷하다고 해서 지어졌다. 네이밍 기법은 3가지로 분류할수 있다.
  • 카멜기법(myName)
  • 스네이크 기법(my_name)
  • 파스칼 기법(my-name)
• 한번 저장하고 변하지 않는 상수값은 모두 대문자로 작성한다. 자바 언어 같은 경우 상수 값을 만드는 방법이 지원되지만 자바스크립트는 없다. 그래서 관례상 대문자로 작성하는 것이다. 예가 몇가지 있는데 슬라이드 플러그인에서 사용자가 정의하는 변수나, 그누보드의 config.php 에 나와있는 상수 선언 등이 있다.
• 키워드(예약어)를 사용하면 안된다.(예: var, function, break 등등 아주 많음) 예약어로 변수를 선언하면 브라우저에서 오류 메세지가 출력되므로 많은 예약어를 굳이 따로 외울 필요는 없다.

자바스크립트 소개

자바스크립트는 프로토타입 기반의 스크립트 언어이며 넷스케이프사의 브렌던 아이크가 만들었다. (그는 10일 만에 언어를 만들었다.) 주로 웹 브라우저 내에서 주로 사용되며 node.js와 같은 런타입 환경에서 서버 사이드 프로그래밍으로도 사용되고 있다.

언어의 타입이 너무 유연해서 인터넷에 위같은 밈이 돌아다닌다.

초창기 자바스크립트는 웹 페이지 제작에 있어서 보조적인 기능을 수행하기 위한 용도로써 사용되었다. 클라이언트인 웹 브라우저에서 서버로부터 받은 HTML과 CSS, 데이터로 렌더링을 해주는 수준이였다. 이 시절에 자바스크립트는 그다지 중요한 역할을 담당하지 못했다. 하지만 소수의 프로그래머들에 의해 여러 가지 연구가 이루어졌고, 웹 아키텍쳐에도 크고 작은 변화가 일어났다. 특히 과거에 서버에서 담당했던 역할들이 상당 부분 웹 브라우저로 이동하였고, 자바스크립트는 이 변화의 중점에 서게 된다. 게다가 jQuery 의 등장으로 보다 쉽게 DOM을 핸들링하게 되면서 많은 발전을 이루었다.

현재는 브라우저 기반의 자바스크립트 라이브러리 뿐만 아니라 Node.js와 같은 서버 기반의 자바스크립트 환경에서 동작할 수 있는 각종 라이브러리까지 쏟아져 나오고 있다. 이제는 자바스크립트만으로 웹 서버와 클라이언트인 웹 페이지 개발을 동시에 할 수 있는 수준까지 왔다고 볼 수 있다.

자바스크립트는 클래스를 지원하지 않아 클래스 상속을 이용한 객체 지향 프로그래밍은 할 수 없지만, 프로토타입의 복제 과정을 이용하여 상속을 흉내내도록 구현이 가능하다.

객체 지향 프로그래밍(OOP)

줄여서 OOP라고 부르겠다. OOP는 컴퓨터 프로그래밍 패러다임중 하나이며, 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러개의 독립된 단위, 즉 “객체” 들의 모임으로 파악하고자 하는 것이다. 각각의 객체들은 메시지를 주고받고, 데이터를 처리할 수 있다.
객체지향 프로그래밍은 프로그램을 유연하고 변경이 용이하게 만들기 때문에 대규모 소프트웨어 개발에 많이 사용되고, 보수를 간편하게 하며 보다 직관적인 코드 분석을 가능하게 하는 장점을 가지고 있다.
객체지향의 반대로는 절차지향 프로그래밍(procedural Programming)이라는 패러다임이 있다. 절차지향 프로그래밍이란 순차적인 처리가 중요시되며, 프로그램 전체가 유기적으로 연결되도록 만드는 프로그래밍 기법이다. 대표적인 절차지향 언어에는 C언어가 있다. OOP의 특성으로는 추상화(Abstraction), 캡슐화(Encapsulation), 상속(Inheritance), 다형성(Polymorphism)이 있다.