본문 바로가기

JavaScript

[JavaScript 강의 노트(1)] 데이터 타입, 변수, 조건문, 반복문

반응형

 javascript 강의 노트 | Byte Degree [1주차]

 

javascript

- 스크립트언어

- 인터프리터 언어

 

마지막문장에는 세미콜론을 붙이지 않아도 된다.

조건문, 반복문 마지막 블록에 세미콜론을 붙이지 않는다.

 

키워드&예약어

키워드 (ex) var)

-자바스크립트에서 특정한 목적을 위해 사용하는 단어.

-예약어로 지정되어있다.

 

예약어 (ex) return, for)

-프로그램을 작성할떄 변수면 함수명 등을 이미 정해져 있는 단어

reserved keywords

-이미 특정한 목적을 위해 사용하기 떄문에 사용할 수 없는 예약어

future reserved keywords

-앞으로 특정한 목적을 위해 사용할 가능성이 있어서 사용할 수 없는 예약어

 

식별자

- 코드 내의 변수, 함수, 혹은 속성을 식별하는 문자열

- 대소문자를 구분한다

- 유니코드문자,$,_,숫자를 사용할 수 있지만, 숫자로 시작할 순없다

- 예약어, 공백 사용불가

(함수의 이름, 변수의 이름, 객체의 key)

 

주석 comment

- 소스코드에서 프로그램에 영향을 주지않고, 무시되는 부분

 

변수(variable)상수(constant)

const 상수를_지칭하는_이름 = 값;

=> 상수를 선언하면서 바로 값을 할당해야한다

let 변수를_지칭하는_이름;

=> 변수를 선언

=> 상수와 마찬가지로 선언과 동시에 값을 할당해도 무관

 

변수의 유효범위(scope)

const, let - 블록 스코프 { } - (블록 내부에서 외부는 확인가능, 외부에서 내부 변수 사용불가)

var - 함수 스코프

 

var와 호이스팅

호이스팅- 아래있는 선언을(만) 쓸어올린다.

 

자료형 (data types)

- 기본적으로 자스는 느슨한 타입의 언어, 동적 언어이다.

- 기본타입(primitive values)

  - boolean - true, false

  - null 

  - undefined

  - number

  - string

  - symbol

- 객체(object)

 

조건문.1

- 블록에 코드가 한줄이면, {} 중괄호는 생략 가능하다.

- 조건이 거짓으로 평가되는 경우 - falsy(false, 0, '', null, undefined, NaN)

- 조건이 참으로 평가되는 경우 - Truethy(true, 37, 'Mark', {}, [])

 

조건문.2

조건문.3

조건문.4

- 삼항연산자  조건 ? 참 : 거짓

- switch case: break; default:

 

반복문1

- for문, while문

반복문2

- do{조건이 거짓이 될 때까지 반복실행}while(조건);

- for of - iterable 객체에 모두 사용가능(배열과 같은 요소)

- for in - 모든 프로퍼티에서 사용가능(객체에서도 사용가능)

 

함수A,B,C

- function(){}

- const foo = function(){}

- const hello = new Function(); (잘안쓰임) - ex) const sum = new Function('a','b','c', 'return a+b+c');

- function과 new Function 차이점 - new Function은 글로벌 변수를 사용함

- arrow function은 this가 인식이 안됨

 

- 생성자 함수를 이용해서 새로운 객체를 만들어 내는 방법

 

function Person(name, age){
	this.name = name;
    this.age = age;
}

const P = new Person('mark',25);

 

 

- 함수안에 함수 만들어서 return 하기

 

function plus(base){
	return function(num){
    	return base+num;
    }
}

const plus5 = plus(5);
console.log(plus5(10));

//15

 

 

- 함수를 인자로 하여 함수 호출

 

function hello(c){
	console.log('hello');
	c();
}

hello(function(){
	console.log('콜백');
});

//hello
//콜백

 

객체1

 

- 생성자 함수로 객체 만들기

function A(){}

const a = new A();

 

- 값을 속성으로 넣기

function A(){
	this.name = 'mark';
}

const a = new A();
console.log(a);

//{name:'mark'};

 

 

- 함수를 속성으로 넣기

 

function A(){
	this.hello = function(){
    	console.log('hello');
    }
}

new A().hello();

//'hello'

 

 

객체2

new Object()

- object로 객체 만들기 (권장되는 방법은 아님)

 

const a = new Object();
console.log(a);

//{}

 

- 프로토타입 확장, 상속

 

function Person(){}

Person.prototype.hello = function(){
	console.log('hello');
}

function Korean(region){
	this.region = region;
    this.where = function(){
    	console.log('where', this.region);
    };
}

Korean.prototype = Person.protortype;

const k = new Korean('Seoul');

k.hello(); //hello
k.where(); //where Seoul

//프로토타입 체인에 들어있기 때문에 상위객체까지 true
console.log(k instanceof Korean); //true
console.log(k instanceof Person); //true
console.log(k instanceof Object); //true

 

객체 리터럴

 

const a = {

  name:'mark',

};

 

 

 표준 내장 객체

- array

const a = new Array('red','black');

const b = ['red','black'];

'JavaScript' 카테고리의 다른 글

[JavaScript 강의 노트(3)] Promise / async, await  (0) 2020.12.01
[JavaScript 강의 노트(2)] class  (0) 2020.11.30
2048 | ZeroCho  (0) 2020.10.22
call by value, 생성자  (0) 2020.10.20
팩토리 패턴, 프로토타입  (0) 2020.10.18