Study/JavaScript (36) 썸네일형 리스트형 함수형 프로그래밍과 JavaScript ES6+ (1) 평가: 코드가 계산되어 값을 만드는 것. 일급: [값]으로 다룰 수 있다, [변수]에 담을 수 있다. 함수의 [인자]로 사용될 수 있다. 함수의 [결과]로 사용될 수 있다. 자바스크립트에서 함수는 일급이다. 즉 함수를 값으로 다룰 수 있다는 의미입니다. 우리는 이것을 "일급 함수"라고 합니다. const add5 = a=> a+5; log(add5); // console.log(add5)는 a=>a+5 가 나온다. // console.log(add5(5))는 10이 나온다. 함수의 결과값으로 함수가 사용될 수 있습니다. const f1 = () => () => 1; console.log(f1()); // () => 1 // 또한 다른 함수의 변수에 담을 수 있다. const f2 = f1(); conso.. 자바스크립트 중급 (3) 구조 분해 할당 ▶ 배열 구조 분해 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 let [x, y] = [1, 2]; console.log(x); // 1 console.log(y); // 2 예제 let users = ['Mike', 'Tom', 'Jane']; let [user1, user2, user3] = users; // let user1 = users[0]; // let user2 = users[1]; // let user3 = users[2]; console.log(user1); // 'Mike' console.log(user2); // 'Tom' console.log(user3); // 'Jane' // 또는 let str = "Mike-Tom-Jane"; l.. 자바스크립트 중급 (1) 코딩앙마님의 자바스크립트 중급 강좌 내용 중 제가 몇 가지를 정리해보았습니다. https://youtu.be/4_WLS9Lj6n4 Computed property (계산된 프로퍼티) let a = 'age'; const user = { name : 'Mike', [a] : 30 } // {name : 'Mike', a: 30} // 식을 넣어도 가능 const user = { [1+4] : 5; ["안녕" + "하세요"] : "Hello" } // {5:5, 안녕하세요: "Hello"} 객체에서 사용할 수 있는 몇가지 메서드들... 1. Object.assign(target, ...sources) // Object.assign(): 객체 복제, (assign: 할당 양도) //Object.assign().. 코어 자바스크립트 - CLASS class는 공통적인 속성을 모아 하나로 묶은 것으로 설명할 수 있습니다. class와 함께 등장하는 용어로 인스턴스가 있습니다. 인스턴스는 해당 클래스의 속성을 지닌 구체적인 객체들입니다. 정리해보겠습니다. 클래스: 인스턴스들의 공통 속성을 모은 추상적인 개념 인스턴스: 공통된 속성을 지니는 구체적인 대상 앞시간에서 설명한 프로토타입을 예로 들면 Array와 프로퍼티, 메서드가 calss에 해당할 것이고 인스턴스가 여기서도 인스턴스에 해당하게 됩니다. Array의 프로퍼티 중 프로토타입 프로퍼티 내부에 할당되지 않고 Array 생성자함수 객체에 직접 할당되어 있는 프로퍼티들을 static methods, static properties라고 합니다. 이들은 new연산자 없이 함수로써 호출할 때만 의미가 .. 코어 자바스크립트 - 프로토타입(Prototype) 이번 시간에는 프로토타입에 대해 알아보겠습니다. 1. Prototype, [[Protoype]], constructor 우리는 먼저 Prototype, [[Protoype]], constructor에 대해 알아보겠습니다. constructor로 만든 함수를 new를 사용해 instance를 만듭니다. 그러면 Constructor의 prototype이라고 하는 프로퍼티의 내용이 [[Prototype]]라고 하는 프로퍼티로 참조를 전달하게 됩니다. 이렇게 되면 Constructor.prototype과 instance.[[prototype]]이 같은 객체를 바라보게 됩니다. 그런데 [[prototype]]은 접근가능한 것이 아닌 정보를 보여주기만 하기 때문에 실제 동작상으로는 instance와 동일시가 됩니다.. 코어 자바스크립트 - 클로저(Closure) 클로저는내부함수와 LexicalEnvironment의 조합으로 함수가 생성될 때면 매번 같이 발생합니다. 이 말을 좀 더 풀어보겠습니다. 컨텍스트 A에서 선언한 변수(environmentRecord)를 내부함수 B에서 outerEnvironmentReference가 참조합니다. 이때 발생하는 특별한 현상을 클로저라고 합니다. 그러면 특별한 현상이라는 것이 무엇일까요? 코드를 보겠습니다. // 기본 코드 var outer = function () { var a = 1; var inner = function () { console.log(++a); }; inner(); }; outer(); // 클로저가 생긴 코드 // 실행하지 않고 return으로 값을 넘김 // outer함수를 outer2로 넘겨줌 va.. 코어 자바스크립트 - 콜백함수 콜백함수는 함수를 처리해달라고 다른 곳에 넘겨 제어권을 위임합니다. 그리고 나서 처리된 값을 다시 받습니다. 앞서 보았던 this에서 이벤트 핸들러가 좋은 예시가 되겠습니다. 콜백함수가 넘겨주는 제어권은 실행 시점, 매개변수, this가 있습니다. ▶ 실행 시점 //setInterval 일정 시간 간격으로 함수 호출 setInterval(function () { console.log('1초마다 실행'); }, 1000); 위의 경우 함수의 실행 시점을 setInterval에게 넘겨주었음으로 함수는 콜백함수이다. ▶ 매개변수 var arr = [1, 2, 3, 4, 5]; var entriees = []; arr.forEach(function(v,i) { // v: value , i: index entri.. 코어 자바스크립트 - THIS 앞서 배웠던 실행 컨텍스트(Excution Context)에서 이 안에 3가지의 정보가 담긴다고 이야기했습니다. VariableEnvironment, LexicalEnviroment, ThisBinding 이 세가지 중에서 앞의 2개는 설명했고 이번에는 ThisBinding에 대해 이야기해보겠습니다. ThisBinding은 실행 컨텍스트가 생성될 때 실행됩니다. 그럼 활성화되는 때는 언제일까요? 바로 해당 함수가 호출될 때 입니다. 그러면 this는 함수가 호출될 때 결정된다고 말할 수 있겠습니다. 즉 함수를 호출한다고 해서 this를 예측할 수 있는 것이 아니라 함수를 어떤 식으로 호출했느냐에 따라 this는 얼마든지 달라질 수 있습니다. 그렇다면 어떻게 호출했느냐를 살펴봐야겠죠. 그래서 호출을 다음과.. 이전 1 2 3 4 5 다음
