Scope

scope는 직역하면 범위, 영역이라는 뜻입니다. javascript 프로그램에서는 변수 또는 매개변수(parameter)의 접근성, 생존기간을 뜻합니다. javascript의 scope는 다음과 같이 3가지로 분류 됩니다.

  • global - 전역, 코드의 전범위에서 사용 가능하다.
  • function - 특정 함수 내부에서만 사용 가능하다.
  • block - 괄호({}) 안에서만 사용 가능하다. (var의 경우 의도치 않게 작용할 수 있으니 const나 let 사용을 권장)

코드로 파악해보겠습니다.

const scope = 'hello';

function myFunction() {
    console.log('myFunction: ' + scope);
    if (true) {
        const scope = 'haha';
        console.log('block scope: ' + scope);
    }
}

function otherFunction() {
    const scope = 'bye!';
    console.log('otherFunction: ' + scope);
}

myFunction();
otherFunction();

console.log('global scope: ' + scope);

아래와 같은 출력값이 나옵니다.

myFunction: hello
block scope: haha
otherFunction: bye!
global scope: hello

Hoisting

호이스팅이란 자바스크립트가 실행되기 전에 필요한 값들을 모아 유효 범위 최상단에 선언하는 것을 말한다. 호이스팅의 경우 유지보수의 어려움이 있기 때문에 가급적 지양하는 것을 권하고 있다.

  • 함수 뿐만 아니라 아니라 변수도 호이스팅 된다.
  • var 대신 const나 let을 이용해서 호이스팅을 방지하자
  • 함수의 경우 선언 후 사용하는 습관을 길들이자.
  • ESLint등 분석 도구 등을 이용하면 에디터 상에서 호이스팅을 확인할 수 있다.

아래 코드를 보며 호이스팅 상황을 확인해 봅니다.

myFunction();

function myFunction() {
    console.log(1);
}

console.log(number);
var number = 2;

위 코드는 호이스팅이 일어나는 경우입니다. 다음과 같이 바꾸어 사용합니다.

function myFunction() {
    console.log(1);
}

myFunction();

const number = 2;
console.log(number);

 

블로그 이미지

사용자 yhmane

댓글을 달아 주세요

spread

ES6에 spread와 rest라는 문법이 도입 되었습니다.
spread는 펼치다 또는 퍼뜨리다라는 의미를 가집니다. 객체 혹은 배열에 사용되고 값들을 펼쳐줍니다.

  • spread 미사용
const student = {
    name: '학생1'
}

const smartStudent = {
    name: '학생1',
    attribute: '똑똑한'
}

const tallSmartStudent = {
    name: '학생1',
    attribute: '똑똑한',
    height: 185
}

console.log(student);          // { name: '학생1' }
console.log(smartStudent);     // { name: '학생1', attribute: '똑똑한' }
console.log(tallSmartStudent); // { name: '학생1', attribute: '똑똑한', height: 185 }
  • spread 사용
const student = {
    name: '학생1'
}

const smartStudent = {
    ...student,
    attribute: '똑똑한'
}

const tallSmartStudent = {
    ...smartStudent,
    height: 185
}

console.log(student);          // { name: '학생1' }
console.log(smartStudent);     // { name: '학생1', attribute: '똑똑한' }
console.log(tallSmartStudent); // { name: '학생1', attribute: '똑똑한', height: 185 }

rest

spread와 반대의 개념이라고 생각하면 됩니다. 퍼져있는 것을 다시 모아오는 역할을 합니다.
rest는 객체, 배열, 그리고 함수의 파라미터에서 사용이 가능합니다

  • 객체에 적용
const tallSmartStudent = {
    name: '학생1',
    attribute: '똑똑한',
    height: 185
}

const { height, ...attributes } = tallSmartStudent;
console.log(height);     // 185
console.log(attributes); // { name: '학생1', attribute: '똑똑한' }
  • 배열 적용
const numbers = [1, 2, 3, 4, 5];
const [one, two, ...rest] = numbers
console.log(one);  // 1
console.log(two);  // 2
console.log(rest); // [3, 4, 5]
  • 함수에 적용
function sum(a, b, c, d, e, f, g) {
    return a + b + c + d + e + f + g;
}
console.log(sum(1, 2, 3, 4, 5, 6, 7)); // 28

function sumRest(...rest) {
    return rest.reduce((acc, current) => acc + current, 0);
}
console.log(sumRest(1, 2, 3, 4, 5, 6, 7)); // 28
블로그 이미지

사용자 yhmane

댓글을 달아 주세요

truthy와 falsy

javascript는 다른 언어에 비해 느스한 type check를 가지는 장점이 있습니다. 하지만 적절한 type check를 하지 않는다면 이러한 이점을 잘 활용할 수 없습니다. 아래의 case들을 살펴 조금 더 유용하게 사용할 수 있는 방법을 알아보도록 하겠습니다.


Error Check를 안했을 경우

첫번째 case, undefined에 대한 check가 없기에 오류가 납니다.

function print(student) {
  console.log(student.name);
}

const student = {
  name: '황윤호'
}

print();

두번째 case, null에 대한 check가 없기에 오류가 납니다.

function print(student) {
  console.log(student.name);
}

const student = null;
print(student);

Error check

undefined와 null에 대한 check를 하였지만, 매번 check를 해주기에는 불편한 감이 없지 않아 있습니다.

function print(student) {
  if (student === undefined || student === null) {
    return;
  }
  console.log(student.name);
}

const student = {
  name: '황윤호'
}

print(student);

위 코드는 아래와 같이 변경하여 사용할 수 있습니다.

function print(student) {
  if (!student) {
    return;
  }
  console.log(student.name);
}

const student = {
  name: '황윤호'
}

print(student);

참고

javascript는 다음과 같은 경우에 true 값을 얻을 수 있습니다.

//undefined, false, NaN, null, 0, ''
console.log(!undefined);
console.log(!false);
console.log(!NaN);
console.log(!null);
console.log(!0);
console.log(!'');
블로그 이미지

사용자 yhmane

댓글을 달아 주세요

프로토타입

객체 생성자

객체를 생성하는 함수를 생성자 함수라고 부릅니다. 대문자로 선언한고 new로 할당하여 사용합니다.

function Animal(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
    this.say = function() {
      console.log(this.sound);
    }
}

const dog = new Animal('개', '두부', '멍멍');
const cat = new Animal('고양이', '휴지', '야옹');
dog.say();
cat.say();
  • this.say가 매번 할당 되고 있음

프로토타입

객체 생성자로 만든 함수에 공유할수 있는 값이나 함수를 설정하는 것

// 적용전
function Animal(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
}

function say() {
    console.log(this.sound);
}

dog.say = say;
cat.say = say;
const dog = new Animal('개', '두부', '멍멍');
const cat = new Animal('고양이', '휴지', '야옹');
dog.say();
cat.say();
// 적용후
function Animal(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
}

Animal.prototype.say = function() {
    console.log(this.sound);
}

Animal.prototype.value = 1;
const dog = new Animal('개', '두부', '멍멍');
const cat = new Animal('고양이', '휴지', '야옹');
dog.say();
cat.say();

객체 생성자 상속

call을 이용해 javascript도 상속을 구현할 수 있다

//  상속을 사용하지 않을 경우
function Dog(name, sound) {
    this.type = '개';
    this.name = name;
    this.sound = sound;
}

function Cat(name, sound) {
    this.type = '고양이';
    this.name = name;
    this.sound = sound;
}

Dog.prototype.say = function() {
    console.log(this.sound);
}

Cat.prototype.say = function() {
    console.log(this.sound);
}

const dog = new Dog('두부', '멍멍');
const cat = new Cat('휴지', '야옹');
// 상속을 적용
function Animal(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
}

Animal.prototype.say = function() {
    console.log(this.sound);
}

function Dog(name, sound) {
    Animal.call(this, '개', name, sound);
}

function Cat(name, sound) {
    Animal.call(this, '고양이', name, sound);
}

Dog.prototype = Animal.prototype;
Cat.prototype = Animal.prototype;

const dog = new Animal('개', '두부', '멍멍');
const cat = new Animal('고양이', '휴지', '야옹');
dog.say();
cat.say();

클래스

ES6에서 클래스 문법이 도입 되었다. 프로토타입 작업을 조금 더 간략하게 사용할 수 있게 되었다.

class Animall {
    constructor(type, name, sound) {
      this.type = type;
      this.name = name;
      this.sound = sound;
    }
    say(){
        console.log(this.sound);
    }
}

const dog = new Animal('개', '두부', '멍멍');
const dog = new Animal('고양이', '휴지', '야옹');

dog.say();
cat.say();

클래스 상속

객체 생성자와 마친가지로 클래스 상속이 가능

class Animall {
    constructor(type, name, sound) {
      this.type = type;
      this.name = name;
      this.sound = sound;
    }
    say(){
        console.log(this.sound);
    }
}

class Dog extends Animal {
    constructor(name, sound) {
      super('개', name, sound);
    }
}

class Cat extends Animal {
    constructor(name, sound) {
      super('고양이', name, sound);
    }
}

const dog = new Dog('두부', '멍멍');
const dog = new Cat('휴지', '야옹');

dog.say();
cat.say();
블로그 이미지

사용자 yhmane

댓글을 달아 주세요

배열 내장함수

forEach

  • 배열의 요소들을 반복적으로 사용할 경우
  • 일반적인 for문
    const avengers = ['아이언맨', '캡틴아메리카', '헐크', '토르'];
    for (let i = 0; i < avengers.length; i++) {
      console.log(avengers[i]);
    }
  • 과정1 함수를 이용해서 축약
    const avengers = ['아이언맨', '캡틴아메리카', '헐크', '토르'];
    function print(hero) {
      console.log(hero);
    }
    avengers.forEach(print);
  • 과정2 내부에 파라미터를 함수로 사용
    const avengers = ['아이언맨', '캡틴아메리카', '헐크', '토르'];
    avengers.forEach(function(hero) {
      console.log(hero);
    });
  • 과정3 화살표 함수
    const avengers = ['아이언맨', '캡틴아메리카', '헐크', '토르'];
    avengers.forEach(hero => {
      console.log(hero);
    });

map

  • 배열안의 원소를 모두 변환시키고자 할때 사용
  • map 을 사용하지 않았을 때
    const arr = [1, 2, 3, 4, 5];
    const squared = [];
    array.push(n => {
    squared.push(n* n);
    });
  • 과정1
    const arr = [1, 2, 3, 4, 5];
    const square = n => n * n;
    const squared = arr.map(square);
  • 과정2
    const arr = [1, 2, 3, 4, 5];
    const squared = arr.map(n => n * n);

filter

  • 특정 조건을 만족하는 원소를 찾아 새로운 배열을 만들때 사용
    const todos = [
        {
          id: 1,
          text: 'javascript',
          done: true,
        },
        {
          id: 2,
          text: 'react',
          done: true,
        },  
      {
          id: 3,
          text: 'typescript',
          done: false,
    },
    ]
    const taskDone = todos.filter(todo => todo.done);

splice, slice

  • 특정 항목을 제거할 때 사용
  • splice
    const numbers = [10, 20, 30, 40];
    const index = numbers.indexOf(30);
    const spliced = numbers.splice(index, 1);
    console.log(spliced) // [30]
    console.log(numbers) // [10, 20, 40]
  • slice
    const numbers = [10, 20, 30, 40];
    const sliced = numbers.slice(0, 20);
    console.log(spliced) // [10, 20]
    console.log(numbers) // [10, 20, 30, 40]

reduce

  • 배열의 값들을 사용하여 연산을 할때 사용
  • 기존 방법
    const numbers = [10, 20, 30, 40];
    let sum = 0;
    numbers.forEach(n => {
    sum += n;
    });
    console.log(sum) // 100
  • reduce 사용
    const numbers = [10, 20, 30, 40];
    const sum = numbers.reduce((accumulator, cuurent) => accumulator + current, 0);
    console.log(sum) // 100
블로그 이미지

사용자 yhmane

댓글을 달아 주세요

배열

배열은 인덱스를 가지는 복수의 자료를 저장할 수 있는 자료구조 입니다. 저장된 데이터에는 인덱스를 이용하여 접근이 가능하며, 데이터의 중복을 허용합니다.

배열의 선언

  • 대괄호로 선언하여 줍니다 []
  • 또는 new Array()로 선언하여 줍니다.
    const array = [1, 2, 3, 4, 5]
    console.log(array)

배열의 접근

  • 배열은 서로 다른 자료형도 저장이 가능합니다.
  • 배열의 인덱스는 0부터 시작합니다.
    const array = [1, 2, 'a', {}, 4]
    console.log(array[0])

배열의 추가, 삭제, 길이

  • push를 이용하여 새로운 항목을 추가하여 줍니다
  • length를 이용하여 배열의 크기를 계산합니다
  • pop을 이용하여 배열의 마지막 요소를 삭제하여 줍니다.
    const array = [1, 2, 3]
    console.log(array[3]) // undefined
    array.push(4)
    console.log(array[3]) // 4
    console.log(array.length) // 4
    array.pop() // 4가 삭제됨
블로그 이미지

사용자 yhmane

댓글을 달아 주세요

객체

'어떠한 이름을 선언하였을 때, 하나의 이름에 여러개의 값을 넣어줄 수 있는것'입니다

  • 객체는 여러개의 속성들로 이루어져 있고, 속성은 key(이름)과 value(값)으로 구성됩니다.
const yunho = {
  name: '황윤호',
  age: '20',
  grade: 'A'
}

console.log(yunho)
console.log(yunho.name)
console.log(yunho.age)

비구조화 할당

'구조분해'라고도 하며 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식입니다.

  • 사용법
const yunho = {
    name: '황윤호',
    age: '20',
    grade: 'A'
}

function printInfo(student) {  
    const { name, age, grade } = student;  
    const str = `${name}는 ${age}이며 ${grade} 성적을 받았습니다`;  
    console.log(str)  
}

function printInfo2({ name, age, grade }) {  
    const str = `${name}는 ${age}이며 ${grade} 성적을 받았습니다`;  
    console.log(str)  
}

printInfo(yunho)  
printInfo2(yunho)


함수 선언

객체안에 속성값 뿐만 아니라 함수도 선언하여 사용할 수 있습니다.

const yunho = {
  name: '황윤호',
  age: '20',
  grade: 'A',
  hello: function() {
    console.log(this.name + '입니다')
  },
  hi() {
    console.log(this.name + '입니다')
  }
}
yunho.hello()
yunho.hi()

getter, setter

javascript도 java와 마찬가지로 getter, setter를 구현할 수 있습니다

  • getter는 get, setter는 set을 명시하여줍니다.
const yunho = {
  _name: '황윤호',
  age: '20',
  grade: 'A',
  get info() {
    console.log(this._name);
    return this._name
  },
  set name(value) {
    this._name = value;
  }
}
블로그 이미지

사용자 yhmane

댓글을 달아 주세요

function

특정 코드를 하나의 명령으로 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록'{}'을 의미합니다.

  • function 키워드로 시작되며 다음과 같은 구성요소를 가집니다.
    • 함수의 이름
    • 괄호() 안에 쉼표로 구분되는 매개변수(parameter)
    • 중괄호{}로 둘러싸인 자바스크립트 실행문

함수 사용해보기

  • 함수 선언

    function add(a, b) {
      return a + b
    }
  • 함수 사용

    const sum = add(1, 2)
    console.log(sum)

Template Literal

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였습니다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용합니다. 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공합니다. 이를 문자열 인터폴레이션(String Interpolation)이라 합니다. 문자열 인터폴레이션은 ${}으로 표현식을 감싸 사용합니다.

  • Template Literal 적용전

    function printStr(str) {
        console.log('String is ' + str + ' !')
    }
  • Template Literal 적용

    function printStr(str) {
        console.log(`String is ${str} !`)
    }

화살표 함수

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있습니다.

  • 매개변수 지정

      () => { } // 매개변수가 없을 경우
       x => { } // 매개변수가 한 개인 경우, 소괄호를 생략 가능
    (x, y) => { } // 매개변수가 여러 개인 경우, 소괄호를 생략 불가
  • 함수 body 지정

    x => { return x * x }  // single line block
    x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 값이 return 
    () => { return { a: 1 }}  
    () => ({ a: 1 }) // 위 표현과 동일합니다. 객체 반환시 소괄호를 사용합니다.

사용 예제

const add = (a, b) => {
    return a + b
}

const sum = add(1, 2)
console.log(add)
const printStr = str => {
    console.log(`String is ${str} !`)
}

printStr('hello')
블로그 이미지

사용자 yhmane

댓글을 달아 주세요

연산자

대입연산자

  • =
  • 해당 값을 변수에 대응
let num = 1

 


산술연산자

  • +, -, *, /, %
  • 사칙연산
let num = 1 + 2
let num1 = 1 - 2
let num2 = 2 \* 3
let num3 = 4 / 2
let num4 = 4 % 2

 


증감연산자 ++. --

  • ++, --
  • 변수가 앞에 오냐 뒤에 오냐에 따라 전위, 후위로 나뉜다
let num = 1
console.llog(num++) 
// 1이 출력됨
console.log(num) 
// 2이 출력됨
console.log(++num) 
// 3이 출력됨

 


논리연산자

  • !(not), &&(and), ||(or)
  • true, false 값을 처리하기 위한 연산자
const a = true
console.log(!a) 
// false
const b = true && false
console.log(b) 
// false
const c = true && true
console.log(c) 
// true
const d = true || false
console.log(d) 
// true

 


비교 연산자

  • ==, ===, >=. > 등
  • 좌항과 우항의 피연산자를 비교하여 불리언 값을 반환한다
  • == 의 경우 타입체크를 하지 않기 때문에 ===로 동등 비교를 하는 것이 좋다.
const a = 1
const b = 1
const equals = a === b
console.log(equals)
// true
블로그 이미지

사용자 yhmane

댓글을 달아 주세요

변수 let

바뀔수 있는 값

let num = 1;
console.log(num);
num = 2;
console.log(num);

 

주의사항

let num = 3; 
  • Identifier 'num' has already been declared 똑같은 이름으로 또 다시 선언할 수 없다.

상수 conset

한번 설정하면 바꿀수 없는 값

const a = 1;

 

주의사항

const a = 1;
a = 2; 
  • "a" is read-only
const a = 1;
const a = 2;
  • Identifier 'a' has already been declared 똑같은 이름으로 또 다시 선언할 수 없다.

이전 변수 방법

선호되지 않는 이전 선언 방법

var a = 1; 

문자열 선언 방법

let str1 = 'java script';
let str2 = "java script"
  • '', "" 나 상관 없음
  • ; 또 없어도 됨

진위 선언방법

let opt1 = true
let opt2 = false

그 이외

let nothing = null  
let something = undefined
  • null은 없다는 뜻
  • undefined는 아직 정해진 것이 없다는 뜻
블로그 이미지

사용자 yhmane

댓글을 달아 주세요