본문 바로가기

Javascript/Javascript초급

반복문 기초2 - while

0 2020. 5. 28. while 반복문은 조건 체크를 먼저하는 while 과 조건 체크를 나중에 하는 do ~ while 2가지로 나뉩니다.do ~ while 반복문은 조건 체크가 나중에 있는 만큼 무조건 1번은 반복 실행문이 실행되는 차이가 있습니다. 기본적으로는 while 문을 사용하며, 무조건 1번은 실행하는 조건이 있는 반복 처리시 do ~ while 문을 선택적으로 사용합니다. 두 반복문의 구조는 다음과 같습니다. while(참/거짓 조건식){ //반복 실행문} do{ //반복 실행문}while(참/거짓 조건식) 두 반복문으로 배열을 순환해서 콘솔에 요소를 출력하는 예를 들어보겠습니다. let friends = [ {name: '라이언', age: 5}, {name: '어피치', age: 4}, {name: '콘',..

반복문 기초1 - for

0 2020. 5. 28. 특정 실행문을 지정된 횟수만큼 여러번 반복해야 할 때 사용하는 구문중 하나입니다.루프(Loop), 순환문이라고도 합니다. for문은 조건에 충족하는 지정 횟수만큼 반복 실행하는 횟수가 정해진 반복문입니다. for문은 반복 횟수를 기준으로 반복 처리를 하는 for 문과, 여러개의 요소를 가지는 배열, 객체 등의 전체 갯수를 기준으로 전체를 반복 순환하는 for ~ in, for ~ of, forEach 문 2가지 종류가 있습니다 for 문 for 문의 기본 구조는 다음과 같습니다. for(시작값; 조건문; 간격조건) { //실행 구문} 괄호안의 조건 규칙을 만족하는 동안 루프를 돌게 됩니다.규칙은 세미콜론으로 구분해 시작값, 조건문, 간격조건 3개가 오게됩니다.for 루프문의 의미는 "시작값에서 시작해 조..

조건문 기초 - if, switch

0 2020. 5. 28. 2개의 값을 비교해 비교 기준에 부합하는지를 확인하거나, 값이 참인지 거짓인지에 따라 실행하는 구문이 달라지는 것을 조건문이라고 합니다.조건문은 결과가 참인 경우에만 원하는 구문이 실행되거나, 또는 참과 거짓 각각에 대해 구문이 실행되는 경우로 나누어집니다.여러개의 조건이 있는 경우에는 조건문을 중첩해 여러개의 조건을 세세하게 나눌 수 있습니다. 자바스크립트의 조건문은 if 문과 switch 문 2가지가 있습니다. if 문 if 문은 조건 체크 결과가 참인지 거짓인지에 따라 2개의 실행 구문중 하나를 실행하는 형태입니다.실행 구문의 문장이 1개인 경우 중괄호를 생략할 수 있습니다. if (조건절) //참 실행구문 if (조건절) { //참 실행구문} if (조건절) { //참 실행구문} else { //..

모듈(Module)의 이해

0 2020. 5. 27. 모듈은 특정 기능을 하는 하나의 코드 묶음 단위입니다.모듈이 모여 하나의 큰 프로그램이 되며, 모듈은 또 다른 모듈의 일부로써 기능을 할 수 있습니다. 모듈의 핵심은 캡슐화 입니다.모듈 안의 모든 기능들은 모듈 안에서 동작하며, 모듈 밖에서는 접근이 허용된 속성이나 메서드만 사용할 수 있도록 허용됩니다. ES5 까지는 모듈에 대한 지원이 되지 않았기 때문에, 모듈 비슷한 구조를 즉시 실행 함수를 이용해 구현 했습니다. 예를 들면 var module = (function(){ var _str = '모듈변수'; return { myfunc: function(){ return _str; } }})();console.log(module.api()); 이런 방식으로 즉시 실행 함수를 이용해 객체를 반환받아서 모듈..

Get, Set을 이용한 객체 속성의 정의

0 2020. 5. 27. 속성 기술자 정의 어려운 용어를 먼저 알아둘 필요가 있습니다.게터(Getter)/세터(Setter) 라고도 하고, 속성 기술자(Property Descriptor)라고도 합니다. 자바스크립트에서는 속성 기술자라는 용어를 좀 더 많이 사용합니다. 자바스크립트는 객체의 속성을 만들고 관리할 수 있는 표준화된 메서드 틀(구조)을 제공합니다.또, 속성을 만들고 관리할 수 있는 전용의 단일 메서드인 Object.defineProperty() 를 제공합니다.최상위 객체인 Object 객체의 스테틱 메서드이며, 어디서나 접근이 가능합니다. 속성 기술자는 모두 이 메서드를 사용해 정의하고, 속성 기술자를 정의한다고 하면 Object.defineProperty() 메서드를 사용한다고 이해하면 됩니다. 이해를 돕기 위해 ..

클래스의 정적 속성과 정적 메서드의 이해

0 2020. 5. 26. 정적 속성과 정적 메서드는 클래스 인스턴스를 생성하지 않고도 호출할 수 있는 클래스에 정의된 속성과 메서드입니다.인스턴스를 생성하지 않고 바로 호출할 수 있기 때문에 공통으로 사용하는 라이브러리 클래스를 생성해 사용할 때 주로 활용합니다. 정적 속성과 정적 메서드는 앞에 "static" 키워드를 사용해 정의합니다. "static" 키워드로 정의한 속성과 메서드는 객체 인스턴스를 통하지 않고 호출되는 만큼 객체 constructor 메서드로 생성하는 동적 변수와 메서드에는 접근할 수 없습니다. 정적 속성과 메서드는 인스턴스를 생성하지 않고 접근할 수 있지만, 인스턴스를 통해서는 접근할 수 있습니다.인스턴스에서 정적 메서드, 속성에 접근하면 에러가 발생합니다. 정적 메서드와 달리 정적 속성은 get;set;..

클래스 상속(Inherit)의 이해

0 2020. 5. 26. 다른 객체지향 언어의 클래스처럼 자바스크립트의 클래스도 상속을 지원합니다. 클래스의 상속은 앞서 만들어 놓은 클래스의 기능들을 그대로 가져다 쓸 수 있으면서도, 상속받은 클래스의 고유한 기능을 추가할 수 있기 때문에 체계적으로 구조화 된 서비스를 개발하는데 아주 중요한 역할을 합니다. 클래스 상속을이해하려면 몇가지 중요한 키워드를 알아야 합니다. extends - 상속받을 클래스를 지정하는 지시자입니다. class ChildClass extends ParentClass{} 이런 방식으로 부모클래스(ParentClass)를 상속받게 됩니다. super - 부모 클래스의 생성자(constructor()) 를 호출합니다. 자식 클래스의 생성자에서 호출하며, 부모 클래스의 생성자를 호출합니다. 호출하지 않으면 ..

생성자 함수(Constructor Function)의 이해

0 2020. 5. 26. 자바스크립트는 다양한 객체 생성 방법을 제공합니다.최신의 고급 기법인 클래스를 사용하면 되지만, 조금 더 단순하고 심플하게 함수를 클래스처럼 사용할 수 있는 방법도 제공합니다. 자바스크립트에서는 이것을 생성자 함수라고 합니다.클래스와 마찬가지로 생성자 키워드인 new로 인스턴스를 생성할 수 있고, 내부 메서드와 변수를 사용할 수 있습니다.함수라는 특징을 제외하면 클래스의 사용법과 많이 유사합니다. 그렇다고, 클래스처럼 상속을 통해 확장을 할 수 있거나 한 것은 아니므로 어디까지나 용도에 맞게 사용해야 합니다. 함수로 정의하지만 클래스나 객체 리터럴과 유사한 기능을 하는 생성자 함수에 대해 알아보겠습니다.클래스에서 만들었던 견젹가를 계산하는 클래스를 생성자 함수로 구현해봅니다. 1. 함수를 하나 정의합니다..

클래스(Class)의 이해

0 2020. 5. 26. 클래스(Class) 는 ES6부터 자바스크립트에 도입된 기능입니다. 클래스는 새로운 종류의 객체를 만드는 구조를 제공합니다.배열 객체는 배열 데이터를 처리하기 위한 속성과 메서드를 제공하고, 배열 데이터를 내부에 가지고 있습니다. 쇼핑몰을 구현하는 경우라면 장바구니 객체를 이용해 장바구니의 상품 목록을 관리하고, 장바구니의 상품 갯수, 합계를 표시하는 기능을 생각할 수 있습니다.갯수와 합계는 프로퍼티 형태로 제공하고, 장바구니의 상품 추가/삭제/수정 은 메서드로 제공할 수 있습니다. 클래스로 장바구니 객체는 new 키워드로 객체를 실행해 실제 동작하는 객체를 할당해야 합니다.특별히 이렇게 실행되어 변수에 할당된 객체를 인스턴스(Instance)라고 구분을 합니다.의미를 부여한다면 "실행되어 메모리에 존재..

클로저(Closure)의 이해

0 2020. 5. 25. "만들어진 시점의 실행 환경을 기억하는 함수."를 클로저, 또는 클로저 함수라고 합니다.짧게 요약하면 그렇습니다. 클로저 함수를 호출한 함수가 종료되더라도, 호출한 함수의 환경(변수 등)을 클로저 함수가 기억하고 있는 것입니다.함수를 예를 들어 설명하겠습니다.클로저는 아래와 같은 방식으로 익명함수를 반환해서 구현을 하므로 구조를 잘 숙지해두는게 좋습니다. function outerFunc(name){ let saying = name + ' 안녕!'; return function(){ return saying; }} let closure1 = outerFunc('라이언');let closure2 = outerFunc('콘'); console.log(closure1());console.log(closure2..

변수 선언자 var 의 스코프와 스코프 체인

0 2020. 5. 25. 자바스크립트의 변수 선언 방식은 기존 사용하던 var 와 ES6에서 새로 도입된 let 2가지가 있습니다. 새로운 표준이기 때문에 let 사용을 권장하지만, 사용 방식에 따라서는 var가 더 유리한 경우도 있고, 아직 여전히 var를 많이 사용합니다.var는 개념상 단순하고, 함수 안에 정의한 변수의 경우 함수 안에서는 전역으로 사용하기 때문에 함수의 선언에 대해 고민하지 않아도 되는 장점이 있습니다. 습관처럼 사용해왔기 때문에 당연한 듯이 쓰지만 var는 생각보다 복잡한 사용 체계를 가지고 있습니다. 함수 안의 로컬 변수 var는 let과 달리 블록, 구문 단위의 스코프(Scope) 구분이 없습니다.함수 안 어디에서 정의되었든지 자바스크립트의 호이스팅(Hoisting)에 의해 변수 정의는 함수 맨 위로..

객체의 단축 속성명, 단축 메서드명, 계산된 속성명

0 2020. 5. 25. ES6부터 새롭게 지원하는 객체의 새로운 표기법 3가지 있습니다. 객체의 접근 및 제어를 단순화해주는 표기법으로 코드 작성량을 줄이는데 도움이 되는 기능입니다. 다만 웹브라우저 호환성 문제가 있을 수 있기 때문에 주의해야하며, 브라우저간 호환성이 필요한 경우 사용을 피해야 합니다. !주의할 점 이 표기법들은 크롬과 파이어폭스에서만 제대로 지원됩니다. 일부 데스크탑용 브라우저와 대부분의 모바일 브라우저에서는 지원되지 않습니다. 사용의 편의성으로 인해 꼭 사용해야 하는 경우 호환성을 확인한 후 사용해야 합니다. 지원되지 않는 브라우저에서는 자바스크립트 문법 에러로 처리됩니다. 단축 속성명 "키:밸류" 방식의 객체 속성 표시 방법을 대신해 미리 선언한 변수들을 나열함으로써 객체를 생성할 수 있습니다. 미리 생..

이전 1 2 3 다음

닫기

티스토리툴바