본문 바로가기

JavaScript

(28)
변수 자바스크립트의 모든 값은 데이터 타입을 갖는다. 자바스크립트는 7가지 데이터 타입을 제공한다. 원시타입(primitive data type) number string boolean null undefined symbol(New in ECMAScript 6) 객체타입(Object data type) object 자바스크립트는 C나 Java와는 다르게 변수를 선언할 때 데이터 타입을 미리 지정하지 않는다. 다시 말해, 변수에 할당된 값의 타입에 의해 동적으로 변수의 타입이 결정된다. 이를 동적 타이핑이라하며 자바스크립트가 다른 프로그래밍 언어와 구별되는 특징 중 하나이다.
scope의 이해 이번에는 자바스크립트의 Scope에 대해서 알아봅시다. Scope란, 우리가 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위를 의미합니다. Scope는 총 3가지 종류가 있습니다. 1.Global(전역) Scope:코드의 모든 범위에서 사용이 가능합니다. 2.Function(함수) Scope:함수 안에서만 사용이 가능합니다. 3.Block(블록) Scope: if, for, switch등 특정 블록 내부에서만 사용이 가능합니다. 예시를 통한 Scope 이해 한번 예시 코드를 보고 Scope를 이해해봅시다. const value = 'hello'; function myFunction() { console.log('myFunction: '); console.log(value); } fu..
spread와 rest 이번에는 ES6에서 도입된 sparead 와 rest 문법에 대해서 알아보겠습니다. 서로 완전히 다른 문법이면서, 은근히 비슷한 구석이 있습니다. spread 일단 spread 문법부터 알아봅시다. spread라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다 입니다. 이 문법을 사용하면, 객체 혹은 배열을 펼칠 수 있습니다. const slime = { name : '슬라임' }; const cuteSlime = { name : '슬라임', attribute: 'cute', }; const purpleCuteSlime = { name : '슬라임', attribute: 'cute', color: 'purple' }; console.log(slime); console.log(cuteSlime); conso..
비구조화 할당(구조분해)문법 이번에는 전에 배웠던 비구조화 할당(구조분해) 문법을 더 잘 활용하는 방법에 대해서 알아보겠습니다. 먼저 복습 해보자면, 비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해 줄 수 있었습니다. const object ={a: 1, b: 2}; const { a, b} = object; console.log(a); //1 console.log(b); //2 그리고, 함수의 파라미터에서도 비구조화 할당을 할 수 있는 것도 배웠습니다. const object = { a:1, b:2}; function print({a,b}) { console.log(a); console.log(b); } print(object); 그런데 여기서 만약 b값이 주어지지 않았다고 ..
조건문 더 스마트하게 쓰기 이번에는 조건문을 조금 더 스마트하게 쓰는 방법에 대해서 알아보겠습니다. 특정 값이 여러 값 중 하나인지 확인해야 할 때 만약, 여러분이 특정 값이 여러 값 중 하나인지 확인을 해야 하는 상황이 생겼다고 해봅시다. 그러면 이러한 시도를 할 수도 있을 것입니다. function isAnimal(text) { return ( text === '고양이' || text === '개' || text === '거북이' || text === '너구리' ); } console.log(isAnimal('개')); //true console.log(isAnimal('노트북')); //false 비교해야 할 값이 많아질수록 코드는 길어집니다. 이러한 코드를 간단하게 해결 할 수 있는 방법은, 배열을 만들고 배열의 inclu..
함수의 기본 파라미터 이번에는 함수의 기본 파라미터를 설정하는 방법에 대해서 알아보겠습니다. 한번, 우리가 원의 넓이를 구하는 함수를 만들어보겠습니다. function calculateCircleArea(r) { return Math.PI * r * r; } const area = calculateCircleArea(4); console.log(area); //50.26548245743669 ㅇ여기서 Math.PI는 원주율 파이(ㅠ)값을 가르킵니다. 만약 우리가 이 함수에 r값을 넣어주지 않으면 어떤 결과가 나타날까요? function calculateCircleArea(r) { return Math.PI * r * r; } const area = calculateCircleArea(); console.log(area); /..
단축 평가 (short-circuit evaluation) 논리 계산법 이번에도 논리 연산자를 조금 더 유용하게 사용하는 방법에 대해서 배워보겠습니다. 우리가 이전에 연산자를 배울 때, 다음과 사항을 잘 숙지하셨을겁니다. true && true //true ture && false //false true || false //true false || true //true 논리 연산자를 사용 할 때에는 무조건 우리가 true 혹은 false 값을 사용해야 되는 것은 아닙니다. 문자열이나 숫자, 객체를 사용 할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라집니다. 예를 들어서 다음과 같은 코드가 있다고 가정해보겠습니다. const dog = { name : '멍멍이' }; function getName(animal) { return animal.na..
Truthy and Falsy 이것은 자바스크립트 문법까지는 아니지만, 알아둬야 하는 개념입니다. Truthy : true 같은거... Falsy : false 같은거...라고 이해를 하면 되는데요, 예를 들어서 다음과 같은 함수가 있다고 합시다. function print(person) { console.log(person.name); } const person = { name : 'John' }; print(person); 만약에 이러한 상황에서, print 함수가 다음과 같이 파라미터가 비어진 채로 실행됐다고 가정해봅시다. function print(person) { console.log(person.name); } const person = { name : 'John' }; print(); 이 코드는 다음과 같은 에러를 생성 ..