본문 바로가기

복습/Javascript

[Javascript] 객체지향 자바스크립트 [이터레이터, 이터러블, 제너레이터] 이터레이터, 이터러블, 제너레이터 for forEach() for...in for...of 심볼(Symbol) 인터페이스(Interface) 이터레이터(Iterator) 이터러블(Iterable) 제너레이터(Generator) for 배열루프를 순회하기위한 일반적인 방법 for(var i = 0; i = 0){ console.log(arr.pop());} while 문을 살펴보도록 하자 while( 계속 반복할지 판단 ) { 반복시마다 처리할 것}데이터에 대한 공급 : 계속 반복할지 판단 부분과 반복시마다 처리할 것 데이터에 대한 소비 : while문 자체는 데이터 공급에대한 소비이다.이터레이터 인터페이스 에 맞춰서 본다면 var obj = { array: [1, 2, 3, 4], next: functi..
[Javascript] 객체지향 자바스크립트 [소괄호의 의미와 IIFE] 소괄호의 의미 소괄호 () 가 의미하는 바가 무엇인지 알아보고, 즉시실행함수(IIFE)가 무엇인지 알아보도록한다. 함수 선언과 표현 먼저 함수 선언과 표현에대한 차이점을 알아보도록 한다. 함수선언 (Function Declarations) function name (parameter){ statements} name : 함수이름 parameter : 함수의 인자이며 255개까지 인자를 가질 수 있습니다 statements : 함수의 본문을 기술합니다함수의 선언은 이름을 가지며 선언시 자동으로 호이스팅(hoisting) 됩니다. foo(); function foo(){ console.log("hello");}// "hello" 함수 선언을 뒤에 했음에도 불구하고 foo() 호출시에 정상적으로 작동 함수표현..
[Javascript] 객체지향 자바스크립트 [객체 part3, 내장객체] # Function * 함수는 실제로 객체다 * Function() 이라는 내장 생성자 함수가 존재* Function() 생성자는 eval() 과 동일한 단점을 가지므로 피하는 것이 좋다function sum(a, b){ // 함수 선언 return a + b; } console.log(sum(1, 2)) // 3 var sub = function(a, b){ // 함수 표현식 return a - b; } console.log(sub(2, 1)) // 1 var multi = new Function('a', 'b', 'return a * b'); // Function() 생성자 이용 console.log(multi(1, 2)); // 2* Function() 생성자 함수에 대한 참조를 가진 constru..
[Javascript] 객체지향 자바스크립트 [객체 part 2] # ES6 객체 리터럴 * 변수의 이름과 속성 키가 같은 경우 ES6에서 약식구문 사용 가능/* 일반적인 방법 let a = 1; let b = 2; let val = {a: a, b: b}; console.log(val); // { a: 1, b: 2 } */ // ES6 let a = 1; let b = 2; let val = {a, b}; console.log(val); // { a: 1, b: 2 } * function 과 : 를 생략 가능/* 일반적인 방법 var obj = { num: 1, get: function(){ console.log(this.num); } } */ // ES6 var obj = { num: 1, get(){ console.log(this.num); } } obj.get..
[Javascript] 객체지향 자바스크립트 [객체 part 1] # 배열에서 객체로 * 배열은 값의 목록일 뿐이다 var myarr = ['red', 'blue', 'yellow']; // 키(index) = 0, 1, 2 // 값 = red, blue, yellow * 키와 값이 쌍의 테이블이다 var hero = { name : 'heecheol', job : 'ninja' }; /* 객체를 참조하는 변수의 이름은 hero 배열은 [], 객체는 {} 사용 []로 배열을 정의하는것 - 배열 리터럴 표기법(array literal notation) {}로 객체를 정의하는것 - 객체 리터럴 표기법(object literal notation) 요소(property)는 쉼표( , )로 구분 key : value 와 같이 콜론으로 키와 값을 나눈다 key의 이름이 변수로 유..
[Javascript] 객체지향 자바스크립트 [클로저] # 클로저(closure) 범위체인 (scope chain) 자바스크립트의 범위에는 중괄호 범위가 아닌 함수범위가 존재한다. (ES6부터는 let, const 키워드 도입으로 블록단위 사용가능) 예) 클로저는 해당 함수에대한 환경을 기억한다, 자바스크립트는 객체단위이다 예) a() 를 두번호출한 후 b() 를 호출하면 addOne() 의 함수이름이 같기때문에 b() 의 호출값은 3 이 되어야 맞지만 1 이 출력된다 그 이유는 변수 a 와 변수 b 는 다른 객체이기 때문에 서로 다른 환경을 가지고 있다. 루프의 클로저 클로저는 외부함수의 변수에대한 참조를 기억한다 예) 예상한 결과와 다르게 나온다, 그 이유가 무엇일까? 함수는 값을 기억하지 못하고, 생성된 환경에대한 참조(링크)만 기억한다 그렇기때문에 함..
[Javascript] 객체지향 자바스크립트 [함수는 데이터, 콜백함수, 함수반환, 내부함수] # 함수는 데이터함수를 변수에 할당할 수 있다이러한 방식을 함수 리터럴 표기법(function literal notation) 예) 함수 리터럴 표기법 function(){return 1;} 이 부분이 함수 표현식(function expression)함수표현식은 이름을 가질 수 있으며, NFE(named function expression), 이름있는 함수표현식이 된다typeof 를 하게되면 "function" 문자열이 반환 (위의 사진 참고) 함수를 다른 변수에 복사할 수 있다 예) 변수의 이름지정규칙과 동일한 규칙 적용(숫자로 시작불가) # 익명 함수(anonymous function) 익명함수를 매개변수로 다른 함수에 전달가능함수이름이 없음익명 함수를 정의하고 바로 실행 가능 예) # 콜백 함수(c..
[Javascript] 객체지향 자바스크립트 [함수, 호이스팅, 블록범위] # 함수(function)란 무엇인가? 코드를 그룹화하고 이름을 지정하여, 기능을 수행하는 코드 함수 선언의 구성 요소 function 키워드 함수이름 함수 매개변수 (사용하지 않거나 개수를 임의로 지정가능하며 쉼표(,)로 구분) 코드 블록(= 함수본문) return문, 함수는 항상 반환값이 있다. 명시적으로 반환하지 않으면 암시적으로 undefined 반환 함수는 하나의 값만 반환 가능 함수 호출 함수 이름을 사용하여 호출 함수 호출시 괄호 안에 매개변수 제공가능 매개변수(parameter) 함수를 선언할 때 필요한 매개변수 지정가능 함수를 선언할 때 필요한 매개변수 지정가능 매개변수가 없을수도 있다 매개변수가 필요한 함수이지만 호출시 매개변수를 제공하지 않으면 자바스크립트에서는 undefined값이 ..