Record Of Programmer

a태그에 href속성을 줘서 페이지 이동으로 화면을 넘어가게 하면 별도의 화면이 나옵니다. 하지만 본인은 다음과 같이 단순 a태그에 onclik속성으로 alert만 띄워주는 기능을 사용하고 있었습니다. href속성이 다음처럼 비어있으면, 웹페이지가 새로고침이 됩니다. href속성에 javascript:return false; 를 입력하면 불필요한 새로고침을 방지할 수 있습니다.

1. Scope 란? 우리가 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위를 의미합니다. Scope 는 총 3가지 종류가 있습니다. Global (전역) Scope: 코드의 모든 범위에서 사용가능. Function (함수) Scope: 함수 안에서만 사용가능. Block (블록) Scope: if, for, switch 등 특정 블록 내부에서만 사용가능. const value = 'hello!'; function myFunction() { console.log('myFunction: '); console.log(value); } function otherFunction() { console.log('otherFunction: '); const value = 'bye!'; conso..

이번에는 ES6 에서 도입된 spread 와 rest 문법에 대해서 알아보겠습니다. 서로 완전히 다른 문법인데, 은근히 헷갈립니다. 1. spread spread 라는 단어가 가지고 있는 의미는 '펼치다', '퍼뜨리다' 입니다. 이 문법을 사용하면, 객체 혹은 배열을 펼칠수있습니다. const slime = { name: '슬라임' }; const cuteSlime = { name: '슬라임', attribute: 'cute' }; const purpleCuteSlime = { name: '슬라임', attribute: 'cute', color: 'purple' }; console.log(slime); console.log(cuteSlime); console.log(purpleCuteSlime); 이 코..

비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언할 수 있습니다. 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 값이 주어지지 않았다고 가정해보겠습니다. const object = { a: 1 }; function print({ a, b }) { con..

1. 특정 값이 여러 값중 하나인지 확인해야 할 때 만약 특정 값이 여러 값 중 하나인지 확인을 해야 하는 상황이 생겼다면 이러한 시도를 해볼 수 있습니다. function isAnimal(text) { return ( text === '고양이' || text === '개' || text === '거북이' || text === '너구리' ); } console.log(isAnimal('개')); // true console.log(isAnimal('노트북')); // false 비교값이 많아질 수록 코드가 길어집니다. 이문제의 해결방법은, 배열을 만들고 배열의 includes 함수를 사용하는 것입니다. function isAnimal(name) { const animals = ['고양이', '개', '거..

함수의 기본 파라미터를 설정하는 방법에 대해서 알아보겠습니다. 여기 원의 넓이를 구하는 함수가 있습니다. 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); // NaN 결과는 NaN 이..

논리 연산자를 조금 더 유용하게 사용하는 방법에 대해서 배워보겠습니다. true && true // true true && false // false true || false // true false || true // true 논리 연산자를 사용 할 때에는 무조건 우리가 true 혹은 false 값을 사용해야 되는 것은 아닙니다. 문자열이나 숫자, 객체를 사용 할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라집니다. 예를 들어서, const dog = { name: '멍멍이' }; function getName(animal) { return animal.name; } const name = getName(dog); console.log(name); // 멍멍이 그런데 만약..

이것은 자바스크립트 문법까지는 아니지만, 알아둬야 하는 개념입니다. 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(); 이 코드는 다음과 같은 에러를 뱉습니다. TypeError: Cannot read property 'name' of undefined 만약에 print 함수에서 object 가 주어..

forEach : 각원소들을 반복적으로 호출할 수 있는 함수 const superheros = ['아이언맨', '캡틴아메리카', '토르', '닥터스트레인지']; superheros.forEach(hero => { console.log(hero); }); map: 각원소들을 다른 형태로 변환해야할 때 사용하는 함수 const array = [1, 2, 3, 4, 5, 6, 7, 8]; const square = n => n * n; const squared = array.map(square); console.log(squared); indexOf: 특정 원소가 어디있는지 알아내는 함수 const superheros = ['아이언맨', '캡틴아메리카', '토르', '닥터스트레인지']; const index ..