html,css,javascript (1/9)

상목·2023년 1월 17일
0

javascript

목록 보기
1/2

덕북 - https://thebook.io/

인프런 - https://www.inflearn.com/

Mdn - https://developer.mozilla.org/ko/

모던 - https://ko.javascript.info/

자스 (JavaScript)

  • 브라우저에서 자스 사용
  • vscode에서 자스 사용
  • 주석
  • 변수, 함수, 배열, 객체
  1. 클래스 변수는 타입을 따라간다.

1. 자바스크립트 자료형 종류

원시값 - 언어의 최고 로우레벨에서 직접 표현되는 불변 데이터

  • Boolean 타입 - 논리요소, (true, false) 두가지 값을 가진다.

  • Null 타입 - null값 한가지만 가질수 있다.

  • Undefined 타입 - 값을 할당하지 않은 변수는 undefined 값을 가진다

  • Number 타입 - 부동소수점 숫자 외에도 +Infinity, -Infinity, NaN("Not a Number") 세개의 상징적인 값을 가집니다.

    범위 내에서 가능한 가장 크거나 작은 수를 확인하려면 Number.MAX_VALUE와 Number.MIN_VALUE 상수를 사용할 수 있습니다.

  • Bigint 타입 - Number의 안전 한계를 넘어서는 큰 정수도 안전하게 저장하고 연산할 수 있습니다.

  • String 타입 - 텍스트 데이터를 나타낼 때 사용합니다. 16비트 부호 없는 정수 값 "요소"로 구성된 집합으로, 각각의 요소가 String의 한 자리를 차지

    원본 문자열에서 각각의 문자를 선택하거나 String.substr()을 사용해 생성한 부분문자열
    연결 연산자(+)를 사용하거나 String.concat()을 사용해 두 개의 문자열을 합친 결과물

  • Symbol 타입 - 고유하고 변경 불가능한 원시 값이며 객체의 속성(아래를 참고하세요) 키로 사용할 수 있습니다. 어떤 프로그래밍 언어들에선 "아톰"이라고 부르기도 합니다.

2. 변수 선언 방법

1. var (function scope)

var i;  // 선언, "undefined"가 저장됨
var sum = 0;  // 선언과 초기화
var i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음
var i=0, sum=10, message=”Hello”;  // 선언과 초기화를 동시에 해줄 수 있음
name = "javascript";  // 선언되지 않은 변수는 전역 변수가 됨

var문에서 변수에 초기 값을 지정하지 않는다면, 변수는 값이 설정될 때까지 undefined 값을 갖게 된다.

<함수 유효 범위>

함수 유효범위는 어떤 함수 안에서 선언된 모든 변수는 그 함수 전체에 걸쳐 유효하다는 의미다. 이는 변수가 미처 선언되기 전에도 유효하다는 뜻이기도 하다

< 호스팅(Hostiog) >

자바스크립트 코드는 함수 안에 있는 모든 변수를 함수 맨 꼭대기로 끌어올린 것처럼 동작한다.

var scope = “global”;
function f() {
 console.log(scope);  //"undefined"를 출력한다.(global이 아니다)
 var scope = “local”;  
 console.log(scope);  //"local"을 출력한다.
}

=> 실제로 실행되는 코드는 이렇다.

function f() {
 var scope;  //끌어올림(hoisting)이라고 한다.(대신, 정의만 끌어올려진다)
 console.log(scope);  // "undefined"가 저장되어 있다.
 scope = "local";  // 초기화는 끌어올려지지 않는다.
 console.log(scope);
}
  1. let (Back scope)
let i;  // 선언, "undefined"가 저장됨
let sum = 0;  // 선언과 초기화
let i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음
let i=0, sum=10, message=”Hello”;  // 선언과 초기화를 동시에 해줄 수 있음

<블록 유효 범위>

let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언한다. 이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점이다.

<var 과 let 차이점>

var는 전역 객체의 프로퍼티를 생성하지만, let은 전역 객체의 속성 값을 생성하지 않는다.

< 호스팅(Hostiog) >

호스팅 되지 않음, 변수가 초기화(선언)되기 전에 참조할 경우 ReferenceError가 발생한다.

  1. 상수 (const - bolck scope)
  • 블록 범위의 상수를 선언한다. (let와 같은 블록 유효범위)
  • 상수의 값은 재할당 될수 없으며, 다시 선언할 수도 없다.
  • 처음 선언할 때, 반드시 초기화를 해야한다.
const MY_NUM = 7;

<함수 호스팅>

  • 함수에서는 단지 함수 선언만 상단으로 끌어올려집니다. 함수표식은 그렇지 않다.
/* 함수 선언 */ 
foo(); // "bar"
function foo() {
  console.log('bar');
}
/* 함수 표현식 */
baz(); // TypeError: baz is not a function
var baz = function() {
  console.log('bar2');
};

<전역변수>

  • global 객체의 속성(property)이다. 웹 페이지에서의 global은 window -> window.variable구문을 통해 전역 변수를 설정하고 접근이 가능하다.
  • 전역변수를 선언한다는 것은 객체의 프로퍼티를 정의하는 것이다.
  • 자바스크립트 전역 변수는 전역 객체의 프로퍼티이고, 지역 변순느 규정된 것은 없지만, 변수를 각 함수 호출(또는 블록) 연관된 객체의 프로퍼티로 생각해도 된다.
  • this 키워드로 전역 객체를 참조할 수 있다

3. 자바스크립트 함수 선언 방법

  1. named function declaration (명명 함수 선언)
function hello() {
  // ...
}

함수의 이름이 hello가 된다. 이미 여러차례 싸질러 놨듯, 호이스팅 되기 때문에 이 함수는 어느 스코프에서든 호출 할 수 있는 함수가 된다.

  1. anonymous function expression (익명 함수 표현)
var hello = function () {
  //...
}

이름이 없는 함수를 변수에 담은 방식이다. 이름이 없는 함수긴 한데, 자바스크립트 엔진이 이름을 변수명으로 추정하여 넣는다.

var hello = function () {
  //...
}

hello.name

//  > "hello"
hello

// > ƒ () {
//   //...
// }

변수 할당은 호이스팅 되지 않으므로, 할당 된 이후에만 실행 가능하다.

  1. named function expression (명명 함수 표현)
var hello = function originalName() {
  // ...
}
>2와 거의 동일하지만, 함수 이름이 명확하게 선언되어 있으므로 JS 엔진에 의해 추론되지 않는 다는 것이다.

4. Immediately-invoked expression (즉시 실행 표현)

var hello = (function () {
  //...
})()

즉시 실행 함수로, 클로져를 활용할 수 있다. 내부 함수는 변수나 다른 함수등을 쓸 수 있지만,이 함수 밖에서는 완전히 캡슐화되어 접근 할 수 없다. 가장 흔해 빠진 예제 중 하나로는 카운터가 있다.

var myCounter = (function (initialValue = 0) {
  let count = initialValue
  return function () {
    count++
    return count
  }
})(1)

myCounter() // 2
myCounter() // 3
myCounter() // 4

외부 함수에서 넘겨준 1을 가지고, 내부에서 처리를 하여 리턴하고 있다.

  1. arrow function (화살표 함수)
var hello = () => {
  //...
}
  • 'constructor'로 쓰일 수 없다.
  • 'prototype'을 가지고 있지 않는다
  • 'yield' 키워드를 허용하지 않으므로 generator를 쓸 수 없다.
  • 'this'도 다르다.

#리턴

const f1 = (x, y, z) => x + y + z

const f2 = (x, y, z) => {
  return x + y + z
}

위의 f1과 f2는 값이 같다. object를 바로 리턴하려면 괄호를 씌우면 된다.

const f3 = (x, y, z) => ({ x, y, z })

4. JSon

  • JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식

  • Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.

  • JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.

  • JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.

5. 자바스크립트 스코프

스코프는 참조 대상 식별자 (변수, 함수의 이름과 같이 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다

전역 스코프(Global scope) : 바깥 스코프 라고하며 어디에서든 참조 할수있다. 바깥쪽 전역에서 선언된 변수 어디든 참조 가능하다

지역 스코프(Local scope) : 안쪽 스코프 라고하며 블록 안, 함수 내에서만 참조 할수있다. 안쪽 지역내에 선언된 변수 안에서만 참조 가능하다.

  1. var, let, const 차이점

  • let, const 와 var의 차이점중 큰것은 유효범위
if(true){
let userName = 'Kimcoding'
console.log(userName); //'Kimcoding'
}
console.log(userName); //ReferenceError: userName is not defined

위 예제에서 전역에 선언된 변수 x는 어디에든 참조할 수 있다. 하지만 함수 foo 내에서 선언된 변수 x는 함수 foo 내부에서만 참조할 수 있고 함수 외부에서는 참조할 수 없다. 이러한 규칙을 스코프라고 한다.

profile
상목
풀스택 개발 이야기
다음 포스트

Java Script

0개의 댓글