var a = typeof ‘Hi’; // “string”
//함수 정의
function square(number) {
return number * number;
}
//객체
var person = {
name : 'Jnary',
gender: 'female',
sayHello: function () { //프로퍼티값으로 함수가 사용된 메소드
console.log('Hi! My name is ' + this.name);
}
};
console.log(typeof person); //object
console.log(person); //{name: 'Jnary ..., sayHello: [Function: sayHello] }
//배열
var arr = [1, 2, 3, 4, 5];
console.log(arr[1]);
var key = Symbol(‘key’); //Symbol 함수 호출해서 생성
console.log(foo); //undefined
var foo = 123;
x=1, y=2, z=3; // 3
typeof NaN // number
typeof Symbol() // symbol
typeof null // object
typeof [] // object
typeof {} // object
typeof new Jnary() // object
typeof /test/gi // object
typeof f() {} // function
- 선언하지 않은 식별자의 경우, ReferenceError 가 아닌 undefined 반환
switch(month) {
case 1: case 3: case 5: case 7: case 8: case 10: case 12:
days = 31;
break;
… }
foo : {
break foo; // foo 레이블 블록문 탈출
}
- 내부 반복문이 아닌 외부 반복문을 탈출할 때 사용
1+1 = ${1+1} // 1+1 = 2
null + ‘ ‘ // “null”
(Symbol()) + ‘ ‘ // TypeError : Cannot convert a Symbol value to a string
({ }) + ‘ ‘ // “[object Object]”
Math + ‘ ‘ // “[object Math]”
[ ] + ‘ ‘ // “ “
[10, 20] + ‘ ‘ // “10, 20”
(function(){ }) + ‘ ‘ // “function() { }”
Array + ‘ ‘ // “function Array() { [native code] }”
1/’one’ // NaN
+’ ‘ // 0
+’1’ // 1
+true // 1
+null // 0
+undefined // NaN
+Symbol() // TypeError : Cannot convert a Symbol value to a number
+ { }, +[10,20], +(f(){}) // NaN
+ [ ] // 0
String(NaN) // “NaN”
(Infinity).toString() // “Infinity”
true + ‘ ‘ // “true”
Number(‘0’) // 0
parseFloat(‘3.14’) // 3.14
+true // 1
‘9.21’ * 1 // 9.21
Boolean(NaN) // false
!!’x’ // true
‘Cat’ && ‘Dog’ // “Dog”
, ‘Cat’ || ‘Dog’ // “Cat”
function getStringLength(str) {
str = str || ‘ ‘; return str.length;
} getStringLength(); // 0 -> undefined로 인한 에러 방지
1) property - 프로퍼티 키(프로퍼티 식별자) & 프로퍼티 값 - 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 or symbol 값 중복 선언시 덮어씀. 이외의 값 지정시 문자열로 암묵적 타입 변환
2) method - 객체에 제한되어 있는 함수
1) 객체 리터럴
var person = { name: ‘Jnary’, gender:'female', sayHello: function() { console.log('Hi! My name is '+this.name); } };
2) Object 생성자 함수
-var person = new Object();
//빈 객체 생성
-person.name = 'Jnary';
//프로퍼티 추가
3) 생성자 함수
- 동일한 프로퍼티를 갖는 다른 객체들 생성시 유용 (like 클래스)// 생성자 함수 function Person(name, gender) { var married = true; //private this.name = name; //public this.gender = gender; } // 인스턴스의 생성 var person1 = new Person('Jnary', 'female'); var person2 = new Person('Mingu', 'male');
-이름은 일반적으로 대문자로 시작
-this에 바인딩된 프로퍼티와 메소드는 public, 그 외 private
1) 프로퍼티 키
- 일반적으로 문자열을 지정
- 이외의 값 지정시, 문자열로 암묵적 타입 변환
- 유효한 이름인 경우, 따옴표 생략 가능
- 예약어X (ex. abstract, char, const, yield ...)
- 표현식을 프로퍼티키로 사용시, 대괄호 필수
2) 프로퍼티 값 읽기
-console.log(person['first-name']); //예약어 || 유효하지 않은 이름
-console.log(person.gender);
-console.log(person['gender']); //예약어X && 유효한 이름
- 대괄호 표기법의 경우 내에 들어가는 이름은 반드시 문자열(따옴표 생략 X)
- 객체에 존재하지 않는 프로퍼티 참조시, undefined 반환
3) 프로퍼티 값 갱신
- 소유한 프로퍼티에 새로운 값 할당 시, 프로퍼티 값 갱신
4) 프로퍼티 동적 생성
- 소유하지 않은 프로퍼티 키에 값 할당 시, 주어진 키-값 객체에 추가
5) 프로퍼티 삭제
-delete person.gender;
delete 연산자로 프로퍼티 삭제
- delete연산자의 피연산자 : 프로퍼티 키
6) for-in문
- 객체(배열 포함)에 포함된 모든 프로퍼티에 대해 루프 수행
- 객체의 문자열 키를 순회하기 위한 문법
- 배열의 경우 prop에 index반환
- 단, 반환되는 순서는 보장X
- 배열의 요소들만을 순회Xfor (var prop in person) { console.log(prop + ': ' + person[prop]); }
cf. for-of문 (ES6~)
for(const value of array) { console.log(value); }
- 배열의 요솜들만을 순회하기 위해 사용
var bar = foo
//참조값 전달, 같은 객체 가리킴1) Object.assign (객체의 방어적 복사)
- 타깃 객체로 소스 객체의 프로퍼티 복사
- 동일한 프로퍼티는 소스 객체의 프로퍼티로 덮어쓰기
- 리턴값으로 타깃 객체 반환
- ES6~, Internet Explorer 지원X
- deep copy는 지원X, Nested Object는 Shallow copy됨.
-Object.assign(target, ...sources)
const o1 = {a:1}; const o2 = {b:2}; const o3 = {c:3}; const merge = Object.assign(o1, o2, o3); console.log(o1); // {a:1, b:2, c:3} 타깃 객체는 변경 const merge2 = Object.assign({}, o1); // 변경X console.log(merge2===o1); //false 참조값
2) Object.freeze (불변객체화를 통한 객체 변경 방지)
-Object.freeze(o1);
-o1.a = 21;
무시된다.
-console.log(Object.isFrozen(o1)); //true
- Nested Object는 변경 가능!
- Nested Object도 변경 불가능하게 하려면 Deep freeze가 필요function deepFreeze(obj) { const props = Object.getOwnPrepertyNames(obj); props.forEach((name) => { const prop = obj[name]; if (typeof prop === 'object' && prop !== null) { deepFreeze(prop); } }); return Object.freeze(obj); }
3) immutable.js
- Object.assign, Object.freeze 큰 객체에권장X (성능상 이슈)
- Facebook에서 제공하는 또 다른 대안
- 영구불변 데이터 구조를 제공
(List, Stack, Map, Set, OrderedSet, Record)
-$npm install immutable
immutable.js 설치const{Map} = require('immutable') const m1 = Map({a:1, b:2, c:3}) const m2 = m1.set('b', 50) //.set()은 결과를 반영한 새로운 객체를 반환 m1.get('b') //2 m2.get('b') //50
1) 함수 선언문
- 매개변수 타입 기술X -> 몸체 내 매개변수 타입 체크 필요
-function square(number) { return number*number; }
2) 함수 표현식
- 무명의 리터럴로 표현 가능
- 변수나 자료구조(객체, 배열..) 에 저장 가능
- 함수의 파라미터로 전달 가능
- return값으로 사용 가능
- 함수 표현식 : 함수 리터럴 방식으로 함수를 정의하고 변수에 할당하는 방식
-var square = function(number) {return number*number;};
- 함수명 생략 가능 -> 익명함수 (anonymous function)
- 생략 안 한 함수는 기명 함수 (named function)
- 함수를 할당한 변수는 할당된 함수를 가리키는 참조값 저장
- 함수 호출시, 함수를 가리키는 변수명 사용
- 기명함수명 사용시 에러 -> 함수표현식에서 사용한 함수는 외부 코드에서 접근 불가능
- 기명함수명은 자신을 재귀적 호출하거나 자바스크립트 디버거가 함수를 구분할 수 있는 식별자 역할을 함
-console.log(square(10)); //100
3) Function 생성자 함수
- 함수 선언문, 함수 표현식 모두 함수 리터럴 방식으로 함수를 정의함.
-> 이는 내장 함수 Function 생성자 함수로 함수를 생성하는 것을 단순화시킨 축약법임.
-new Function(arg1, arg2, ... argN, functionBody)
-var square = new Function('n', 'return n*n');
- 일반적으로 사용 X
함수 호이스팅
1) 함수선언문에서 함수 호이스팅
- 함수가 정의되기 이전에 함수 호출 가능
First-class object (일급 객체)
- 일급 객체 : 생성, 대입, 연산, 인자, 반환값으로서의 전달 등 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상
- 일급 객체 조건
1) 무명의 리터럴로 표현 가능
2) 변수나 자료구조에 저장 가능
3) 함수의 매개변수에 전달 가능
4) return값으로 사용 가능
- 함수와 다른 객체를 구분짓는 특징은 호출할 수 있다는 것.
매개변수 (Parameter, 인자) vs. 인수(argument)
- 함수에 전달한 인수는 매개변수에 할당됨.
- 인수 전달X -> 매개변수는 undefined로 초기화
- 초과된 인수는 무시됨.
- Call-by-reference : 함수 내에서 값 변경 시, 원본 객체가 변경되는 부수효과 발생
- 부수효과를 발생시키는 비순수함수(Impure fucntion)는 복잡성 증가 -> 지양
반환값
- 배열 등을 통해 한 번에 여러 개의 값 리턴 가능
- 반환 생략 시, 암묵적으로 undefined 반환
함수 객체의 프로퍼티
- 일반 객체와는 다른, 함수만의 프로퍼티를 가짐.
function square(n) { return n * n; }
square.x = 10;
console.log(square.x);
- console.dir(square)
1) arguments 프로퍼티
- 함수 호출 시, 전달된 인수들의 정보를 담고 있는 순회가능한(iterable) 유사배열객체
- 유사배열객체 : length 프로퍼티를 가진 객체, 배열메소드 사용X
- 함수 내에서 지역변수처럼 사용 (외부에서 X)
- 가변 인자 함수 구현시 유용
- 함수 호출 시, 인수들과 함께 암묵적으로 arguments 객체나 함수 내부로 전달
function sum(...args) {
if(!args.length) return 0;
return args.reduce((pre,cur) => pre + cur);
2) caller 프로퍼티
- 자신을 호출한 함수
- foo(bar) -> bar.caller = function foo(func) {...}
3) length 프로퍼티
- 함수 정의 시, 작성된 매개변수의 개수
- arguments.length값과 다를 수 있음
4) name 프로퍼티
- 함수명. 익명함수의 경우 빈문자열
- var namedFunc = function Jnary(a,b) { ... }
- console.log(namedFunc.name); //Jnary
5) __proto 접근자 프로퍼티
- 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 가짐.
- 내부 슬롯은 프로토타입 객체를 가리킴.
- 프로토타입 객체 : 프로토타입 기반 객체 지향 프로그래밍의 근간을 이루는 객체로서 객체간의 상속을 구현하기 위해 사용됨.
- 즉, 다른 객체에 공유 프로퍼티를 제공하는 객체.
- __proto 프로퍼티는 [[Prototype]] 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티
- 내부 슬롯에 접근X -> 간접적 접근 방법 제공하는 경우에만 가능
- [[prototype]] 내부 슬롯에도 직접 접근X
- __proto 접근자 프로퍼티를 통해 간접 접근
- 객체 리터럴로 생성한 객체의 프로토타입 객체는 Object.prototype
- 객체가 직접 소유하는 프로퍼티X -> 모든 객체의 프로토타입 객체인 Object.prototype
객체의 프로퍼티
- 모든 객체는 상속을 통해 __proto 접근자 프로퍼티 사용 가능
6) prototype 프로퍼티
- 함수 객체만이 소유하는 프로퍼티 -> 일반 객체에는 X
- console.log(Object.getOwnPropertyDescriptor({}, 'prototype')); //undefined
함수의 다양한 형태
1) 즉시 실행 함수
- IIFE (Immediately Invoke Function Expression)
- 함수의 정의와 동시에 실행되는 함수
- 최초 한 번만 호출, 다시X
- 초기화 처리 등에 사용
- (function myfunc() { ... }());
2)
3)
" 본 포스팅은 PoiemaWeb을 바탕으로 정리한 것입니다. "