JS 표현식 Javascript의 표현식, 문장, 표현식에 대한 모든 정보

본고가 끝날 때, 당신은 다음 그림의 코드가 어떻게 작동하는지, 그리고 왜 작동하는지 상세하게 설명할 수 있어야 합니다.

Javascript에는 다음과 같은 두 가지 주요 구문 범주가 있습니다.

보고서

표현식

이 점을 구분하는 것은 매우 중요하다. 왜냐하면 표현식은 문장처럼 일할 수 있기 때문이다. 이것이 바로 우리가 표현식 문장을 가지고 있는 이유이다.그러나 다른 한편, 문장의 행위는 표현식과 같아서는 안 된다.

표현

표현식 가치 발생

표현식은 단일 값을 생성하는 Javascript 코드 세그먼트입니다.표현식은 임의로 길어질 수 있지만, 항상 값이 생성됩니다.

2 + 2 * 3 / 2

(Math.random() * (100 - 20)) + 20

functionCall()

window.history ? useHistory() : noHistoryFallback()

1+1, 2+2, 3+3

declaredVariable

true && functionCall()

true && declaredVariable

위의 모든 내용은 표현식입니다. 자바스크립트가 필요로 하는 값의 어느 곳에나 나타날 수 있습니다.따라서 아래 console.log의 매개 변수는 단일 값으로 해석되어 컨트롤러에 기록됩니다.

console.log(true && 2 * 9) // 18

표현식이 반드시 상태를 바꾸는 것은 아니다

예:

const assignedVariable = 2; //this is a statement, assignedVariable is state

assignedVariable + 4 // expression

assignedVariable * 10 // expression

assignedVariable - 10 // expression

console.log(assignedVariable) // 2

위의 코드 세그먼트에 모든 표현식이 있지만, assignedVariable의 값은 여전히 2입니다.왜 이 절의 제목에 necessarily이 나타났는지 함수 호출은 표현식이지만 함수는 상태를 바꾸는 문장을 포함할 수 있기 때문이다.그래서 foo() 자체가 하나의 표현식이다. 정의되지 않은 값을 되돌리거나 다른 값을 되돌리거나 foo이라고 쓰면

const foo = foo () => {
  assignedVariable = 14
}

그리고 그 호출이 표현식이라고 해도 그 호출은 상태 변경을 초래할 수 있다.따라서 foo 함수와 문장을 다시 쓰는 가장 좋은 방법은 다음과 같다.

const foo = foo () => {
  return 14 //explicit return for readability
}
assignedVariable = foo()

심지어 더 좋다

const foo = foo (n) => {
  return n//explicit return for readability
}
assignedVariable = foo(14)

이렇게 하면 당신의 코드는 더욱 읽을 수 있고 조합할 수 있으며 표현식과 문장 사이에 명확한 차이와 분리가 있습니다.이것은 함수식과 성명식 자바스크립트의 기초이다.

성명

문장은 함수식 프로그래밍의 두통 문제다.기본적으로 문장은 동작을 수행하고 그들은 일을 한다.
자바스크립트에서, 문장은 예상한 값에 영원히 사용할 수 없습니다.따라서 함수 매개 변수, 부여된 값의 오른쪽, 연산자 조작수, 반환 값으로 사용할 수 없습니다.

foo(if () {return 2}) //js engine mind = blown

이것들은 모두 자바스크립트 문장입니다.

만약에

그렇지 않으면

및

do,

은

에 사용

스위치

은

에 사용

및 (기용)

디버거

변수 성명

브라우저 컨트롤러에 다음 코드 세그먼트를 입력하고enter 키를 누르면

if (true) {9+9}

18으로 되돌아오는 것을 볼 수 있지만, 그럼에도 불구하고 표현식이나 Javascript가 필요로 하는 값으로 사용할 수 없습니다.문장이 아무 것도 되돌아오지 않기를 바라기 때문에, 문장을 사용할 수 없다면, 되돌아오는 값은 거의 쓸모가 없기 때문이다.이것은 너의 Javascript야, 이상해.

함수 성명, 함수 표현식 및 명명 함수 표현식

함수 성명은 문장이다

function foo (func) {
  return func.name
}

함수 표현식은 익명 함수라고 불리는 표현식입니다.

console.log(foo(function () {} )) // ""

명명 함수 표현식은 익명 함수와 유사하지만 이름이 있습니다

console.log(foo(function myName () {} )) // "myName"

표현식 함수와 선언된 함수 간의 차이점은 다음과 같습니다.
Javascript에서 값이 필요한 함수를 설명할 때마다 값으로 간주하려고 합니다. 값으로 사용할 수 없으면 오류가 발생합니다.
그러나 스크립트, 모듈의 전역 단계나 블록 문장의 맨 윗부분 (즉 값이 필요하지 않은 곳) 에서 함수를 설명하면 함수 설명을 할 수 있습니다.
예:

if () {
  function foo () {} // top level of block, declaration
}

function foo () {} //global level, declaration

function foo () {
  function bar() {} //top level of block, declaration
}

function foo () {
  return function bar () {} // named function expression
}

foo(function () {}) // anonymous function expression

function foo () {
  return function bar () {
    function baz () {} // top level of block, declaration
  }
}

function () {} // SyntaxError: function statement requires a name

if (true){
  function () {} //SyntaxError: function statement requires a name
}

표현식을 문장으로 변환: 표현식 문장

자바스크립트의 어떤 것도 간단명료한가

2+2; //expression statement
foo(); //expression statement

줄 끝에 세미콜론을 추가하거나 이 동작을 허용하기만 하면 표현식을 표현식 문장으로 변환할 수 있습니다.2+2 자체는 표현식이지만 전체 줄은 하나의 문장이다.

2+2 // on its own is an opposition

foo(2+2) //so you can use it anywhere a value is expected

true ? 2+2 : 1 + 1

function foo () {return 2+2}


2+2; //expression statement
foo(2+2;) //syntaxError

세미콜론과 쉼표 연산자

세미콜론 을 사용하면 같은 줄에 여러 개의 문장을 보존할 수 있다

const a; function foo () {}; const b = 2

쉼표 연산자는 여러 표현식을 링크하고 마지막 표현식만 되돌려줍니다.

console.log( (1+2,3,4) ) //4

console.log( (2, 9/3, function () {}) ) // function (){}

console.log( (3, true ? 2+2 : 1+1) ) // 4

Sidenote: one way to tell the Javascript engine to expect a value is via parentheses, (), without the parentheses, each expression will be treated as an argument to console.log.

function foo () {return 1, 2, 3, 4}
foo() //4

모든 표현식은 왼쪽에서 오른쪽으로 값을 구하고 마지막 표현식으로 되돌아옵니다.

IIFES(즉시 호출되는 함수 표현식)

익명 함수는 표현식일 수 있습니다. 만약에 우리가 자바스크립트에 값이 필요한 곳에서 그것을 사용한다면, 이것은 우리가 자바스크립트에 괄호가 있는 값이 필요하다고 알려줄 수 있다면, 우리는 익명 함수를 이 값으로 전달할 수 있음을 의미합니다.

function () {}

따라서 위의 코드 세그먼트는 무효지만 아래의 코드 세그먼트는 유효하다

(function () {}) // this returns function () {}

만약 익명 함수를 괄호 안에 놓고 바로 같은 익명 함수를 되돌려준다면, 이것은 우리가 직접 그것을 호출할 수 있다는 것을 의미한다. 다음과 같다.

(function () {
  //do something
})()

그래서 이것들은 모두 가능하다

(function () {
  console.log("immediately invoke anonymous function call")
})() // "immediately invoke anonymous function call"

(function () {
  return 3
})() // 3

console.log((function () {
  return 3
})()) // 3

//you can also pass an argument to it
(function (a) {
  return a
})("I'm an argument") // I'm an argument

객체 문자 및 블록 문

Sidenote: this is valid Javascript

r: 2+2 // valid

foo()

const foo = () => {}

이상은 전역적인 문장 서열로 유효한 자바스크립트로 해석되어 실행됩니다.r은 당신이 말한 라벨입니다. 그것들은 순환을 깨는 데 가장 유용합니다.예:

loop: {
  for (const i = 0; i < 2; i++) {
    for (const n = 0; n <2; n++) {
      break loop //breaks outer loop and stops entire loop
    }
  }
}

모든 표현식이나 표현식 문장에 레이블을 미리 추가할 수 있습니다. 변수 실험실을 만드는 것이 아닙니다.

lab: function a () {}
console.log(lab) //ReferenceError: lab is not defined

괄호 {}, 표현식 문장과 문장을 그룹화할 수 있습니다.그래서 너는 쓸 수 있지만,

{var a = "b"; func(); 2+2} // 4

위의 내용을 브라우저 콘솔에 붙여넣으면 4가 반환됩니다. console.log(a) 작업을 수행하면 문자열 b이 표시됩니다.사용할 수 있는 객체 문자와 다른 블록 문이라고 할 수 있습니다.

console.log({a: 'b'}) // {a: 'b'}

console.log({var a = "b", func(), 2+2}) // SyntaxError

const obj = {var a = "b", func(), 2+2} // SyntaxError

블록 문장을 값이나 표현식으로 사용할 수 없습니다. 컨트롤러이기 때문입니다.log는 함수입니다. 문장을 매개 변수로 받아들일 수 없습니다.그러나 객체 문자를 받아들일 수 있습니다.Â
나는 네가 내가 위에서 설명한 모든 내용을 이해할 수 있기를 바란다. 왜냐하면 아래의 다음 부분은 너를 깜짝 놀라게 할 수 있기 때문이다.

{} + 1 //1

{2} + 2 // 2

{2+2} + 3 // 3

{2+2} -3 // -3

문법 오류를 던지거나 1, 4, 7로 되돌아가기를 원할 수도 있습니다.기억해라. 문장은 값으로 사용할 수 없기 때문에 어떤 내용도 되돌려주어서는 안 된다.따라서 Javascript는 오류를 던지는 것이 아니라 + 연산자의 조작수를 숫자나 문자열로 변환하려고 시도하는 것입니다. 그렇지 않으면 던지십시오.따라서 블록 문장이 되돌아오는 모든 내용은 은밀하게 0으로 강제되어 조작수로 사용된다.
흠, 네가 계속 읽으면 진정한 MVP야.이것은 당신이 알아야 할 표현식, 문장, 표현식 문장에 대한 모든 내용일 수 있습니다.