에이블디 공식 블로그

안녕하세요 여러분! 에이블디 입니다! 이번 시간에는 지난 시간에 배운 호이스팅(Hoisting)에 이어 스코프(Scope)에 대해 배워보도록 할게요! 스코프는 자바스크립트에서 식별자를 선언하고 사용할 때 식별자가 적용되는 범위를 말하는데요, 식별자는 지난 시간에 뭔지 풀어드려서 다들 아시죠? 아무튼 이 식별자가 선언된 위치에 따라 적용되는 범위가 달라집니다. 이번에도 변수를 이용하여 스코프에 대해 이해해보도록 하겠습니다! 지난 시간(자바스크립트 16번 글)에 지역 변수와 전역 변수에 대해 알려드린 것 기억나시나요? 전역 변수는 어디에서든지 참조가 가능했고, 지역 변수는 함수 내에서만 참조가 가능했었었죠? 위에서 스코프는 식별자가 적용되는 범위를 말한다고 했는데요, 그래서 전역에 선언된 변수는 전역 스코프..

안녕하세요 여러분! 에이블디 입니다! 이번 시간에는 호이스팅(hoisting)에 대해 알아보려 해요! 지난 시간에 함수에 대해 알아볼 때 자바스크립트는 소스코드를 한 줄씩 순차적으로 실행하기 전에 모든 선언문을 찾아내어 먼저 실행한다고 설명한 것 기억나시나요? 변수, 함수 등을 선언할 때 사용하는 var, let, const, function, function*, class를 사용하여 선언한 모든 식별자는 다른 코드보다 먼저 실행되는 특징을 가지고 있는데, 이를 호이스팅이라고 합니다. 이 호이스팅을 이해하기 위해 다시 한번 자바스크립트의 특징에 대해 짚고 넘어가 볼게요! 간단하게 변수 하나를 선언해 볼게요! var number = 1; 지금부터 변수에 대해 조금 더 이해하는 시간을 가지고 가보도록 할게요..

안녕하세요 여러분! 에이블디 입니다! 이번 시간에는 즉시 실행 함수에 대해 알아볼게요! 즉시 실행 함수는 함수를 정의함과 동시에 실행하는 함수인데요, 이전 시간에 함수를 사용하는 것을 보면 함수를 선언하고 선언한 함수를 호출하는 방식으로 함수를 사용했던 것 기억나시나요? 즉시 실행 함수는 함수를 선언하자마자 바로 호출하는 특징을 가지고 있어 기존의 함수를 실행하는 과정들을 거치지 않는 특징이 있습니다. 즉시 실행 함수의 사용법은 코드를 보며 알아보도록 할게요! ( function() { console.log("즉시 실행 함수 사용법 1."); } )(); ( function() { console.log("즉시 실행 함수 사용법 2."); } ()); 즉시 실행 함수의 사용법은 큰 틀로 보면 위의 두 가지..

안녕하세요 여러분! 에이블디 입니다! 이번 시간에는 지역 변수와 전역 변수에 대해 배워보도록 하겠습니다! 프로그램을 만들다 보면 함수 하나로도 프로그램을 만들 수는 있겠지만 대부분 여러 개의 함수를 사용해서 기능을 구현하곤 하는데요, 예를 들어 함수 A, B, C가 있다고 가정하고 함수 A의 실행 결괏값을 다른 함수에서도 사용할 수 있게 하려면 '전역 변수'로 지정해야 하고, 함수 A 안에서만 사용하는 변수라면 '지역 변수'로 지정해서 사용하면 됩니다. 글보다는 코드로 직접 보며 이해하는 게 빠르겠죠? 지역 변수부터 이해하고 가보도록 할게요. 바로 코드를 볼까요? var number = 1; // 전역 변수 areaTest(); console.log(number); function areaTest() {..

안녕하세요 여러분! 에이블디 입니다! 이번 시간에는 return문에 대해 알아볼 거예요! 이전 시간에 예제로 만들었던 sumNumber() 함수는 함수 안에서 계산 결괏값을 출력했는데요, 함수 안에서 결괏값을 출력해서 사용할 수도 있지만, 함수의 결괏값을 다른 곳에 적용해야 할 경우도 있습니다. 이렇게 함수를 호출하여 실행한 후 그 결괏값을 함수 밖으로 넘겨 사용하는 것을 '값을 리턴(return)한다' 또는 '값을 반환한다'라고 합니다. 값을 반환하는 위치는 함수를 호출한 위치에서 반환을 하는데요, 함수 결괏값을 반환할 때는 return 다음에 넘겨줄 값이나 변수 또는 식을 지정하면 됩니다! 이전 시간에 사용한 코드를 조금 변환해서 예제를 작성해 볼게요! var number1 = 1; var numbe..

안녕하세요 여러분! 에이블디 입니다! 이번 시간에는 매개변수와 인수에 대해 알아보려고 해요! 지난 시간에 함수에 대해 배워보면서 함수는 자주 사용하는 기능에 필요한 여러 가지 코드를 하나의 함수에 넣어서 만들어 사용한다는 것 기억하시나요? 그런데 지난 시간에 예제 코드에서는 함수를 호출할 때마다 '1 + 1'의 고정된 수식을 가지고 실행했기 때문에 '2'라는 고정값밖에 출력을 할 수 없었는데요, 이번 시간에는 함수를 여러 번 재사용할 수 있도록 매개변수와 인수에 대해 배워보는 시간을 가져볼게요! 재사용이 가능한 두 수를 더하는 함수를 선언하기 위해서는 더해줄 값 두 개가 필요하겠죠? 그래서 값 두개가 필요하다고 미리 지정을 해 두어야 하는데요, 이렇게 함수를 실행하기 위해 필요하다고 지정하는 값을 매개변..

안녕하세요 여러분! 에이블디 입니다! 이번 시간에는 함수(function)에 대해 알아볼 거예요! 함수는 자주 실행해야 하는 기능에 필요한 여러 가지 코드를 사용자가 직접 하나의 함수에 넣어서 만들어 사용하는 것인데요, 함수에 별도의 이름을 붙여 개발자가 필요할 때마다 해당 함수를 실행할 수 있습니다. 그리고 함수는 개발자가 직접 만들어 사용할 수도 있지만 자바스크립트에서 미리 만들어져 개발자들이 가져다 사용할 수 있는 내장 함수도 있습니다. 그럼 간단한 함수를 직접 만들어 사용해 볼까요? 숫자를 더해주는 기능을 가진 함수를 만들어 보도록 하겠습니다! 함수를 작성할 때는 function을 사용하고, 중괄호({}) 안에 함수에서 실행할 여러 코드를 작성해주면 됩니다! 숫자를 더해주는 기능을 하진 함수니까 ..

안녕하세요 여러분! 에이블디 입니다! 이번 시간에는 반복문을 중단하거나 특정 지점에서 반복문의 시작 지점으로 되돌아가는 방법에 대해 알아볼 거예요! 먼저 반복문을 중단하고 싶을 때에는 break문을 사용해 주시면 됩니다! for문으로 간단하게 1부터 10까지 출력하는 코드를 짜 볼 텐데요! 여기에 break문을 사용해 보겠습니다! for(var i = 1; i

안녕하세요 에이블디 입니다! 이번 시간에는 지난 시간에 이어서 다른 반복문을 배워보도록 하겠습니다! 지난 시간에 배운 for문은 카운터 변수를 기준으로 조건에 따라 반복했던 것 기억나시나요? 이러한 특징 때문에 for문은 횟수가 정해져 있는 반복을 할 때 편리합니다. 반면에 특정 조건을 만족하는 동안에만 반복을 하는 반복문이 있는데요, 바로 while문과 do - while문입니다! while문은 소괄호 안의 조건이 만족할 때 중괄호 안의 명령을 반복 실행합니다. 예제를 보면서 알아볼까요? 지난 시간과 동일하게 1부터 10까지 출력하는 프로그램을 만들어 보도록 하겠습니다! var number = 1; while(number

안녕하세요! 에이블디입니다! 이번 시간에는 반복문에 대해서 배워보려 해요! 여러분! 콘솔 창에 1 - 10까지 출력을 해야 한다고 가정해 볼게요. 그럼 아래와 같은 코드를 써야 하겠죠? console.log(1); console.log(2); console.log(3); console.log(4); console.log(5); console.log(6); console.log(7); console.log(8); console.log(9); console.log(10); 실제로 출력된 모습도 보도록 할게요. 1부터 10까지 콘솔에 출력된 걸 확인할 수 있습니다! 그럼 1 - 100까지를 출력해야 한다면 어떨까요? console.log()를 100개를 작성해야겠죠? 1-100만은요? 역시 console.lo..