FrontEnd (65) 썸네일형 리스트형 #17. 자바스크립트(javascript) - for ... in & for ... of // cloning object # for ... in 과 for ... of 의 차이점을 설명하도록 하겠습니다. # 또한 Object를 cloning 하는 방법에 대해서도 설명하도록 하겠습니다. # Object.assign(dest, [obj1, obj2, obj3...]) # 비전공자가 이해한 Javascript 1) for ... in VS for ... of 1) for ... in key 값을 for문으로 출력합니다. for (key in axce) { console.log(key); } for (key in axce) { console.log(axce[key]); } 2) for ... of array의 value 값을 for문으로 출력합니다. // for (value of iterable) const array = [1, .. #16. 자바스크립트(javascript) - 객체(Object, 오브젝트) # 객체는 자바스크립트의 타입들 중 한 종류입니다. # Object는 연관성 있는 데이터 또는 함수들을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입입니다. # 속성을 추가하거나 삭제하는 방법에 대해 알아보도록 하겠습니다. # 비전공자가 이해한 Javascript Object(오브젝트) - 객체 Object는 자바스크립트의 타입들 중 하나입니다. 자바스크립트에서 거의 모든 객체들은 Object의 인스턴스들입니다. 연관성 있는 데이터 또는 함수들을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입입니다. Object는 key와 value 들의 집합체입니다. object = { key : value, key : value }; 1) 선언 방법 일반적으로 변수를 선언할 때는 하나씩 선언합니다. 이런 방.. #15. 자바스크립트(javascript) - 상속(Inheritance)과 오버라이딩(Overriding) # 상속은 자식 클래스(서브 클래스)에서 부모클래스의 속성과 동작 등의 기능을 사용할 수 있도록 해줍니다. # 부모 클래스에서 이미 정의된 함수 등을 자식 클래스에서 같은 이름으로 사용하되 안에 들어가는 내용(기능, 속성 등)을 바꿔서 사용할 수 있는데, 이를 Overriding이라고 합니다. # 비전공자가 이해한 Javascript 상속(Inheritance) 객체 지향 프로그래밍에서 크게 3요소로 꼽는 캡슐화, 상속, 다형성 세 가지 중 상속을 말합니다. 상속은 객체들 간의 관계를 구축하는 방법입니다. 클래스로 객체가 정의되고 고전 상속에서, 클래스는 기반 클래스, 수퍼 클래스 또는 부모 클래스 등의 기존 클래스로부터 속성과 동작을 상속받을 수 있습니다. 그 결과로 생기는 클래스를 파생 클래스, 서브.. 자바스크립트(Javascript) - 엄격모드(strict mode) Strict mode strict mode는 ES5에 추가되었습니다. strict mode는 조금은 에러에서 자유로웠던 자바스크립트를 조금 더 엄격하게 검사한다고 생각하시면 됩니다. 즉, 자바스크립트가 그동안 유연하게 넘어갔던 에러들이 심각한 문제를 야기시켰고 이를 방지하기 위해 보다 더 엄격하게 문법 검사를 하겠다는 의미입니다. 선언 strict mode를 선언하기 위해서는 JS의 시작 부분에 "use strict"; 를 입력하면 됩니다. Strict mode를 사용하는 이유 strict mode는 문법과 런타임 동작을 모두 검사해 실수를 에러로 변환하고, 변수 사용을 단순화시켜줍니다. 자바스크립트는 오류를 어느정도 무시하고 넘어갈 수 있습니다. 이는 쉽고 빠르고 유연한 코드 작성에 도움을 주지만 나중.. #14. 자바스크립트(javascript) - getter 와 setter # 클래스 내부에서 사용되는 get 함수와 set 함수에 대해서 알아보도록 하겠습니다. # getter :: property를 읽을 때 동작합니다. # setter :: property에 값을 쓸 때 호출됩니다. # 비전공자가 이해한 Javascript 1. Getter와 Setter getter :: property를 읽을 때 동작합니다. setter :: property에 값을 쓸 때 호출됩니다. 1) Getter getter는 어떤 프로퍼티(property)에 접근할 때마다 그 값을 계산하도록 해야 하거나 내부 변수의 상태를 명시적인 함수 호출 없이 보여주고 싶을 때 Javascript의 getter를 이용할 수 있습니다. 바인딩(binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로.. #13. 자바스크립트(javascript) - 클래스(Class) 와 생성자(Constructor) # Class에 대한 구조를 이해하고 정의하는 방법에 대해서 공부해도록 하겠습니다. # 두번째로는 class에 들어가는 constructor(생성자)에 대해서도 배워보도록 하겠습니다. # 비전공자가 이해한 Javascript CLASS 1) Class 란? Class(클래스)는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드(method = 함수, function)를 정의하는 일종의 틀입니다. 자바스크립트에서는 클래스를 템플릿이라고 부릅니다. 이 클래스는 "같은 목적을 위한 함수들의 묶음"이라고 할 수 있습니다. 예를 들어 사람(person)이라는 클래스가 있고 이 클래스는 사람이 태어날 때 입력된다고 가정해봅니다. 태어난 사람에 대한 정보는 constructor에 입력받습니다. 이름,.. #12. 자바스크립트(javascript) - Arrow function # Arrow function은 일반 함수보다 간결하게 사용할 수 있도록 합니다. # 이번에는 arrow function의 사용방법에 대해서 알아보도록 하겠습니다. # 비전공자가 이해한 Javascript Arrow function Arrow function은 일반 함수보다 간결하게 사용이 가능하고 블럭없이도 사용이 가능합니다. Arrow function은 항상 anonymous function 입니다. 1) Arrow function 위의 식처럼 간단하게 표현될 수 있습니다. 먼저 변수명을 정하고 "function" 글자를 뺀 후 "=" 와 ">"를 합쳐 arrow를 만들고, 출력하고 싶은 내용을 넣으면 끝입니다. 아래의 예시는 return 값이 있는 경우를 표현한 식입니다. 위와 마찬가지로 "func.. #11. 자바스크립트(javascript) - 매개변수(parameter, 파라미터) # 매개변수(parameter, 파라미터)는 변수의 특별한 한 종류로서 함수 등에 input으로 제공되는 데이터를 말합니다. # 매개변수는 하나의 속성값을 받을 수도 있고, object를 받을 수도 있습니다. # 매개변수의 기본값도 미리 설정해 매개변수를 받지 못한 경우 기본값으로 사용할 수 있습니다. # 비전공자가 이해한 Javascript 1. 매개변수(parameter, 파라미터)컴퓨터 프로그래밍에서 매개변수란 변수의 특별한 한 종류로서, 함수 등과 같은 서브루틴의 input으로 제공되는 여러 데티어 중 하나를 가리키기 위해 사용됩니다. 여기서 서브루틴의 iunput으로 제공되는 여러 데이터들을 전달인자(argument)라고 부릅니다. 보통 매개변수의 목록은 서브루틴의 정의 부분에 포함되며, 매번 .. #10. 자바스크립트(javascript) - 함수(function) # 이번 시간에는 Javascript의 함수에 대해 배워보도록 하겠습니다. # 비전공자가 이해한 Javascript 함수(function) 프로그래밍에서 함수(function)란 하나의 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합이라고 정의할 수 있습니다. 1) 함수 선언(Function declaration) 자바스크립트의 함수를 선언할 때 가장 기본적인 구조는 위의 예시와 같습니다. 먼저 function을 이용해 함수임을 선언하고 함수의 이름(name 부분)을 정의합니다. "( )" 부분에는 함수에서 사용될 파라미터들을 정합니다. 이 부분은 함수를 실행할 때 외부로부터 받을 인자들을 입력합니다. 예를 들어 "a + b = c" 라는 식을 계산하기 위한 함수를 만들 때, .. #9. 자바스크립트(javascript) - while문 , for문 # 자바스크립트의 반복문(loop)인 while문과 for문에 대해서 공부해도록 하겠습니다. # while문 , for문: 조건이 참일 때까지 반복되는 구문 # Visual Studio Code 및 Extension 설치 방법 0); while문과 다른 점은 do while문은 변수 z의 값이 -1이어도 일단 블록을 실행한다고 생각하시면 됩니다. 다음 예제를 보시면 더 명확히 그 차이를 아실 수 있습니다. 2. for문 1) 기본 문법 시작 변수 자리는 처음 for문이 실행될 때 단 한번만 실행됩니다. 조건이 참일 경우 "실행할 구문"을 실행한 후 단계 부분을 실행합니다. 단계를 거쳐 다시 조건을 확인하고 "실행할 구문"을 실행한 후 다시 단계 부분을 실행합니다. 2) for문 let x = 3 for .. 이전 1 2 3 4 5 6 7 다음
