에이블디 공식 블로그

안녕하세요 여러분! 에이블디입니다! 이번 시간에는 자바스크립트 #2번째 게시글에서 다루었던 객체에 대해 좀 더 자세히 알아보려고 합니다! https://abled.tistory.com/m/47 #2 자바스크립트(JavaScript) - 자료형(Data type) : 복합형(배열, 객체) 안녕하세요 여러분! 에이블디입니다! 오늘은 지난 시간에 이어 복합 자료형에 대해 알아보겠습니다! 복합형에는 배열과 객체가 있는데요! 하나하나씩 알아보도록 하겠습니다! 배열은 하나의 변 abled.tistory.com 이 게시글 기억나시나요? ㅎㅎ 기억나지 않으신다면 한번 보고 오시는 것도 좋을 것 같습니다! 위 게시글에서 배열과 객체를 복합형이라고 소개해 드렸었는데요, 객체를 복합형이라고 한 이유는 객체 안에 숫자, 문자..

안녕하세요 여러분! 에이블디입니다! 이번 시간에는 지난 시간에 이어 let과 const에 대해 알아보도록 하겠습니다. var는 사실 지난 시간에 어느 정도 설명을 다 했다고 생각하기 때문에 이번 시간에서는 간단하게 var의 특징에 대해서 간단하게 짚고 바로 let과 const에 대해 알아보도록 할게요! 지난 시간에 보았던 var의 특징은 크게 세 가지로 정리할 수 있습니다. 1. 변수 중복 선언이 가능하며 그로 인해 예기치 못한 값을 반환할 수 있다. 2. 함수 레벨 스코프로 인해 함수 외에 다른 곳에서 선언한 변수는 모두 전역 변수로 취급된다. 3. 변수 선언부 이전에 변수를 호출하면 언제나 undefined를 반환한다. 저런 특징들 때문에 ES6부터 let과 const가 나왔다고 지난 시간에 글을 마..

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

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

안녕하세요 여러분! 에이블디 입니다! 이번 시간에는 화살표 함수에 대해 알아볼 거예요! ES6 버전부터는 화살표(=>)를 사용하여 함수 선언을 간단하게 작성할 수 있게 되었는데요, 이 방법은 익명 함수를 변수에 지정할 때 많이 사용합니다. function은 사용하지 않고, 매개변수를 지정하지 않을 때는 소괄호()만 작성하고요, 함수를 선언할 때 매개변수가 하나만 필요할 때는 소괄호 없이 매개 변수만 작성해 주시면 됩니다. 매개변수가 두 개 이상일 경우에는 기존 매개변수의 표기법과 같이 소괄호 안에 매개변수를 넣어 주시면 됩니다. 코드를 통해 기존 함수의 선언방식과 화살표 함수의 선언 방식에 대해 알아볼게요! 먼저 기존의 함수 선언 방식입니다. var introduce = function() { conso..

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

안녕하세요 여러분! 에이블디 입니다! 이번 시간에는 익명 함수에 대해서 알아볼게요! 익명 함수는 말 그대로 이름이 없는 함수입니다. 또한 익명 함수는 함수 자체가 '식(Expression)'이기 때문에 변수에 할당하거나 다른 함수의 매개변수로 사용이 가능합니다. 바로 소스를 통해 알아볼까요? 이번에도 두 정수를 더하는 함수를 만들어 볼 텐데 이걸 익명 함수로 작성해 볼게요! var sum = function(a, b) { return a + b; } 위의 코드는 매개 변수 a와 b를 받아 두 변수의 값을 더하는 함수를 선언하여 변수 sum에 할당하는 코드인데요, 보시다 피시 함수에 이름이 없는 익명 함수임을 확인할 수 있습니다. 그럼 이 익명 함수를 실행시켜봐야겠죠? 지난 시간에는 함수를 선언하고 선언한..

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

안녕하세요 여러분! 에이블디 입니다. 이번 시간에는 매개변수에 기본값을 지정하는 방법에 대해 배워볼게요! ES6부터 매개변수가 있는 함수를 선언할 때 매개변수의 기본 값을 지정하는 기능이 생겼는데요, 어떤 느낌인지 예제 코드를 보며 같이 이해해 보도록 할게요! 지난 시간부터 계속해서 써왔던 두 수를 합하는 sumNumber() 함수를 조금 변형해 보겠습니다! function sumNumber(a, b = 1){ var sum = a + b; console.log(sum); } sumNumber(1); sumNumber() 함수를 선언할 때 매개변수 b에 1이란 값을 주고 sumNumber() 함수를 호출할 때 인수를 하나만 주었는데요! 결과가 어떻게 출력되는지 확인해 볼까요? 매개변수 b에는 1이란 값이..

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