Java Script STUDY1

syahn_publisher·2021년 10월 5일
0

JavaScript

목록 보기
1/2
post-thumbnail

💡 Expression

-값을 만들어내는 간단한 코드를 표현식이라고 한다.
-표현식은 값을 만들어내기 때문에 함수의 인자로 사용할 수 있다.

ex. 
"hello" + "world"
1000 + 900 + 90 + 4
true
alert("test"); 등등..

💡 Statement

-하나 혹은 여러개의 표현식이 모여 문장을 이룬다.
-모든 표현식은 문장이 될 수 있다.
-(보통)문장의 긑에는 세미 콜론을 붙힌다.
-조건문(if), 반복문(for)도 문장이다.
-이 경우에는 마지막 } 뒤에 세미콜론을 붙이지 않는다.

ex.
"abc"
var name= "Mark"
alert("hello");
true; 26; 1000 + 900 + 90
->문자열


👩‍💻 표현식이 모여 문장이 되고 문장이 모여서 프로그램이 된다.

💡 Keyword

-자바스크립트에서 특정한 목적을 위해 사용하는 단어
-이러한 키워드 들은 예약어(Reserved Keywords)로 지정되어 있다.
예약어: 프로그램을 작성할 때, 변수명, 함수명 등 이름으로 사용할 수 없는 단어.

var name = 'Mark'; //var라는 단어는 변수를 선언할 때 사용하는 키워드이다.

var retrun = '변수명';//retrun은 예약어라 변수명으로 사용할 수 없다.
function for (){} //for는 예약어라 함수명으로 사용할 수 없다.
->이미 존재하는 함수들

💡 Identifier-식별자

-코드 내의 변수, 함수 혹은 속성을 식별하는 문자열
-대소문자를 구분한다.
-🚨유니코드 문자, $ _ 숫자(0-9)를 사용할 수 있지만, 숫자로 시작할 수는 없습니다.
-🚨예약어는 사용할 수 없고, 공백도 사용할 수 없다.

->프로그램에서 사용하는 변수나 함수의 이름을 짓는 것은 어렵지만, 의미없는 이름은 사용하지 않고,
역할에 맞는 적절한 이름을 짓도록 해야한다.(연관성)
var name = 'Mark';
var Name = 'Mark';
function hello(){}
var person = {name: 'Mark', age: 37};

유효한 식별자인지 확인해주는 사이트
링크:https://mothereff.in/js-variables

💡 Comments-주석

-소스코드에서 프로그램에 영향을 주지않고, 무시되는 부분
-소스코드의 이해를 돕는데 많이 사용된다.

//in browser
function hello(){}

// 한 줄 주석
//function hello(){}

/* 여러줄 주석 */ 
/*function hello(){

}*/

💡 Variable and constant-변수와 상수

//5와 10을 더하고, 3으로 나누어 나머지가 0이면
if((5 + 10) % 3 == 0){
console.log('야호3');
}
//5와 10을 더하고, 5으로 나누어 나머지가 0이면
if((5 + 10) % 5 == 0){
console.log('야호5');
}

const

-상수를 지칭하는 이름 = 값;(상수를 선언하면서 바로 값을 할당하는 방법)
-변하지 않는 값(상수를 선언하는 방법)

const sum = 5 + 10;
if(sum % 3 == 0){
console.log('야호3');
}

if(sum % 5 == 0){
console.log('야호5');
}

let

-변수를 지칭하는 이름 = 값;(변수에 값을 할당하는 방법)
-변할 수 있는 값(변수를 선언하는 방법)

🚨선언과 동시에 값을 할당하거나, 이미 선언되어 있는 변수에 값을 할당하는 것은 가능하나
선언이 아직 안된 변수 식별자에는 값을 할당할 수 없습니다.

//sum이라는 상수에 5+10을 보관한 뒤, 
//3 or 5로 나누어 0이 되면, '야호3' or '야호5'를 출력한다.
//result라는 변수는 3으로 나누어 떨어지거나, 5로 나누어 떨어지면 true라는 값을 가지고
//아니면 false라는 값을 가진다.
const sum = 5 + 10;
let result = false;

if(sum % 3 === 0){
  console.log('야호3');
  result = true;
}

if(sum % 5 === 0){
   console.log('야호5');
   result = true;
}
console.log(result);

var

-변수를 지칭하는 이름 = 값;(변수에 값을 할당하는 방법)
-변할 수 있는 값(변수를 선언하는 방법)


💡변할 여지가 잇는 것 -> 변수
💡변하지 않는 것 -> 상수
💡var는 중복선언 가능, let은 중복선언 불가

💡 scope of variables-변수의 유효범위

const, let의 유효범위(블록 스코프)
블록 -> {}

{
  const name = 'Mark';
  console.log(name);//Mark
}

console.log(name);//에러



let age = 37;
{
	age++;
  console.log(age);//38
}
console.log(age);//38


{
  {
    {
      console.log(age);
    }
  }
}

var 의 유효범위(함수 스코프)
function(){} ->함수

var a = 0;

(function(){
  a++;
  console.log(a);//1
})();

console.log(a);//1

(function(){
  var b = 0;
  console.log(b);//0
})();

b++;
console.log(b);//에러
var c = 0;

{
c++;
  console.log(c);//1
}

{
var d = 0;
  console.log(d);//0
}
console.log(d);//0, 함수 스코프는 블록이 상관없다.

💡 var & hoisting- var와 호이스팅

-아래 있는 선언을 ()으로만 끌어올리다.-hoisting

변수명();

//함수 먼저
function hello1(){
console.log('hello1');
}
hello1():

//함수의 호출 먼저
hello2();
function(){
console.log('hello2');
}

age = 6;
age++;
console.log(age);//7, 출력가능
var age;//선언을 아래에서 했지만..


console.log(name);//undefined
name = 'Mark';
console.log(name);//Mark
var name = 'sy'


console.log(name);//name is not defined
name = 'Mark';
console.log(name);//name is not defined
let name;

💡 Data Types- 자료형(데이터 타입)

-변수가 가지고 있는 고정 타입은 따로 없다.하지만 타입이 없는 것은 아니다.

기본타입(Primitive values)
-Boolean(true/false)
-Null
-Undefined
-Number
-String
-Symbol (ECMAScript6에 추가됨)->고유한 값을 만들고 싶을때
객체(Objects)

let whatever = 'Mark';//문자열 변수
whatever = 37;//숫자형 타입
whatever = true;//boolean타입

const isTrue = true;
const isFalse =false;

console.log(isTrue, typeof isTrue); //true 'boolean'
console.log(isFalse, typeof isFalse); //false 'boolean'

const a = new Boolean(false);
console.log(a, typeof a);
//[Boolean: false]'object'
//오브젝트 a를 콘솔로 찍는다면?
if(a){
console.log('false?');//'false?'
}

const b = Boolean(false);
console.log(b, typeof b);//false, boolean
//boolean b를 콘솔로 찍는다면? 
if(b){
console.log('false?');//찍히지 않음
}

const a = null;
console.log(a, typeof a);//null,'object'


let b;
console.log(b, typeof b);//undefined, 'undefined'

b = undefined;
console.log(b, typeof b);//undefined, 'undefined'

if(a = b){
console.log(a = b);//null a와 undefined b를 비교하면 ->true 나온다.
                  //null a와 undefined를 비교하면 같다라고 나온다.
}

if (a === b){//정확하게 구분하고 싶다면 ===
console.log(a === b);
}

const a = 37;//number
const b = 96.7;//number
const c = NaN;//number
const d = Number('Mark');//number
const e = Number('37');//number

const a = 'Mark';//string
const b = "Mark";//string

const b = 'mark' + 'Lee';//mark Lee, string
const c = a + 'Lee';//mark Lee , string
const d = '${a} Lee';//mark Lee, string

const a = Symbol(); //symbol
const b = Symbol(37);
const c = Symbol('Mark');
const d = Symbol('Mark');

console.log(c === d);//false, c와 b는 고유한 다른 값이기 때문에(다른 심볼) 같지않다고 뜬다.

new Symbol();//Symbol is not a constructor ,쓸수없는 단어다.
profile
🍀걸어가는 중

0개의 댓글