본문 바로가기

javascript7

[Javascript] Global 변수, Global 함수가 좋지 않은 이유 Javascript에서(다른 언어에서도 마찬가지지만), 변수나 함수를 전역 범위에서 선언하는 것은 두 가지 이유로 인해 권장하지 않는다. 1. Tight coupling2. Name collisions Tight Coupling Tight coupling이란, 각각의 코드들이 서로 지나치게 의존적인 상황이 되는 것을 말한다. coupling이란 두 아이템의 쌍이 함께하는 것을 뜻하는데, 즉 tight coupling은 서로 다른 두 묶음의 코드들이 서로 의존적이어서 어느 한 쪽에 의도치 않은 변화를 일으키는 상황을 뜻한다. var instructor = 'Richard'; function richardSaysHi() { console.log(`${instructor} says 'hi!'`);} 위의 코드.. 2018. 6. 26.
[Javascript] 기본 매개변수(Default Function Parameters) 아래의 코드를 보자.function greet(name, greeting) { name = (typeof name !== 'undefined') ? name : 'Student'; greeting = (typeof greeting !== 'undefined') ? greeting : 'Welcome'; return `${greeting} ${name}!`; } greet(); // Welcome Student! greet('James'); // Welcome James! greet('Richard', 'Howdy'); // Howdy Richard! greet()은 2개의 인자를 받아 각각 출력하는 간단한 함수이다. 다만 인자가 들어오지 않았거나 'undefined'인 경우에 대비해 각각 'Student.. 2018. 6. 12.
[Javascript] 프로토타입 상속(Prototypal Inheritance) function Cat() { this.lives = 9; this.sayName = function () { console.log(`Meow! My name is ${this.name}`); }; }위의 코드에서, 새롭게 생성된 'Cat' object의 'sayName' attribute에 함수를 추가함으로써, sayName() 메소드가 모든 'Cat' Object에 추가된다.문제 없이 잘 동작하는 코드이지만, 만약 이 constructor로 더 많은 'Cat' object들을 초기화하고 싶다면? 각각의 'Cat' object의 sayName을 위한 함수를 매번 생성해야 할 것이다. 뿐만 아니라, 메소드를 수정해야 할 경우 각각의 object들을 일일이 고쳐야 한다.이 경우, 'Cat' construc.. 2018. 6. 2.
[Javascript] Closure, 그리고 IIFE의 활용 이번에는 지난 포스트에서 소개한 Scope에 이어서, 역시 Javascript에서 자주 쓰이는 개념인 Closure에 대해 알아 보고, 추가로 IIFE(Immediately-Invoked Function Expressions)까지 정리해보도록 한다. Closure (클로저)closure를 이해하기 위해, 이렇게 생각해보자. 함수의 scope에 대한 접근(access) 권한이 일회성이 아니라 계속 유지될 수 있다.아직은 감이 잘 오지 않는다. 다음 코드에서 remember() 함수에 주목해 보자:function remember(number) { return function() { return number; } } const returnedFunction = remember(5); console.log( r.. 2018. 5. 3.
Javascript의 스코프(Scope)에 대한 이해 Javascript에서 어떤 함수가 실행되면, 새로운 runtime scope가 생성된다. 이 scope는 함수의 context를 규정하며, 즉 어떤 함수에서 어떤 변수들이 사용 가능한지를 규정하게 된다.그렇다면 함수가 접근할 수 있는 영역은 어디까지일까? 이와 관련된 개념인 스코프(scope)에 대해 알아보자. Scope함수의 runtime scope는 주어진 함수 내에서 사용 가능한 변수를 일컫는다. 함수 내부의 코드는 다음에 대해 접근 가능하다: 1. 함수의 인자(argument)2. 함수 내부에 선언된 지역 변수3. 부모 함수의 scope로부터의 변수4. 전역 변수 다음의 코드를 보자.const myName = 'Kim'; // 전역 변수(Global variable) function introd.. 2018. 4. 29.
[Javascript] Callbacks: forEach, map, filter Callback Functions 지난 포스트에서 언급했듯이, Javascript의 함수는 first-class 함수다. first-class 함수의 특성 중 하나는 일반적인 값들을 함수에 넘겨주듯, 함수를 함수에 넘겨주는 것 역시 가능하다는 것이었다. 다른 함수를 인자로 받아들이거나 return하는 함수를 "higher-order function"이라 칭하고, 다른 함수에 인자로 들어가는 함수를 우리는 "Callback function"이라고 부른다. 특히 배열에서 콜백 함수를 자주 볼 수 있는데, 배열 메소드의 내부로 함수가 전달되는 것이다. 이번 글에서는 배열에서 콜백 함수와 함께 자주 활용되는 다음의 3가지 메소드에 대해 알아 보도록 한다. forEach()map()filter() forEach(.. 2018. 4. 14.
First-Class Functions 함수는 First-Class다!Javascript는 First-Class Function을 갖고 있다. Javascript의 함수는 First-Class이다.무슨 뜻일까? Javascript에서 함수는, 1. 변수에 저장할 수 있고2. 다른 함수의 인자(argument)로 전달할 수 있고(Callback function)3. 함수의 리턴값으로 쓸 수 있다. 어떤 프로그래밍 언어이든 위의 세 가지가 모두 가능하면, 그 언어는 "First-Class Function"을 갖는다고 할 수 있다.(First-class function - Wikipedia 참조) First-class function이 의미하는 것은 즉, 일반적인 다른 data structure, 이를테면 숫자, string, object, 배열 .. 2018. 4. 14.